Tribal Knowledge Hub

Technical discoveries, solutions and musings from a long time IT professional.

Archive for December, 2012

A Simple jQuery Image Rotater

leave a comment

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’s be directly embedded in this post. You can access an example by clicking on the image or at http://www.dchung.com/test/rotate.

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[i].src);
      fig.html(images[i].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[i].src).fadeIn('slow');
          fig.html(images[i].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, radomization … and more.

Written by Dave

December 10th, 2012 at 12:17 am