CODEWITHSUNDEEP
jqueryhtmlcss
Jess McKenzie
Jess McKenzie

Reputation: 8385

Image changing with jquery

I like the way that this site is laid out http://www.templerinteriors.co.nz/what-weve-done/kitchens/kitchen-gallery-c/ but what I am wanting to know is what is the best way to have the content change when an image is clicked down the bottom and also the large image show as the one that has just clicked.

Upvotes: 2

Views: 142

Answers (2)

Tom
Tom

Reputation: 3520

Let's say you've put all your thumbnails in an un-ordered list and given the ul an ID called "thumbnails". Then you've added an ID to the big image you would like to replace after each thumb click, and called that one "galleryBig".

<img id="galleryBig" src="images/gallery/large/01.jpg" />
<ul id="thumbnails">
  <li><a href="images/gallery/large/01.jpg" target="_blank"><img src="images/gallery/thumb/01.jpg" /></a></li>
  <li><a href="images/gallery/large/02.jpg" target="_blank"><img src="images/gallery/thumb/02.jpg" /></a></li>
</ul>

Then all you have to add is the following JQuery code

$("li a", "#thumbnails").click(function(event) {
  event.preventDefault();
  var nameIMG = $(this).attr("href");
  $("#galleryBig").attr("src", nameIMG);
});

The reason why you would stick with adding a tags to your thumbnails and using target _blank is to let people without javascript use the gallery aswell.

If you want something a little more advanced and nicer looking (crossfade effect), then you might want to check this out: stackoverflow - basic jQuery Gallery
And then scroll down to my answer (the one with the green "tick" next to it)

Hope that helped :)

Upvotes: 1

BananaNeil
BananaNeil

Reputation: 10762

With jQuery, if you have your main image with id="main_img" you can do something like this:

$("img").click(function(){
  $("#main_img").prop("src", $(this).prop("src"));
})

This replaces the src of the main image with the src of the image clicked.

Upvotes: 1

Related Questions