responsiveslides.js 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. /*! ResponsiveSlides.js v1.32
  2. * http://responsiveslides.com
  3. * http://viljamis.com
  4. *
  5. * Copyright (c) 2011-2012 @viljamis
  6. * Available under the MIT license
  7. */
  8. /*jslint browser: true, sloppy: true, vars: true, plusplus: true, indent: 2 */
  9. (function ($, window, i) {
  10. $.fn.responsiveSlides = function (options) {
  11. // Default settings
  12. var settings = $.extend({
  13. "auto": true, // Boolean: Animate automatically, true or false
  14. "speed": 1000, // Integer: Speed of the transition, in milliseconds
  15. "timeout": 4000, // Integer: Time between slide transitions, in milliseconds
  16. "pager": false, // Boolean: Show pager, true or false
  17. "nav": false, // Boolean: Show navigation, true or false
  18. "random": false, // Boolean: Randomize the order of the slides, true or false
  19. "pause": false, // Boolean: Pause on hover, true or false
  20. "pauseControls": false, // Boolean: Pause when hovering controls, true or false
  21. "prevText": "Previous", // String: Text for the "previous" button
  22. "nextText": "Next", // String: Text for the "next" button
  23. "maxwidth": "", // Integer: Max-width of the slideshow, in pixels
  24. "controls": "", // Selector: Where controls should be appended to, default is after the <ul>
  25. "namespace": "rslides", // String: change the default namespace used
  26. before: function () {}, // Function: Before callback
  27. after: function () {} // Function: After callback
  28. }, options);
  29. return this.each(function () {
  30. // Index for namespacing
  31. i++;
  32. var $this = $(this),
  33. // Local variables
  34. selectTab,
  35. startCycle,
  36. restartCycle,
  37. rotate,
  38. $tabs,
  39. // Helpers
  40. index = 0,
  41. $slide = $this.children(),
  42. length = $slide.size(),
  43. fadeTime = parseFloat(settings.speed),
  44. waitTime = parseFloat(settings.timeout),
  45. maxw = parseFloat(settings.maxwidth),
  46. // Namespacing
  47. namespace = settings.namespace,
  48. namespaceIdx = namespace + i,
  49. // Classes
  50. navClass = namespace + "_nav " + namespaceIdx + "_nav",
  51. activeClass = namespace + "_here",
  52. visibleClass = namespaceIdx + "_on",
  53. slideClassPrefix = namespaceIdx + "_s",
  54. // Pager
  55. $pager = $("<ul class='" + namespace + "_tabs " + namespaceIdx + "_tabs' />"),
  56. // Styles for visible and hidden slides
  57. visible = {"float": "left", "position": "relative"},
  58. hidden = {"float": "none", "position": "absolute"},
  59. // Fading animation
  60. slideTo = function (idx) {
  61. settings.before();
  62. $slide
  63. .stop()
  64. .fadeOut(fadeTime, function () {
  65. $(this)
  66. .removeClass(visibleClass)
  67. .css(hidden);
  68. })
  69. .eq(idx)
  70. .fadeIn(fadeTime, function () {
  71. $(this)
  72. .addClass(visibleClass)
  73. .css(visible);
  74. settings.after();
  75. index = idx;
  76. });
  77. };
  78. // Random order
  79. if (settings.random) {
  80. $slide.sort(function () {
  81. return (Math.round(Math.random()) - 0.5);
  82. });
  83. $this
  84. .empty()
  85. .append($slide);
  86. }
  87. // Add ID's to each slide
  88. $slide.each(function (i) {
  89. this.id = slideClassPrefix + i;
  90. });
  91. // Add max-width and classes
  92. $this.addClass(namespace + " " + namespaceIdx);
  93. if (options && options.maxwidth) {
  94. $this.css("max-width", maxw);
  95. }
  96. // Hide all slides, then show first one
  97. $slide
  98. .hide()
  99. .eq(0)
  100. .addClass(visibleClass)
  101. .css(visible)
  102. .show();
  103. // Only run if there's more than one slide
  104. if ($slide.size() > 1) {
  105. // Make sure the timeout is at least 100ms longer than the fade
  106. if (waitTime < fadeTime + 100) {
  107. return;
  108. }
  109. // Pager
  110. if (settings.pager) {
  111. var tabMarkup = [];
  112. $slide.each(function (i) {
  113. var n = i + 1;
  114. tabMarkup +=
  115. "<li>" +
  116. "<a href='#' class='" + slideClassPrefix + n + "'>" + n + "</a>" +
  117. "</li>";
  118. });
  119. $pager.append(tabMarkup);
  120. $tabs = $pager.find("a");
  121. // Inject pager
  122. if (options.controls) {
  123. $(settings.controls).append($pager);
  124. } else {
  125. $this.after($pager);
  126. }
  127. // Select pager item
  128. selectTab = function (idx) {
  129. $tabs
  130. .closest("li")
  131. .removeClass(activeClass)
  132. .eq(idx)
  133. .addClass(activeClass);
  134. };
  135. }
  136. // Auto cycle
  137. if (settings.auto) {
  138. startCycle = function () {
  139. rotate = setInterval(function () {
  140. // Clear the event queue
  141. $slide.stop(true, true);
  142. var idx = index + 1 < length ? index + 1 : 0;
  143. // Remove active state and set new if pager is set
  144. if (settings.pager) {
  145. selectTab(idx);
  146. }
  147. slideTo(idx);
  148. }, waitTime);
  149. };
  150. // Init cycle
  151. startCycle();
  152. }
  153. // Restarting cycle
  154. restartCycle = function () {
  155. if (settings.auto) {
  156. // Stop
  157. clearInterval(rotate);
  158. // Restart
  159. startCycle();
  160. }
  161. };
  162. // Pause on hover
  163. if (settings.pause) {
  164. $this.hover(function () {
  165. clearInterval(rotate);
  166. }, function () {
  167. restartCycle();
  168. });
  169. }
  170. // Pager click event handler
  171. if (settings.pager) {
  172. $tabs.bind("click", function (e) {
  173. e.preventDefault();
  174. if (!settings.pauseControls) {
  175. restartCycle();
  176. }
  177. // Get index of clicked tab
  178. var idx = $tabs.index(this);
  179. // Break if element is already active or currently animated
  180. if (index === idx || $("." + visibleClass + ":animated").length) {
  181. return;
  182. }
  183. // Remove active state from old tab and set new one
  184. selectTab(idx);
  185. // Do the animation
  186. slideTo(idx);
  187. })
  188. .eq(0)
  189. .closest("li")
  190. .addClass(activeClass);
  191. // Pause when hovering pager
  192. if (settings.pauseControls) {
  193. $tabs.hover(function () {
  194. clearInterval(rotate);
  195. }, function () {
  196. restartCycle();
  197. });
  198. }
  199. }
  200. // Navigation
  201. if (settings.nav) {
  202. var navMarkup =
  203. "<a href='#' class='" + navClass + " prev'>" + settings.prevText + "</a>" +
  204. "<a href='#' class='" + navClass + " next'>" + settings.nextText + "</a>";
  205. // Inject navigation
  206. if (options.controls) {
  207. $(settings.controls).append(navMarkup);
  208. } else {
  209. $this.after(navMarkup);
  210. }
  211. var $trigger = $("." + namespaceIdx + "_nav"),
  212. $prev = $("." + namespaceIdx + "_nav.prev");
  213. // Click event handler
  214. $trigger.bind("click", function (e) {
  215. e.preventDefault();
  216. // Prevent clicking if currently animated
  217. if ($("." + visibleClass + ":animated").length) {
  218. return;
  219. }
  220. // Adds active class during slide animation
  221. // $(this)
  222. // .addClass(namespace + "_active")
  223. // .delay(fadeTime)
  224. // .queue(function (next) {
  225. // $(this).removeClass(namespace + "_active");
  226. // next();
  227. // });
  228. // Determine where to slide
  229. var idx = $slide.index($("." + visibleClass)),
  230. prevIdx = idx - 1,
  231. nextIdx = idx + 1 < length ? index + 1 : 0;
  232. // Go to slide
  233. slideTo($(this)[0] === $prev[0] ? prevIdx : nextIdx);
  234. if (settings.pager) {
  235. selectTab($(this)[0] === $prev[0] ? prevIdx : nextIdx);
  236. }
  237. if (!settings.pauseControls) {
  238. restartCycle();
  239. }
  240. });
  241. // Pause when hovering navigation
  242. if (settings.pauseControls) {
  243. $trigger.hover(function () {
  244. clearInterval(rotate);
  245. }, function () {
  246. restartCycle();
  247. });
  248. }
  249. }
  250. }
  251. // Max-width fallback
  252. if (typeof document.body.style.maxWidth === "undefined" && options.maxwidth) {
  253. var widthSupport = function () {
  254. $this.css("width", "100%");
  255. if ($this.width() > maxw) {
  256. $this.css("width", maxw);
  257. }
  258. };
  259. // Init fallback
  260. widthSupport();
  261. $(window).bind("resize", function () {
  262. widthSupport();
  263. });
  264. }
  265. });
  266. };
  267. })(jQuery, this, 0);