https://www.corralesadvancedjoints.com/js/responsiveslides.js

1/*! ResponsiveSlides.js v1.55
2 * http://responsiveslides.com
3 * http://viljamis.com
4 *
5 * Copyright (c) 2011-2012 @viljamis
6 * Available under the MIT license
7 */
8
9/*jslint browser: true, sloppy: true, vars: true, plusplus: true, indent: 2 */
10
11(function ($, window, i) {
12  $.fn.responsiveSlides = function (options) {
13
14    // Default settings
15    var settings = $.extend({
16      "auto": false,             // Boolean: Animate automatically, true or false
17      "speed": 500,             // Integer: Speed of the transition, in milliseconds
18      "timeout": 4000,          // Integer: Time between slide transitions, in milliseconds
19      "pager": false,           // Boolean: Show pager, true or false
20      "nav": false,				// Boolean: Show navigation, true or false
21	  "controller": true,		// Boolean: Show Play/Pause, true or false
22      "random": false,          // Boolean: Randomize the order of the slides, true or false
23      "pause": true,           // Boolean: Pause on hover, true or false
24      "pauseControls": true,    // Boolean: Pause when hovering controls, true or false
25      "prevText": "<span class='nodisplay'>Previous</span>",   // String: Text for the "previous" button
26      "nextText": "<span class='nodisplay'>Next</span>",		// Boolean: Pause when hovering controls, true or false
27      "autoText": "<span class='nodisplay'>Play/Pause</span>",			// String: Text for the "play/pause" button
28      "maxwidth": "",           // Integer: Max-width of the slideshow, in pixels
29      "navContainer": "",       // Selector: Where auto generated controls should be appended to, default is after the <ul>
30	  "autoController": "",	    // Selector: Where auto generated controls should be appended to, default is after the <ul>
31      "manualControls": "",     // Selector: Declare custom pager navigation
32      "namespace": "",   // String: change the default namespace used
33      "before": $.noop,         // Function: Before callback
34      "after": $.noop           // Function: After callback
35    }, options);
36
37    return this.each(function () {
38
39      // Index for namespacing
40      i++;
41
42      var $this = $(this),
43
44        // Local variables
45        vendor,
46        selectTab,
47        startCycle,
48        restartCycle,
49        rotate,
50        $tabs,
51
52        // Helpers
53        index = 0,
54        $slide = $this.children(),
55        length = $slide.length,
56        fadeTime = parseFloat(settings.speed),
57        waitTime = parseFloat(settings.timeout),
58        maxw = parseFloat(settings.maxwidth),
59
60        // Namespacing
61        namespace = settings.namespace,
62        namespaceIdx = namespace + i,
63
64        // Classes
65        navClass = namespace + "_nav " + namespaceIdx + "_nav",
66        activeClass = namespace + "_here",
67        autoClass = namespace + "_auto " + namespaceIdx + "_auto",
68        controllClass = namespace + "_pause",
69        visibleClass = namespaceIdx + "_on",
70        slideClassPrefix = namespaceIdx + "_s",
71
72        // Pager
73        $pager = $("<ul class='" + namespace + "_tabs " + namespaceIdx + "_tabs' />"),
74
75        // Styles for visible and hidden slides
76        visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2},
77        hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1},
78
79        // Detect transition support
80        supportsTransitions = (function () {
81          var docBody = document.body || document.documentElement;
82          var styles = docBody.style;
83          var prop = "transition";
84          if (typeof styles[prop] === "string") {
85            return true;
86          }
87          // Tests for vendor specific prop
88          vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
89          prop = prop.charAt(0).toUpperCase() + prop.substr(1);
90          var i;
91          for (i = 0; i < vendor.length; i++) {
92            if (typeof styles[vendor[i] + prop] === "string") {
93              return true;
94            }
95          }
96          return false;
97        })(),
98
99        // Fading animation
100        slideTo = function (idx) {
101          settings.before(idx);
102          // If CSS3 transitions are supported
103          if (supportsTransitions) {
104            $slide
105              .removeClass(visibleClass)
106              .css(hidden)
107              .eq(idx)
108              .addClass(visibleClass)
109              .css(visible);
110            index = idx;
111            setTimeout(function () {
112              settings.after(idx);
113            }, fadeTime);
114          // If not, use jQuery fallback
115          } else {
116            $slide
117              .stop()
118              .fadeOut(fadeTime, function () {
119                $(this)
120                  .removeClass(visibleClass)
121                  .css(hidden)
122                  .css("opacity", 1);
123              })
124              .eq(idx)
125              .fadeIn(fadeTime, function () {
126                $(this)
127                  .addClass(visibleClass)
128                  .css(visible);
129                settings.after(idx);
130                index = idx;
131              });
132          }
133        };
134
135      // Random order
136      if (settings.random) {
137        $slide.sort(function () {
138          return (Math.round(Math.random()) - 0.5);

139        });
140        $this
141          .empty()
142          .append($slide);
143      }
144
145      // Add ID's to each slide
146      $slide.each(function (i) {
147        this.id = slideClassPrefix + i;
148      });
149
150      // Add max-width and classes
151      $this.addClass(namespace + " " + namespaceIdx);
152      if (options && options.maxwidth) {
153        $this.css("max-width", maxw);
154      }
155
156      // Hide all slides, then show first one
157      $slide
158        .hide()
159        .css(hidden)
160        .eq(0)
161        .addClass(visibleClass)
162        .css(visible)
163        .show();
164
165      // CSS transitions
166      if (supportsTransitions) {
167        $slide
168          .show()
169          .css({
170            // -ms prefix isn't needed as IE10 uses prefix free version
171            "-webkit-transition": "opacity " + fadeTime + "ms ease-in-out",
172            "-moz-transition": "opacity " + fadeTime + "ms ease-in-out",
173            "-o-transition": "opacity " + fadeTime + "ms ease-in-out",
174            "transition": "opacity " + fadeTime + "ms ease-in-out"
175          });
176      }
177
178      // Only run if there's more than one slide
179      if ($slide.length > 1) {
180
181        // Make sure the timeout is at least 100ms longer than the fade
182        if (waitTime < fadeTime + 100) {
183          return;
184        }
185
186        // Pager
187        if (settings.pager && !settings.manualControls) {
188          var tabMarkup = [];
189          $slide.each(function (i) {
190            var n = i + 1;
191            tabMarkup +=
192              "<li>" +
193              "<a href='javascript:void(0)' class='" + slideClassPrefix + n + "'>" + n + "</a>" +
194              "</li>";
195          });
196          $pager.append(tabMarkup);
197
198          // Inject pager
199          if (options.navContainer) {
200            $(settings.navContainer).append($pager);
201          } else {
202            $this.after($pager);
203          }
204        }
205
206        // Manual pager controls
207        if (settings.manualControls) {
208          $pager = $(settings.manualControls);
209          $pager.addClass(namespace + "_tabs " + namespaceIdx + "_tabs");
210        }
211
212        // Add pager slide class prefixes
213        if (settings.pager || settings.manualControls) {
214          $pager.find('li').each(function (i) {
215            $(this).addClass(slideClassPrefix + (i + 1));
216          });
217        }
218
219        // If we have a pager, we need to set up the selectTab function
220        if (settings.pager || settings.manualControls) {
221          $tabs = $pager.find('a');
222
223          // Select pager item
224          selectTab = function (idx) {
225            $tabs
226              .closest("li")
227              .removeClass(activeClass)
228              .eq(idx)
229              .addClass(activeClass);
230          };
231        }
232
233        // Auto cycle
234        if (settings.auto) {
235
236          startCycle = function () {
237            rotate = setInterval(function () {
238
239              // Clear the event queue
240              $slide.stop(true, true);
241
242              var idx = index + 1 < length ? index + 1 : 0;
243
244              // Remove active state and set new if pager is set
245              if (settings.pager || settings.manualControls) {
246                selectTab(idx);
247              }
248
249              slideTo(idx);
250            }, waitTime);
251          };
252
253          // Init cycle
254          startCycle();
255        }
256		
257		// Restarting cycle
258        restartCycle = function () {
259          if (settings.auto) {
260            // Stop
261            clearInterval(rotate);
262            // Restart
263            startCycle();
264          }
265        };
266
267        // Pause on hover
268        if (settings.pause) {
269          $this.hover(function () {
270            clearInterval(rotate);
271          }, function () {
272            restartCycle();
273          });
274        }
275
276        // Pager click event handler
277        if (settings.pager || settings.manualControls) {
278          $tabs.bind("click", function (e) {
279            e.preventDefault();
280
281            if (!settings.pauseControls) {
282              restartCycle();
283            }
284
285            // Get index of clicked tab
286            var idx = $tabs.index(this);
287
288            // Break if element is already active or currently animated
289            if (index === idx || $("." + visibleClass).queue('fx').length) {
290              return;
291            }
292
293            // Remove active state from old tab and set new one
294            selectTab(idx);
295
296            // Do the animation
297            slideTo(idx);
298          })
299            .eq(0)
300            .closest("li")
301            .addClass(activeClass);
302
303          // Pause when hovering pager
304          if (settings.pauseControls) {
305            $tabs.hover(function () {
306              clearInterval(rotate);
307            }, function () {
308              restartCycle();
309            });
310          }
311        }
312
313        // Navigation
314        if (settings.nav) {
315          var navMarkup =
316            "<a href='javascript:void(0)' class='" + navClass + " prev'>" + settings.prevText + "</a>" +
317            "<a href='javascript:void(0)' class='" + navClass + " next'>" + settings.nextText + "</a>";
318
319          // Inject navigation
320          if (options.navContainer) {
321            $(settings.navContainer).append(navMarkup);
322          } else {
323            $this.after(navMarkup);
324          }
325
326          var $trigger = $("." + namespaceIdx + "_nav"),
327            $prev = $trigger.filter(".prev");
328
329          // Click event handler
330          $trigger.bind("click", function (e) {
331            e.preventDefault();
332
333            var $visibleClass = $("." + visibleClass);
334
335            // Prevent clicking if currently animated
336            if ($visibleClass.queue('fx').length) {
337              return;
338            }
339
340            //  Adds active class during slide animation
341            //  $(this)
342            //    .addClass(namespace + "_active")
343            //    .delay(fadeTime)
344            //    .queue(function (next) {
345            //      $(this).removeClass(namespace + "_active");
346            //      next();
347            //  });
348
349            // Determine where to slide
350            var idx = $slide.index($visibleClass),
351              prevIdx = idx - 1,
352              nextIdx = idx + 1 < length ? index + 1 : 0;
353
354            // Go to slide
355            slideTo($(this)[0] === $prev[0] ? prevIdx : nextIdx);
356            if (settings.pager || settings.manualControls) {
357              selectTab($(this)[0] === $prev[0] ? prevIdx : nextIdx);
358            }
359
360            if (!settings.pauseControls) {
361              restartCycle();
362            }
363          });
364
365          // Pause when hovering navigation
366          if (settings.pauseControls) {
367            $trigger.hover(function () {
368              clearInterval(rotate);
369            }, function () {
370              restartCycle();
371            });
372          }
373        }
374		
375		// Play/Pause Controller
376		if (settings.controller) {
377			var autoMarkup = "<a href='javascript:void(0)' class='" + autoClass + " autoControll'>" + settings.autoText + "</a>";
378			
379			// Inject navigation
380			if (options.autoController) {
381				$(settings.autoController).append(autoMarkup);
382			} else {
383				$this.after(autoMarkup);
384			}
385			
386			var $trigger = $("." + namespaceIdx + "_auto");
387			var count = 0;
388			
389			$trigger.bind("click", function (e) {
390				e.preventDefault();
391				count++;
392				
393				var isEven = function(someNumber) {
394					return (someNumber % 2 === 0) ? true : false;
395				};
396				
397				if (isEven(count) === false) {
398					$(this).addClass(controllClass);
399					if (settings.auto || settings.pauseControls || settings.pause || settings.pager || settings.manualControls || settings.nav) {
400						clearInterval(rotate);
401						$this.mouseleave(function () {
402							clearInterval(rotate);
403						});	
404					}
405				} else if (isEven(count) === true) {
406					$(this).removeClass(controllClass);
407					if (settings.auto || settings.pauseControls || settings.pause || settings.pager || settings.manualControls || settings.nav) {
408						restartCycle();
409						$this.mouseleave(function () {
410							restartCycle();
411						});	
412					}
413				}
414			});
415			
416			/*$trigger.bind("click", function (e) {
417				e.preventDefault();
418				$(this).removeClass(controllClass);
419				restartCycle();
420			});*/
421		}
422
423      }
424
425      // Max-width fallback
426      if (typeof document.body.style.maxWidth === "undefined" && options.maxwidth) {
427        var widthSupport = function () {
428          $this.css("width", "100%");
429          if ($this.width() > maxw) {
430            $this.css("width", maxw);
431          }
432        };
433
434        // Init fallback
435        widthSupport();
436        $(window).bind("resize", function () {
437          widthSupport();
438        });
439      }
440
441    });

442
443  };
444})(jQuery, this, 0);