Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
I'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 https://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:
https://gist.github.com/2901473
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: