Afisare imagine mare la clic pe thumbnail

[Mezuky]

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:

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>

Iar ca atunci cand se da click pe iamgine sa se afiseze un div cu ea la o dimensiune mai mare folosesc:

Cod: Selectaţi tot

<script type="text/javascript">
$(document).ready(function() {
	$('.image-thumb').click(function() {
		$('.image-full').toggle();
	});
});
</script>

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 ?

Incearca acest cod jQuery. Ascunde imaginea pe care se apasa clic si afiseaza pe urmatoarea dupa ea.

Cod: Selectaţi tot

$(document).ready(function() {
  $('.image-thumb').click(function() {
    $(this).hide();
    $(this).next().toggle();
  });
});

Daca vrei ca imaginea sa fie afisata intr-un Div. Poti folosi urmatorul cod. Adauga urmatoarea imagine, dupa cea pe care se apasa clic, in div-ul cu id="showimg" (pe care trebuie sa-l ai in codul HTML).

Cod: Selectaţi tot

<div id="showimg"></div>
<script type="text/javascript">
$(document).ready(function() {
  $('.image-thumb').click(function() {
    $(this).hide();
    $('#showimg').html('<img src="'+ $(this).next().attr('src') +'" />');
  });
});
</script>