Recently I was looking to add a collection of rotating images to my website, so I searched for an image rotater using jQuery. I found a number of very sophisticated libraries designed to rotate images, create slideshows and display fancy transitions. Any one of these would have met my needs. What I did not find was a simple bare-bonesjQuery example that I could use on my web site and enhance as I saw fit. So, I decided to build one form scratch. This example is simple enough that anyone with any jQuery experience at all can understand it. Hopefully, the explanation is clear enough that anyone can incorporate it into their own web site or use it as a starting point to learn jQuery.
Because this this blog is built on a framework that already uses jQuery, the image rotater can’t be directly embedded in this post.
Let’s look at the source code. The Javascript first then the HTML5:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<script src="scripts/jquery/1.8.3/jquery.min.js"></script> <script> // define array of image paths (src) and captions (figcaption) var images = [ {src:"lighthouse.jpg", figcaption:"Peggy's Cove, Nova Scotia"}, {src:"newyork.jpg", figcaption:"New York before 9/11"}, {src:"tetons.jpg", figcaption:"Mormon Row, the Tetons"}, {src:"tuileries.jpg", figcaption:"Tuileries Garden, Paris"} ]; // execute this anonymous function when the DOM has been loaded in memory $(document).ready( function() { // index to select item in array var i=0; // use the jQuery function ($) to select the <img> and <figcaption> by id var img = $('#rotate-img'); var fig = $('#rotate-caption') // set the initial src and figcaption values img.attr("src", images.src); fig.html(images.figcaption); // advance to next image i++; // setInterval takes to parameters, a callback and an interval window.setInterval(function() { // reset the index to 0 if past the end if( i >= images.length ) { i = 0; } // hide the current image then fade the new image in and set // the new caption img.hide(); img.attr("src", images.src).fadeIn('slow'); fig.html(images.figcaption); // advance to next image ++i; }, // set the image time to 5000ms 5000 ) } ); </script> |
Notice that this example uses the ever-present closure. Notice that the values: i, img and fig are defined in the ready() function. The values are used in the anonymous function called by the setInterval() function. The setInterval() function is called by the ready() function. By the time the anonymous function is called, both ready() and setInterval() have completed. The fact that the anonymous function can still access i, img and fig is a result of the closure.
60 61 62 63 |
<figure> <img id="rotate-img" width="250px" alt=""/> <figcaption id="rotate-caption"></figcaption> </figure> |
The associated HTML5 is shown above. Notice that the src attribute and the <figcaption> values are specified in the jQuery not the HTML5.
Feel free to use this code on your own site or use it as a starting point. There are several other features that could be added like different transitions, randomization … and more.
To learn more about jQuery, sign up for our course WA1935 Mastering jQuery.
