Question

I have the following gallery set up in jQuery: –

<script type="text/javascript">
  $(function () {
      $(".image").click(function () {
          var image = $(this).attr("rel");
          $('#galleryImage').hide();
          $('#galleryImage').fadeIn('slow');
          $('#galleryImage').html('<img src="' + image + '"/>');
          return false;
      });
      $("#galleryImage").click(function () {
          var imageLarge = $(this).attr("rel");
          $('#galleryImage').html('<a href="' + imageLarge + '"/>');
          $('#galleryImage a').lightBox();
      });
  });

<div id="galleryImage">

        <a href=""><img src="../../Images/Design/Gallery/HavellHouse/havellhouse-small1.jpg" width="337" height="223" alt="forbury court" /></a>
</div>

    <a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small1.jpg" class="image">
        <img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb1.jpg" class="thumb" border="0" /></a>

    <a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small2.jpg" class="image">
        <img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb2.jpg" class="thumb" border="0" /></a>

    <a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small3.jpg" class="image">
        <img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb3.jpg" class="thumb" border="0" /></a>

That takes the rel attribute value when a thumbnail is clicked and inserts it into the galleryImage div allowing the user to select different images via the thumbnails that all display in one place.

Now, what I want to do is apply lightbox to the current image in the #galleryImage div, so that if a user clicks it, an even larger version comes up via the lightbox plugin, but I can’t quite get my head around how to do it, this is what I have so far, am I heading in the right direction?

Answer 1

Fixed it, used:

$(".image").click(function() {
    var image = $(this).attr("rel");
    var imageLarge = $(this).attr("title");
    $("#galleryImage img").attr("src",image);
    $("#galleryImage a").attr("href", imageLarge);
    return false;
}

Using the title value which stores a url to the large image, taken from the currently selected thumbnail and just setting the attribute value in jQuery rather than inserting a bunch of HTML right into the div