[jQuery] Re: Photo Gallery, Thumbnail navigation

[Jon Crump]

kmoll,
third slot.  It seems like this would be pretty easy, but it is
killing me trying to figure it out.  I have spent weeks on it with no

Turns out, it's not really that easy, as you've discovered; however, the 
hard work has been done for us in jCarousel.(I know there are other 
libraries that implement the same idea as well). I'm pretty new to jQuery 
too, but I was delighted to find that using the jquery extension, 
jCarousel, turned out to be very straightforward. Check it out at:

<http://sorgalla.com/jcarousel/>

Jon

On Sun, 15 Mar 2009, kmoll092 wrote:


I am building a photo gallery for a friend using JQuery.  I have div
with thumbnails below a main picture that changes based on the
thumbnail you click.  I want to be able to add a next and previous
button for the thumbnails, because there are a lot of them.  I am
relatively new to JQuery, but am learning quickly.  I am wondering
what the best solution for this is.

Currently I have the the thumbs loaded and you can click on them to
change the image, but I can't figure out how to only show the first
three thumbnails, and have a next/previous button to scroll throught
the thumbnails and then change the links when the thumbnails change.

Ideally three thumbs would show and clicking the next button would
move the second thumbnail to the first slot, the third thumbnail to
the second slot and now the fourth thumbnail would now show in the
third slot.  It seems like this would be pretty easy, but it is
killing me trying to figure it out.  I have spent weeks on it with no
solution.  this is the code I have so far

$(document).ready(function() {

        $('#thumbs a').click(function(evt) {
          evt.preventDefault();
          var imgPath = $(this).attr('href');

          var oldImage=$('#photos img');
          var newImage = $('<img src="' + imgPath + '">');
          newImage.hide();
          $('#photos').prepend(newImage);
          newImage.fadeIn(1000);
          oldImage.fadeOut(000,function(){
            $(this).remove();
                });
        }); // end click
        $('#thumbs a:first').click();
}); // end ready

then I have an empty dive for the photos and the div for the thumbs
looks like this:
<div id="thumbs">
                        <a href="images/portrait1.jpg"><img 
src="images/portrait1_th.jpg" /
</a>
           <a href="images/portrait2.jpg"><img src="images/
portrait2_th.jpg" /></a>
           <a href="images/portrait3.jpg"><img src="images/
portrait3_th.jpg" /></a>
           <a href="images/portrait4.jpg"><img src="images/
portrait4_th.jpg" /></a>
           <a href="images/portrait5.jpg"><img src="images/
portrait5_th.jpg" /></a>
       </div>

any help would be great I am going crazy with this