https://www.mmf.mb.ca/banner_includes/bannerRotator.js?v=4.6.0.19

1/* THIS FILE IS UPDATED BY A REMOTE SCRIPT. */
2/* ANY CHANGES MADE TO THIS FILE WILL BE LOST IN A FUTURE UPDATE. */
3
4function bannerRotator(selector, scrollTime, pauseTime, nav){
5
6  $(selector+" li:first").css("display", "block"); // show the first list item
7  var count = $(selector+" > ul > li").length; // get total number of list items
8  if(count > 1){ // dont do anything if there is only one list item.  
9  
10    if(scrollTime == null) { var scrollTime=500; } // default scroll time (length of transition)
11    if(pauseTime== null) { var pauseTime=5000; } // default pause time (how long to hold the image between transitions)
12
13    $(selector+" > ul > li").each(function( intIndex ){ $(this).attr('rel', (intIndex+1)); }); // add the list position to the each of the items
14
15    pauseTimeout=pauseTime;
16    if(nav != null){
17      var i = 1;
18      $(selector).append("<div class='bannerNav_container'><div id='bannerNav'></div></div>"); // create navigation buttons
19      while(i <= count){
20        if(i == $(selector+" > ul > li:visible").attr('rel')){  // if its the nav item that belongs to the visible image, mark it as the active nav item
21          $('#bannerNav').append("<a class='active' id='bannerNav_"+i+"' rel='"+i+"' href='#'>"+i+"</a> ");
22          if (($(selector+" > ul > li[rel="+i+"]").attr('data-video') !== undefined) && ($(selector+" > ul > li[rel="+i+"]").attr('data-video') == "Y")) {  // check if video attribute is present
23            pauseTimeout=(pauseTime*2);
24          }
25        } else {
26          $('#bannerNav').append("<a id='bannerNav_"+i+"' rel='"+i+"'href='#'>"+i+"</a> ");
27        }
28        i++;
29      }
30      //$('#bannerNav').append("<span class='pause'></span> "); // pause button
31      //$('#bannerNav').append("<span href='#' class='play' style='display:none;'></span> "); // play button
32      $("#bannerNav a").click(function () { // handle navigation by clicking nav items
33        $("#bannerNav a.active").removeClass('active');
34        $(this).addClass('active'); // move the active nav item to this item
35        var currentClassName = $(selector+" > ul > li:visible").attr('rel');
36        var nextClassName = $(this).attr('rel');
37        var storedTimeoutID = $("#bannerNav").attr('timeoutID');
38
39        clearTimeout(storedTimeoutID); // stop the images from looping when a nav button is pressed
40        //$("span.pause").hide();
41        //$("span.play").show();
42        if( nextClassName != currentClassName ){ // only change images if they clicked on a new item (not the one they are viewing)
43          $(selector+" > ul > li:visible").fadeOut(scrollTime);
44          $(selector+" > ul > li[rel="+nextClassName+"]").fadeIn(scrollTime);
45        }
46        return false;
47      });
48
49      $("span.pause").click(function () { // stop the images looping on pause click
50        var storedTimeoutID = $("#bannerNav").attr('timeoutID');
51        clearTimeout(storedTimeoutID);
52        //$("span.pause").hide();
53        //$("span.play").show();
54      });
55
56      $("span.play").click(function () { // start the images looping on play click
57        scrollImages(count, selector, scrollTime, pauseTime);
58        //$("span.play").hide();
59        //$("span.pause").show();
60      });
61    }
62
63    window.addEventListener('load', function(event) {
64      var timeout = setTimeout(function(){ 
65        scrollImages(count, selector, scrollTime, pauseTime);
66      }, pauseTimeout);    
67      $("#bannerNav").attr('timeoutID', timeout); // save the timeout id so we can cancel the loop later if a nav button is pressed
68    });
69    document.getElementById('bannerRotator').addEventListener('touchstart', handleTouchStart, false);        
70    document.getElementById('bannerRotator').addEventListener('touchend', handleTouchEnd, false);
71  }
72}
73
74function scrollImages(count, selector, scrollTime, pauseTime){
75
76  currentClass = $(selector+" > ul > li:visible").attr('rel'); // get the list position of the current image
77  nextClass = $(selector+" > ul > li:visible").attr('rel'); // open a new variable for the next class
78  if (currentClass == count ){ nextClass=1; } // if you've reached the end of the images... start from number 1 again
79  else{ nextClass++; } // if not just add one to the last number
80
81  pauseTimeout=pauseTime;
82  var i = 1;
83  while(i <= count){
84    if (($(selector+" > ul > li[rel="+nextClass+"]").attr('data-video') !== undefined) && ($(selector+" > ul > li[rel="+nextClass+"]").attr('data-video') == "Y")) {  // check if video attribute is present
85      pauseTimeout=(pauseTime*2);
86    }
87    i++;
88  }
89
90  $(selector+" > ul > li[rel="+currentClass+"]").fadeOut(scrollTime); //fade out old image
91  $("#bannerNav a.active").removeClass('active'); // remove active class from our nav
92
93  $(selector+" > ul > li[rel="+nextClass+"]").fadeIn(scrollTime); //fade in new image
94  $("#bannerNav a[rel="+nextClass+"]").addClass('active'); // add new active class to the next nav item
95
96  var timeout = setTimeout(function(){ scrollImages(count, selector, scrollTime, pauseTime); }, pauseTimeout); // scroll the banners again after waiting for pauseTime  
97  $("#bannerNav").attr('timeoutID', timeout); // save the timeout id so we can cancel the loop later if a nav button is pressed
98
99}
100
101var xDown = null;
102var yDown = null;
103
104function getTouches(evt) {
105  return evt.touches ||             // browser API
106         evt.originalEvent.touches; // jQuery
107}
108
109function handleTouchStart(evt) {
110  const firstTouch = getTouches(evt)[0];
111  xDown = firstTouch.clientX;
112  yDown = firstTouch.clientY;
113};
114
115function handleTouchEnd(evt) {
116
117  if ( ! xDown || ! yDown ) {
118    return;
119  }
120
121  var navLinks = document.getElementById('bannerNav').getElementsByTagName("a");
122  var rel = 0;
123  var rel_prev = 0;
124  var rel_next = 0;
125  if (navLinks.length != 0) {
126    for (var n=0; n<navLinks.length; n++) {
127      if(navLinks[n].hasAttribute('class')) {
128        if(navLinks[n].getAttribute('class') == "active") {
129          if(navLinks[n].hasAttribute('rel')) {
130            rel = parseInt(navLinks[n].getAttribute('rel'));
131          }
132        }
133      }
134    }
135    if (rel != 0) {
136      rel_prev = (rel - 1);
137      if (rel_prev == 0) {
138        rel_prev = navLinks.length;
139      }

140      rel_next = (rel + 1);
141      if (rel_next > navLinks.length) {
142        rel_next = 1;
143      }
144    }
145  }
146
147  var xUp = evt.changedTouches[0].clientX;
148  var yUp = evt.changedTouches[0].clientY;
149  var xDiff = xDown - xUp;
150  var yDiff = yDown - yUp;
151
152  if (Math.abs(xDiff) > Math.abs(yDiff)) { /*most significant*/
153    if (xDiff > 0) {
154      /* left swipe */
155      if (rel_next != 0) {
156        document.getElementById('bannerNav_' + rel_next).click();
157      }
158    } else {
159      /* right swipe */
160      if (rel_prev != 0) {
161        document.getElementById('bannerNav_' + rel_prev).click();
162      }
163    }
164  } else {
165    if (yDiff > 0) {
166      /* up swipe */
167      //alert("up swipe");
168    } else {
169      /* down swipe */
170      //alert("down swipe");
171    }
172  }
173
174  /* reset values */
175  xDown = null;
176  yDown = null;
177
178};