Afisare imagine mare la clic pe thumbnail
Scris: Mie Sep 11, 2013
Salut. Am o galerie de thumbnail-uri cu acelasi clasa fiecare.Vreau ca atunci cand dau click pe un thumbnail sa se afiseze imaginea mai mare. Am pe server imaginea la marimea ei, la fel si thumbnail-ul iar pentru a le afisa folosesc urmatorul cod:
Iar ca atunci cand se da click pe iamgine sa se afiseze un div cu ea la o dimensiune mai mare folosesc:
Problema este ca atunci cand se da click pe un thumbnail se afiseaza toate imaginile deoarece au acelasi clasa. Numarul imaginilor care trebuie afisate variaza, in functie de cate sunt pe server.
Cum pot face ca atunci cand sa da click pe un thumbnail sa apara un div in care este imaginea la o dimensiune mai mare ?
Cod: Selectaţi tot
<div class="images">
<?php
if (!empty($results)) {
foreach($results as $data) {
echo '<img class="image-thumb" src="'.$data->DirectLinkThumb.'"><img class="image-full" src="'.$data->DirectLinkResized.'">';
}
} else {
echo "You don't have uplaoded photos.";
}
?>
</div>
Cod: Selectaţi tot
<script type="text/javascript">
$(document).ready(function() {
$('.image-thumb').click(function() {
$('.image-full').toggle();
});
});
</script>
Cum pot face ca atunci cand sa da click pe un thumbnail sa apara un div in care este imaginea la o dimensiune mai mare ?