that looks exactly like what I am looking for, i am going to read up on it and see what I can do. Do you find it difficult to integrate into sites, or did you have any trouble styling the navigation to fit the site? Thanks for the info, it will be a big help
On Mar 15, 3:21 pm, Jon Crump <jjcr...@myuw.net> wrote: > 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
