Making a JQuery Slideshow
09 Jun 2012I've been trying to learn more about jQuery recently, and had an opportunity to try to figure out how to make a slideshow on my friend Josie's web site.
Josie has been trying to show how she paints her fantastic pictures by taking a photo every hour during the creation process. We've been thinking for a while on how best to show this on the website, and decided on making a slideshow to animate the images as there are over 60 in the set!
Searching on the web, there are a lot of JQuery slideshows out there of differing quality, so I was very happy when I found a fantastic article by Jonathan Snook, that not only documented a simple but effective slideshow, but also explained how it worked.
You can see the complete code in the slideshow at http://www.josiemccoy.co.uk/gallery/hourlypictures.aspx, but basically it can all be done in a couple of lines of code which reorders the stack of images (which have been all placed on top of each other) dynamically.
I amended the code slightly by adding in a "pause" and "play" button via a simple boolean variable, and am pretty happy with the results.
I added the code to Gist if you want to use, improve, extend - and it turns out Posterous will automatically embed inline if I just include the Gist URL:
Jonathan's code is very elegant, so as well as coming up with a pretty simple solution I also learnt a lot about image handling and transitions in JQuery.
Just for fun, here's the completed picture of LeeLoo - Milla Jovovich from The Fifth Element:
