jQuery picture load

Question

Hi everyone,

I need some help in jQuery. What I want to do is to create some kind of a small, very, very easy picture gallery.

I want to have a couple of small pictures on the left-hand-side of my page. By clicking one of these small pictures I'd like to load this picture into another div where it is shown in full size.

<a href="image1_big.jpg" class="smallpics" /><img src="image1_small" /></a>
<a href="image2_big.jpg" class="smallpics" /><img src="image2_small" /></a>
<a href="image3_big.jpg" class="smallpics" /><img src="image3_small" /></a>
<div id="bigpic" /><img src="image1_big" /></div>

All my jQuery attemts failed as I could not change the source of the image within this bigpic div.

Answer 1

This should do it for you:

$(function(){
   $("a.smallpics").click(function(e){
      $("#bigpic").html('<img src="' + this.href + '" />');
      e.preventDefault();
   });
});

I could have also used this (instead of the similar line in the previous example):

$("#bigpic").empty().append($("<img />").attr('src', this.href));

But the first option will actually execute it tiny bit faster. With only one call you won't be able to tell the difference, so if option two is easier to read or write, you can use that.