-2

Hi there are lot of topics about this but i still cant figure it out for my example. I've got thumbnails in /thumbnails folder and large images in /image folder all numbered from 1-50. When i click on specific thumbnail a want large image with same number shown on screen (which is my main problem) My html code looks like this:

<div class="thumbnail-box"><img src="thumbs/1.jpg" class="thumbs"></div>
<div class="thumbnail-box"><img src="thumbs/2.jpg" class="thumbs"></div>
<div class="thumbnail-box"><img src="thumbs/3.jpg" class="thumbs"></div>
...

Maybe i need some if code to check which number of thumnail it is and then use that number for an image. If anyone can help i will be really gratefull

user3008629
  • 13
  • 3

1 Answers1

0

Use attr to update src attribute of image.

$('.thumbnail-box').on('click', function() {
    $(this).attr('src', $(this).attr('src').replace('thumbs', 'image'));
});

This will change the image src from thumbs/1.jpg to image/1.jpg.

You might also want to remove class:

$(this).removeClass('thumbnail-box');
Tushar
  • 85,780
  • 21
  • 159
  • 179
  • this will just replace thumbnail for picture. but i actually needs to open a new div with enlarged picture in it. Maybe if i gave every picture different "id" would it be easier? – user3008629 Jun 04 '15 at 13:27