jquery - onclick : show the image

0
votes

I want to display full screen of a image when i click on thumbnail of it.

Images are hardcoded using IMG tag and having class .imagethumb

Images are displayed as thumbnail and when I click on the thumb it should display in a div called #preview , inside #preview I have a IMG tag to display the full screen of clicked image.

How can I achieve it in jquery ?

2
javascriptjquerycss
Please show your code and what you have tried – Simone
You can find many jquery plugins that will do that for you, for instance lightbox – JMax
I want to try by writing simple jquery. Since I am beginner I want to try my own. Please help me – ismail vittal
If you want to try on your own, go ahead and get started: come back when you have a code question to ask. Having someone write the whole thing for you is not going to help you learn, and you have at least one link with an example you can look at. – Wesley Murch
'<img class="imagethumb" src="images/bird.jpg"><img class="imagethumb" src="images/building.jpg">' I want to fetch these images onclick event. how to get image src in jquery – ismail vittal

2 Answers

0
votes

You should give Simplemodal or Fancybox a try.

0
votes

This should do the trick:

$('.imagethumb').click(function()
{
    $('#preview').find('img').attr('src', $(this).attr('src'));
});

Once any of your thumbnails with the class .imagethumb are clicked, the src attribute of the img element inside your #preview div is set to the src element of the (clicked) thumbnail.