Question

I have the next code with some thumbnails:

<div class="gallery-wrap">
    <div class="gallery galleryid-45" id="gallery-1">
        <dl class="gallery-item">
            <dt class="gallery-icon"> <a href="http://somedomain.com/wp-content/uploads/2011/06/ring-wedding.jpg"><img height="66" width="67" class="attachment-thumbnail" src="ring-wedding-67x66.jpg"></a> </dt>
        </dl>
        <dl class="gallery-item">
            <dt class="gallery-icon"> <a href="http://somedomain.com/wp-content/uploads/2011/06/wedding-rings.jpg"><img height="66" width="67" class="attachment-thumbnail" src="wedding-rings-67x66.jpg"></a> </dt>
        </dl>
        <dl class="gallery-item">
            <dt class="gallery-icon"> <a href="http://somedomain.com/wp-content/uploads/2011/06/wedding-ring-test-31.jpg"><img height="66" width="67" class="attachment-thumbnail" src="wedding-ring-test-31-67x66.jpg"></a> </dt>
        </dl>
        <br style="clear: both">
    </div>
</div>
<div id="imageBox">&nbsp;</div>

It’s a gallery generated by wordpress with the built in gallery function which was customized a little bit by me.

I would like whenever I click on a thumbnail, the image to change in #imageBox. I would like to test two situations,

1. when page loads and #imageBox to be empty,
2. when page loads and #imageBox to have included already the first image according the first thumbnail 🙂

I know there is a solution (Click on a thumbnail, an image in a div changes) but is not working for me and I think it is because a different HTML markup structure.

Does anyone have an idea how to start/solve this issue?

Answer 1

$(".gallery-item a").click(function (evt) {
  evt.preventDefault();
  $("#imageBox").empty().append( 
    $("<img>", {src: this.href})
  );
});

See it working: http://jsfiddle.net/kq9bp/1/