I am looking at jcarousel and i am a little confused on how to integrate and can't seem to find great documentation, is there a site with example code on how to integrate it into my site. If anyone else has a suggestion on the best way to acheive my goal I would love to hear it.
My initial thought was that I could enter the thumbnails into an array, have jquery load the files with a link and when the user clicks a button, have it increment an integer which would reload the new thumbs and links which appear in a div panel above the links. If jcarousel is the only way do this, I will try to learn it, but I can't seem to find great tutorials on how to integrate it into my site. I am still learning all of this so the documentation I found seems to be directed towards people who know this stuff inside and out. Any help will be greately appreciated. Thank you, Kevin 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
