123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321 |
- /*! ResponsiveSlides.js v1.32
- * http://responsiveslides.com
- * http://viljamis.com
- *
- * Copyright (c) 2011-2012 @viljamis
- * Available under the MIT license
- */
- /*jslint browser: true, sloppy: true, vars: true, plusplus: true, indent: 2 */
- (function ($, window, i) {
- $.fn.responsiveSlides = function (options) {
- // Default settings
- var settings = $.extend({
- "auto": true, // Boolean: Animate automatically, true or false
- "speed": 1000, // Integer: Speed of the transition, in milliseconds
- "timeout": 4000, // Integer: Time between slide transitions, in milliseconds
- "pager": false, // Boolean: Show pager, true or false
- "nav": false, // Boolean: Show navigation, true or false
- "random": false, // Boolean: Randomize the order of the slides, true or false
- "pause": false, // Boolean: Pause on hover, true or false
- "pauseControls": false, // Boolean: Pause when hovering controls, true or false
- "prevText": "Previous", // String: Text for the "previous" button
- "nextText": "Next", // String: Text for the "next" button
- "maxwidth": "", // Integer: Max-width of the slideshow, in pixels
- "controls": "", // Selector: Where controls should be appended to, default is after the <ul>
- "namespace": "rslides", // String: change the default namespace used
- before: function () {}, // Function: Before callback
- after: function () {} // Function: After callback
- }, options);
- return this.each(function () {
- // Index for namespacing
- i++;
- var $this = $(this),
- // Local variables
- selectTab,
- startCycle,
- restartCycle,
- rotate,
- $tabs,
- // Helpers
- index = 0,
- $slide = $this.children(),
- length = $slide.size(),
- fadeTime = parseFloat(settings.speed),
- waitTime = parseFloat(settings.timeout),
- maxw = parseFloat(settings.maxwidth),
- // Namespacing
- namespace = settings.namespace,
- namespaceIdx = namespace + i,
- // Classes
- navClass = namespace + "_nav " + namespaceIdx + "_nav",
- activeClass = namespace + "_here",
- visibleClass = namespaceIdx + "_on",
- slideClassPrefix = namespaceIdx + "_s",
- // Pager
- $pager = $("<ul class='" + namespace + "_tabs " + namespaceIdx + "_tabs' />"),
- // Styles for visible and hidden slides
- visible = {"float": "left", "position": "relative"},
- hidden = {"float": "none", "position": "absolute"},
- // Fading animation
- slideTo = function (idx) {
- settings.before();
- $slide
- .stop()
- .fadeOut(fadeTime, function () {
- $(this)
- .removeClass(visibleClass)
- .css(hidden);
- })
- .eq(idx)
- .fadeIn(fadeTime, function () {
- $(this)
- .addClass(visibleClass)
- .css(visible);
- settings.after();
- index = idx;
- });
- };
- // Random order
- if (settings.random) {
- $slide.sort(function () {
- return (Math.round(Math.random()) - 0.5);
- });
- $this
- .empty()
- .append($slide);
- }
- // Add ID's to each slide
- $slide.each(function (i) {
- this.id = slideClassPrefix + i;
- });
- // Add max-width and classes
- $this.addClass(namespace + " " + namespaceIdx);
- if (options && options.maxwidth) {
- $this.css("max-width", maxw);
- }
- // Hide all slides, then show first one
- $slide
- .hide()
- .eq(0)
- .addClass(visibleClass)
- .css(visible)
- .show();
- // Only run if there's more than one slide
- if ($slide.size() > 1) {
- // Make sure the timeout is at least 100ms longer than the fade
- if (waitTime < fadeTime + 100) {
- return;
- }
- // Pager
- if (settings.pager) {
- var tabMarkup = [];
- $slide.each(function (i) {
- var n = i + 1;
- tabMarkup +=
- "<li>" +
- "<a href='#' class='" + slideClassPrefix + n + "'>" + n + "</a>" +
- "</li>";
- });
- $pager.append(tabMarkup);
- $tabs = $pager.find("a");
- // Inject pager
- if (options.controls) {
- $(settings.controls).append($pager);
- } else {
- $this.after($pager);
- }
- // Select pager item
- selectTab = function (idx) {
- $tabs
- .closest("li")
- .removeClass(activeClass)
- .eq(idx)
- .addClass(activeClass);
- };
- }
- // Auto cycle
- if (settings.auto) {
- startCycle = function () {
- rotate = setInterval(function () {
- // Clear the event queue
- $slide.stop(true, true);
- var idx = index + 1 < length ? index + 1 : 0;
- // Remove active state and set new if pager is set
- if (settings.pager) {
- selectTab(idx);
- }
- slideTo(idx);
- }, waitTime);
- };
- // Init cycle
- startCycle();
- }
- // Restarting cycle
- restartCycle = function () {
- if (settings.auto) {
- // Stop
- clearInterval(rotate);
- // Restart
- startCycle();
- }
- };
- // Pause on hover
- if (settings.pause) {
- $this.hover(function () {
- clearInterval(rotate);
- }, function () {
- restartCycle();
- });
- }
- // Pager click event handler
- if (settings.pager) {
- $tabs.bind("click", function (e) {
- e.preventDefault();
- if (!settings.pauseControls) {
- restartCycle();
- }
- // Get index of clicked tab
- var idx = $tabs.index(this);
- // Break if element is already active or currently animated
- if (index === idx || $("." + visibleClass + ":animated").length) {
- return;
- }
- // Remove active state from old tab and set new one
- selectTab(idx);
- // Do the animation
- slideTo(idx);
- })
- .eq(0)
- .closest("li")
- .addClass(activeClass);
- // Pause when hovering pager
- if (settings.pauseControls) {
- $tabs.hover(function () {
- clearInterval(rotate);
- }, function () {
- restartCycle();
- });
- }
- }
- // Navigation
- if (settings.nav) {
- var navMarkup =
- "<a href='#' class='" + navClass + " prev'>" + settings.prevText + "</a>" +
- "<a href='#' class='" + navClass + " next'>" + settings.nextText + "</a>";
- // Inject navigation
- if (options.controls) {
- $(settings.controls).append(navMarkup);
- } else {
- $this.after(navMarkup);
- }
- var $trigger = $("." + namespaceIdx + "_nav"),
- $prev = $("." + namespaceIdx + "_nav.prev");
- // Click event handler
- $trigger.bind("click", function (e) {
- e.preventDefault();
- // Prevent clicking if currently animated
- if ($("." + visibleClass + ":animated").length) {
- return;
- }
- // Adds active class during slide animation
- // $(this)
- // .addClass(namespace + "_active")
- // .delay(fadeTime)
- // .queue(function (next) {
- // $(this).removeClass(namespace + "_active");
- // next();
- // });
- // Determine where to slide
- var idx = $slide.index($("." + visibleClass)),
- prevIdx = idx - 1,
- nextIdx = idx + 1 < length ? index + 1 : 0;
- // Go to slide
- slideTo($(this)[0] === $prev[0] ? prevIdx : nextIdx);
- if (settings.pager) {
- selectTab($(this)[0] === $prev[0] ? prevIdx : nextIdx);
- }
- if (!settings.pauseControls) {
- restartCycle();
- }
- });
- // Pause when hovering navigation
- if (settings.pauseControls) {
- $trigger.hover(function () {
- clearInterval(rotate);
- }, function () {
- restartCycle();
- });
- }
- }
- }
- // Max-width fallback
- if (typeof document.body.style.maxWidth === "undefined" && options.maxwidth) {
- var widthSupport = function () {
- $this.css("width", "100%");
- if ($this.width() > maxw) {
- $this.css("width", maxw);
- }
- };
- // Init fallback
- widthSupport();
- $(window).bind("resize", function () {
- widthSupport();
- });
- }
- });
- };
- })(jQuery, this, 0);
|