https://www.hcfalcons.org/javascripts/jquery/plugins/jquery.imageRotator.js

1(function($){
2  var settings;
3  var hasLinks = false, hasMask = false;
4  var currIndex = 0, nextIndex = 1, numImages = 0;
5  var $currImage = null, $nextImage = null, $mask = null;
6
7  function shuffle(arr) {
8    for (
9      var j, x, i = arr.length; i;
10      j = parseInt(Math.random() * i),
11      x = arr[--i], arr[i] = arr[j], arr[j] = x
12    );
13    return arr;
14  }
15
16  function displayNextImage() {
17    if (currIndex == numImages) currIndex = 0;
18    if (nextIndex == numImages) nextIndex = 0;
19
20    // IE6-7 needed the "contains" selector ([src*=) instead of what was originally coded ([src=)
21    $currImage = $('#' + settings.containerID + ' img[src*="' + settings.images[currIndex] + '"]').css('z-index', 2);
22    $nextImage = $('#' + settings.containerID + ' img[src*="' + settings.images[nextIndex] + '"]').css('z-index', 1);
23
24    $currImage.fadeOut(settings.animSpeed, function() {
25      $(this).css('z-index', 0).show();
26
27      // If there are links for the images and a mask...
28      if (hasLinks && hasMask) {
29        // ...get rid of any existing link for the mask.
30        if ($mask.parent().get(0).tagName.toLowerCase() === 'a') $mask.unwrap();
31
32        // If the upcoming image has a link, wrap the mask with the link.
33        if (settings.links[nextIndex]) $mask.wrap('<a href="' + unescape(settings.links[nextIndex]) + '" target="' + settings.linkTarget + '" \/>');
34      }
35      currIndex++;
36      nextIndex++;
37    });
38
39    setTimeout(displayNextImage, settings.pauseTime);
40  }
41  
42  $.fn.imageRotator = function(options) {
43  
44    var defaults = {
45          images: [],
46          links: [],
47          containerID: 'imgRotator',
48          maskID: '',
49          pauseTime: 5000,
50          animSpeed: 1000,
51          sortImages: 1,
52          linkTarget: '_blank'
53        };
54        
55    settings = $.extend({}, defaults, options);
56
57    // Don't shuffle the images array if the links array has content - because the indexes into each array are synced.
58    // Shuffling the images will result in the links no longer being tied to the correct images.
59    if ( ! settings.sortImages && settings.links.length === 0) settings.images = shuffle(settings.images);
60
61    numImages = settings.images.length;
62    hasLinks = (settings.links.length > 0);
63    if (settings.maskID !== '' && $('#' + settings.maskID).length) {
64      hasMask = true;
65      $mask = $('#' + settings.maskID);
66    }
67
68    this.each(function() {
69      // $this is the element passed in to this plugin
70      // e.g. $('#imgRotator').imageRotator(); - $this = element IDed with 'imgRotator'
71      var $this = $(this);
72      
73      // Cache the first <img> tag (spacer.gif)
74      var firstImg = $this.find('img:first');
75      
76      if (numImages) {
77        if (numImages > 1) {
78          // Create the HTML for the remaining images and insert them before the first
79          for (var i=0; i<numImages; i++) {
80            firstImg.clone().attr('src', settings.images[i]).insertBefore(firstImg);
81          }
82          // Put the first image on top
83          $this.find('img:first').css('z-index', 1);
84
85          // Get rid of the spacer.gif
86          $this.find('img:last').remove();
87        } else {
88          // Assign an image to the 1st <img>
89          firstImg.attr('src', settings.images[0]);
90        }
91
92        // If there are links for the images...
93        if (hasLinks) {
94          // ...and NO mask, we can wrap all of the images with links before we even start the animation.
95          if (! hasMask) {
96            var $img;
97            for (var i=0; i<numImages; i++) {
98              if (settings.links[i]) {
99                $img = $('#' + settings.containerID + ' img[src="' + settings.images[i] + '"]');
100
101                // Accessibility requires an alt tag now that we're wrapping the 'img' tag with an 'a' tag
102                $img.attr('alt', 'image rotator link - ' + i);
103
104                $img.wrap('<a href="' + unescape(settings.links[i]) + '" target="' + settings.linkTarget + '" \/>');
105              }
106            }
107          } else {
108            // ...and a mask. If the first image has a link...
109            if (settings.links[0]) {
110              // ...wrap the mask with the link
111              $mask.wrap('<a href="' + unescape(settings.links[0]) + '" target="' + settings.linkTarget + '" \/>');
112            }
113          }
114        }
115
116        if (numImages > 1) setTimeout(displayNextImage, settings.pauseTime);
117
118      } else {
119        // If no images, hide the 1st <img>
120        firstImg.hide();
121      }
122    });
123
124    // returns the jQuery object to allow for chainability.
125    return this;
126  }
127})(jQuery);