jquery.anythingslider.js 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795
  1. /*
  2. AnythingSlider v1.7.16
  3. Original by Chris Coyier: http://css-tricks.com
  4. Get the latest version: https://github.com/ProLoser/AnythingSlider
  5. To use the navigationFormatter function, you must have a function that
  6. accepts two paramaters, and returns a string of HTML text.
  7. index = integer index (1 based);
  8. panel = jQuery wrapped LI item this tab references
  9. @return = Must return a string of HTML/Text
  10. navigationFormatter: function(index, panel){
  11. return "Panel #" + index; // This would have each tab with the text 'Panel #X' where X = index
  12. }
  13. */
  14. (function($) {
  15. $.anythingSlider = function(el, options) {
  16. var base = this, o;
  17. // Wraps the ul in the necessary divs and then gives Access to jQuery element
  18. base.el = el;
  19. base.$el = $(el).addClass('anythingBase').wrap('<div class="anythingSlider"><div class="anythingWindow" /></div>');
  20. // Add a reverse reference to the DOM object
  21. base.$el.data("AnythingSlider", base);
  22. base.init = function(){
  23. // Added "o" to be used in the code instead of "base.options" which doesn't get modifed by the compiler - reduces size by ~1k
  24. base.options = o = $.extend({}, $.anythingSlider.defaults, options);
  25. base.initialized = false;
  26. if ($.isFunction(o.onBeforeInitialize)) { base.$el.bind('before_initialize', o.onBeforeInitialize); }
  27. base.$el.trigger('before_initialize', base);
  28. // Cache existing DOM elements for later
  29. // base.$el = original ul
  30. // for wrap - get parent() then closest in case the ul has "anythingSlider" class
  31. base.$wrapper = base.$el.parent().closest('div.anythingSlider').addClass('anythingSlider-' + o.theme);
  32. base.$window = base.$el.closest('div.anythingWindow');
  33. base.win = window;
  34. base.$win = $(base.win);
  35. base.$controls = $('<div class="anythingControls"></div>').appendTo( (o.appendControlsTo !== null && $(o.appendControlsTo).length) ? $(o.appendControlsTo) : base.$wrapper);
  36. base.$startStop = $('<a href="#" class="start-stop"></a>');
  37. if (o.buildStartStop) {
  38. base.$startStop.appendTo( (o.appendStartStopTo !== null && $(o.appendStartStopTo).length) ? $(o.appendStartStopTo) : base.$controls );
  39. }
  40. base.$nav = $('<ul class="thumbNav" />').appendTo( (o.appendNavigationTo !== null && $(o.appendNavigationTo).length) ? $(o.appendNavigationTo) : base.$controls );
  41. // Set up a few defaults & get details
  42. base.flag = false; // event flag to prevent multiple calls (used in control click/focusin)
  43. base.playing = o.autoPlay; // slideshow state; removed "startStopped" option
  44. base.slideshow = false; // slideshow flag needed to correctly trigger slideshow events
  45. base.hovered = false; // actively hovering over the slider
  46. base.panelSize = []; // will contain dimensions and left position of each panel
  47. base.currentPage = o.startPanel = parseInt(o.startPanel,10) || 1; // make sure this isn't a string
  48. o.changeBy = parseInt(o.changeBy,10) || 1;
  49. base.adj = (o.infiniteSlides) ? 0 : 1; // adjust page limits for infinite or limited modes
  50. base.width = base.$el.width();
  51. base.height = base.$el.height();
  52. base.outerPad = [ base.$wrapper.innerWidth() - base.$wrapper.width(), base.$wrapper.innerHeight() - base.$wrapper.height() ];
  53. if (o.playRtl) { base.$wrapper.addClass('rtl'); }
  54. // Expand slider to fit parent
  55. if (o.expand) {
  56. base.$outer = base.$wrapper.parent();
  57. base.$window.css({ width: '100%', height: '100%' }); // needed for Opera
  58. base.checkResize();
  59. }
  60. // Build start/stop button
  61. if (o.buildStartStop) { base.buildAutoPlay(); }
  62. // Build forwards/backwards buttons
  63. if (o.buildArrows) { base.buildNextBackButtons(); }
  64. // can't lock autoplay it if it's not enabled
  65. if (!o.autoPlay) { o.autoPlayLocked = false; }
  66. base.updateSlider();
  67. base.$lastPage = base.$currentPage;
  68. // Get index (run time) of this slider on the page
  69. base.runTimes = $('div.anythingSlider').index(base.$wrapper) + 1;
  70. base.regex = new RegExp('panel' + base.runTimes + '-(\\d+)', 'i'); // hash tag regex
  71. if (base.runTimes === 1) { base.makeActive(); } // make the first slider on the page active
  72. // Make sure easing function exists.
  73. if (!$.isFunction($.easing[o.easing])) { o.easing = "swing"; }
  74. // If pauseOnHover then add hover effects
  75. if (o.pauseOnHover) {
  76. base.$wrapper.hover(function() {
  77. if (base.playing) {
  78. base.$el.trigger('slideshow_paused', base);
  79. base.clearTimer(true);
  80. }
  81. }, function() {
  82. if (base.playing) {
  83. base.$el.trigger('slideshow_unpaused', base);
  84. base.startStop(base.playing, true);
  85. }
  86. });
  87. }
  88. // If a hash can not be used to trigger the plugin, then go to start panel
  89. base.setCurrentPage(base.gotoHash() || o.startPage, false);
  90. // Hide/Show navigation & play/stop controls
  91. base.slideControls(false);
  92. base.$wrapper.bind('mouseenter mouseleave', function(e){
  93. base.hovered = (e.type === "mouseenter") ? true : false;
  94. base.slideControls( base.hovered, false );
  95. });
  96. // Add keyboard navigation
  97. $(document).keyup(function(e){
  98. // Stop arrow keys from working when focused on form items
  99. if (o.enableKeyboard && base.$wrapper.is('.activeSlider') && !e.target.tagName.match('TEXTAREA|INPUT|SELECT')) {
  100. if (!o.vertical && (e.which === 38 || e.which === 40)) { return; }
  101. switch (e.which) {
  102. case 39: case 40: // right & down arrow
  103. base.goForward();
  104. break;
  105. case 37: case 38: // left & up arrow
  106. base.goBack();
  107. break;
  108. }
  109. }
  110. });
  111. // Fix tabbing through the page, but don't change the view if the link is in view (showMultiple = true)
  112. base.$items.delegate('a', 'focus.AnythingSlider', function(e){
  113. var panel = $(this).closest('.panel'),
  114. indx = base.$items.index(panel) + base.adj; // index can be -1 in nested sliders - issue #208
  115. base.$items.find('.focusedLink').removeClass('focusedLink');
  116. $(this).addClass('focusedLink');
  117. base.$window.scrollLeft(0);
  118. if ( ( indx !== -1 && (indx >= base.currentPage + o.showMultiple || indx < base.currentPage) ) ) {
  119. base.gotoPage(indx);
  120. e.preventDefault();
  121. }
  122. });
  123. // Binds events
  124. var triggers = "slideshow_paused slideshow_unpaused slide_init slide_begin slideshow_stop slideshow_start initialized swf_completed".split(" ");
  125. $.each("onShowPause onShowUnpause onSlideInit onSlideBegin onShowStop onShowStart onInitialized onSWFComplete".split(" "), function(i,f){
  126. if ($.isFunction(o[f])){
  127. base.$el.bind(triggers[i], o[f]);
  128. }
  129. });
  130. if ($.isFunction(o.onSlideComplete)){
  131. // Added setTimeout (zero time) to ensure animation is complete... see this bug report: http://bugs.jquery.com/ticket/7157
  132. base.$el.bind('slide_complete', function(){
  133. setTimeout(function(){ o.onSlideComplete(base); }, 0);
  134. });
  135. }
  136. base.initialized = true;
  137. base.$el.trigger('initialized', base);
  138. // trigger the slideshow
  139. base.startStop(base.playing);
  140. };
  141. // called during initialization & to update the slider if a panel is added or deleted
  142. base.updateSlider = function(){
  143. // needed for updating the slider
  144. base.$el.children('.cloned').remove();
  145. base.$nav.empty();
  146. // set currentPage to 1 in case it was zero - occurs when adding slides after removing them all
  147. base.currentPage = base.currentPage || 1;
  148. base.$items = base.$el.children();
  149. base.pages = base.$items.length;
  150. base.dir = (o.vertical) ? 'top' : 'left';
  151. o.showMultiple = (o.vertical) ? 1 : parseInt(o.showMultiple,10) || 1; // only integers allowed
  152. o.navigationSize = (o.navigationSize === false) ? 0 : parseInt(o.navigationSize,10) || 0;
  153. if (o.showMultiple > 1) {
  154. if (o.showMultiple > base.pages) { o.showMultiple = base.pages; }
  155. base.adjustMultiple = (o.infiniteSlides && base.pages > 1) ? 0 : o.showMultiple - 1;
  156. base.pages = base.$items.length - base.adjustMultiple;
  157. }
  158. // Hide navigation & player if there is only one page
  159. base.$controls
  160. .add(base.$nav)
  161. .add(base.$startStop)
  162. .add(base.$forward)
  163. .add(base.$back)[(base.pages <= 1) ? 'hide' : 'show']();
  164. if (base.pages > 1) {
  165. // Build/update navigation tabs
  166. base.buildNavigation();
  167. }
  168. // Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
  169. // This supports the "infinite" scrolling, also ensures any cloned elements don't duplicate an ID
  170. // Moved removeAttr before addClass otherwise IE7 ignores the addClass: http://bugs.jquery.com/ticket/9871
  171. if (o.infiniteSlides && base.pages > 1) {
  172. base.$el.prepend( base.$items.filter(':last').clone().removeAttr('id').addClass('cloned') );
  173. // Add support for multiple sliders shown at the same time
  174. if (o.showMultiple > 1) {
  175. base.$el.append( base.$items.filter(':lt(' + o.showMultiple + ')').clone().removeAttr('id').addClass('cloned').addClass('multiple') );
  176. } else {
  177. base.$el.append( base.$items.filter(':first').clone().removeAttr('id').addClass('cloned') );
  178. }
  179. base.$el.find('.cloned').each(function(){
  180. // disable all focusable elements in cloned panels to prevent shifting the panels by tabbing
  181. $(this).find('a,input,textarea,select,button,area').attr('disabled', 'disabled');
  182. $(this).find('[id]').removeAttr('id');
  183. });
  184. }
  185. // We just added two items, time to re-cache the list, then get the dimensions of each panel
  186. base.$items = base.$el.children().addClass('panel' + (o.vertical ? ' vertical' : ''));
  187. base.setDimensions();
  188. // Set the dimensions of each panel
  189. if (o.resizeContents) {
  190. base.$items.css('width', base.width);
  191. base.$wrapper.css('width', base.getDim(base.currentPage)[0]);
  192. base.$wrapper.add(base.$items).css('height', base.height);
  193. } else {
  194. base.$win.load(function(){ base.setDimensions(); }); // set dimensions after all images load
  195. }
  196. if (base.currentPage > base.pages) {
  197. base.currentPage = base.pages;
  198. }
  199. base.setCurrentPage(base.currentPage, false);
  200. base.$nav.find('a').eq(base.currentPage - 1).addClass('cur'); // update current selection
  201. };
  202. // Creates the numbered navigation links
  203. base.buildNavigation = function() {
  204. if (o.buildNavigation && (base.pages > 1)) {
  205. var t, $a;
  206. base.$items.filter(':not(.cloned)').each(function(i) {
  207. var index = i + 1;
  208. t = ((index === 1) ? 'first' : '') + ((index === base.pages) ? 'last' : '');
  209. $a = $('<a href="#"></a>').addClass('panel' + index).wrap('<li class="' + t + '" />');
  210. base.$nav.append($a.parent()); // use $a.parent() so it will add <li> instead of only the <a> to the <ul>
  211. // If a formatter function is present, use it
  212. if ($.isFunction(o.navigationFormatter)) {
  213. t = o.navigationFormatter(index, $(this));
  214. $a.html('<span>' + t + '</span>');
  215. // Add formatting to title attribute if text is hidden
  216. if (parseInt($a.find('span').css('text-indent'),10) < 0) { $a.addClass(o.tooltipClass).attr('title', t); }
  217. } else {
  218. $a.html('<span>' + index + '</span>');
  219. }
  220. $a.bind(o.clickControls, function(e) {
  221. if (!base.flag && o.enableNavigation) {
  222. // prevent running functions twice (once for click, second time for focusin)
  223. base.flag = true; setTimeout(function(){ base.flag = false; }, 100);
  224. base.gotoPage(index);
  225. if (o.hashTags) { base.setHash(index); }
  226. }
  227. e.preventDefault();
  228. });
  229. });
  230. // Add navigation tab scrolling - use !! in case someone sets the size to zero
  231. if (!!o.navigationSize && o.navigationSize < base.pages) {
  232. if (!base.$controls.find('.anythingNavWindow').length){
  233. base.$nav
  234. .before('<ul><li class="prev"><a href="#"><span>' + o.backText + '</span></a></li></ul>')
  235. .after('<ul><li class="next"><a href="#"><span>' + o.forwardText + '</span></a></li></ul>')
  236. .wrap('<div class="anythingNavWindow"></div>');
  237. }
  238. // include half of the left position to include extra width from themes like tabs-light and tabs-dark (still not perfect)
  239. base.navWidths = base.$nav.find('li').map(function(){
  240. return $(this).innerWidth() + Math.ceil(parseInt($(this).find('span').css('left'),10)/2 || 0);
  241. }).get();
  242. base.navLeft = 1;
  243. // add 5 pixels to make sure the tabs don't wrap to the next line
  244. base.$nav.width( base.navWidth( 1, base.pages + 1 ) + 5 );
  245. base.$controls.find('.anythingNavWindow')
  246. .width( base.navWidth( 1, o.navigationSize + 1 ) ).end()
  247. .find('.prev,.next').bind(o.clickControls, function(e) {
  248. if (!base.flag) {
  249. base.flag = true; setTimeout(function(){ base.flag = false; }, 200);
  250. base.navWindow( base.navLeft + o.navigationSize * ( $(this).is('.prev') ? -1 : 1 ) );
  251. }
  252. e.preventDefault();
  253. });
  254. }
  255. }
  256. };
  257. base.navWidth = function(x,y){
  258. var i, s = Math.min(x,y),
  259. e = Math.max(x,y),
  260. w = 0;
  261. for (i = s; i < e; i++) {
  262. w += base.navWidths[i-1] || 0;
  263. }
  264. return w;
  265. };
  266. base.navWindow = function(n){
  267. if (!!o.navigationSize && o.navigationSize < base.pages && base.navWidths) {
  268. var p = base.pages - o.navigationSize + 1;
  269. n = (n <= 1) ? 1 : (n > 1 && n < p) ? n : p;
  270. if (n !== base.navLeft) {
  271. base.$controls.find('.anythingNavWindow').animate(
  272. { scrollLeft: base.navWidth(1, n), width: base.navWidth(n, n + o.navigationSize) },
  273. { queue: false, duration: o.animationTime });
  274. base.navLeft = n;
  275. }
  276. }
  277. };
  278. // Creates the Forward/Backward buttons
  279. base.buildNextBackButtons = function() {
  280. base.$forward = $('<span class="arrow forward"><a href="#"><span>' + o.forwardText + '</span></a></span>');
  281. base.$back = $('<span class="arrow back"><a href="#"><span>' + o.backText + '</span></a></span>');
  282. // Bind to the forward and back buttons
  283. base.$back.bind(o.clickBackArrow, function(e) {
  284. // prevent running functions twice (once for click, second time for swipe)
  285. if (o.enableArrows && !base.flag) {
  286. base.flag = true; setTimeout(function(){ base.flag = false; }, 100);
  287. base.goBack();
  288. }
  289. e.preventDefault();
  290. });
  291. base.$forward.bind(o.clickForwardArrow, function(e) {
  292. // prevent running functions twice (once for click, second time for swipe)
  293. if (o.enableArrows && !base.flag) {
  294. base.flag = true; setTimeout(function(){ base.flag = false; }, 100);
  295. base.goForward();
  296. }
  297. e.preventDefault();
  298. });
  299. // using tab to get to arrow links will show they have focus (outline is disabled in css)
  300. base.$back.add(base.$forward).find('a').bind('focusin focusout',function(){
  301. $(this).toggleClass('hover');
  302. });
  303. // Append elements to page
  304. base.$back.appendTo( (o.appendBackTo !== null && $(o.appendBackTo).length) ? $(o.appendBackTo) : base.$wrapper );
  305. base.$forward.appendTo( (o.appendForwardTo !== null && $(o.appendForwardTo).length) ? $(o.appendForwardTo) : base.$wrapper );
  306. base.$arrowWidth = base.$forward.width(); // assuming the left & right arrows are the same width - used for toggle
  307. };
  308. // Creates the Start/Stop button
  309. base.buildAutoPlay = function(){
  310. base.$startStop
  311. .html('<span>' + (base.playing ? o.stopText : o.startText) + '</span>')
  312. .bind(o.clickSlideshow, function(e) {
  313. if (o.enableStartStop) {
  314. base.startStop(!base.playing);
  315. base.makeActive();
  316. if (base.playing && !o.autoPlayDelayed) {
  317. base.goForward(true);
  318. }
  319. }
  320. e.preventDefault();
  321. })
  322. // show button has focus while tabbing
  323. .bind('focusin focusout',function(){
  324. $(this).toggleClass('hover');
  325. });
  326. };
  327. // Adjust slider dimensions on parent element resize
  328. base.checkResize = function(stopTimer){
  329. clearTimeout(base.resizeTimer);
  330. base.resizeTimer = setTimeout(function(){
  331. var w = base.$outer.width() - base.outerPad[0],
  332. h = (base.$outer[0].tagName === "BODY" ? base.$win.height() : base.$outer.height()) - base.outerPad[1];
  333. // base.width = width of one panel, so multiply by # of panels; outerPad is padding added for arrows.
  334. if (base.width * o.showMultiple !== w || base.height !== h) {
  335. base.setDimensions(); // adjust panel sizes
  336. // make sure page is lined up (use -1 animation time, so we can differeniate it from when animationTime = 0)
  337. base.gotoPage(base.currentPage, base.playing, null, -1);
  338. }
  339. if (typeof(stopTimer) === 'undefined'){ base.checkResize(); }
  340. }, 500);
  341. };
  342. // Set panel dimensions to either resize content or adjust panel to content
  343. base.setDimensions = function(){
  344. var w, h, c, edge = 0,
  345. fullsize = { width: '100%', height: '100%' },
  346. // determine panel width
  347. pw = (o.showMultiple > 1) ? base.width || base.$window.width()/o.showMultiple : base.$window.width(),
  348. winw = base.$win.width();
  349. if (o.expand){
  350. w = base.$outer.width() - base.outerPad[0];
  351. base.height = h = base.$outer.height() - base.outerPad[1];
  352. base.$wrapper.add(base.$window).add(base.$items).css({ width: w, height: h });
  353. base.width = pw = (o.showMultiple > 1) ? w/o.showMultiple : w;
  354. }
  355. base.$items.each(function(i){
  356. c = $(this).children();
  357. if (o.resizeContents){
  358. // resize panel
  359. w = base.width;
  360. h = base.height;
  361. $(this).css({ width: w, height: h });
  362. if (c.length) {
  363. if (c[0].tagName === "EMBED") { c.attr(fullsize); } // needed for IE7; also c.length > 1 in IE7
  364. if (c[0].tagName === "OBJECT") { c.find('embed').attr(fullsize); }
  365. // resize panel contents, if solitary (wrapped content or solitary image)
  366. if (c.length === 1){ c.css(fullsize); }
  367. }
  368. } else {
  369. // get panel width & height and save it
  370. w = $(this).width() || base.width; // if image hasn't finished loading, width will be zero, so set it to base width instead
  371. if (c.length === 1 && w >= winw){
  372. w = (c.width() >= winw) ? pw : c.width(); // get width of solitary child
  373. c.css('max-width', w); // set max width for all children
  374. }
  375. $(this).css('width', w); // set width of panel
  376. h = (c.length === 1 ? c.outerHeight(true) : $(this).height()); // get height after setting width
  377. if (h <= base.outerPad[1]) { h = base.height; } // if height less than the outside padding, then set it to the preset height
  378. $(this).css('height', h);
  379. }
  380. base.panelSize[i] = [w,h,edge];
  381. edge += (o.vertical) ? h : w;
  382. });
  383. // Set total width of slider, Note that this is limited to 32766 by Opera - option removed
  384. base.$el.css((o.vertical ? 'height' : 'width'), edge);
  385. };
  386. // get dimension of multiple panels, as needed
  387. base.getDim = function(page){
  388. if (base.pages < 1 || isNaN(page)) { return [ base.width, base.height ]; } // prevent errors when base.panelSize is empty
  389. page = (o.infiniteSlides && base.pages > 1) ? page : page - 1;
  390. var i,
  391. w = base.panelSize[page][0],
  392. h = base.panelSize[page][1];
  393. if (o.showMultiple > 1) {
  394. for (i=1; i < o.showMultiple; i++) {
  395. w += base.panelSize[(page + i)%o.showMultiple][0];
  396. h = Math.max(h, base.panelSize[page + i][1]);
  397. }
  398. }
  399. return [w,h];
  400. };
  401. base.goForward = function(autoplay) {
  402. base.gotoPage(base.currentPage + o.changeBy * (o.playRtl ? -1 : 1), autoplay);
  403. };
  404. base.goBack = function(autoplay) {
  405. base.gotoPage(base.currentPage + o.changeBy * (o.playRtl ? 1 : -1), autoplay);
  406. };
  407. base.gotoPage = function(page, autoplay, callback, time) {
  408. if (autoplay !== true) {
  409. autoplay = false;
  410. base.startStop(false);
  411. base.makeActive();
  412. }
  413. // check if page is an id or class name
  414. if (/^[#|.]/.test(page) && $(page).length) {
  415. page = $(page).closest('.panel').index() + base.adj;
  416. }
  417. // rewind effect occurs here when changeBy > 1
  418. if (o.changeBy !== 1){
  419. if (page < 0) { page += base.pages; }
  420. if (page > base.pages) { page -= base.pages; }
  421. }
  422. if (base.pages <= 1) { return; } // prevents animation
  423. base.$lastPage = base.$currentPage;
  424. if (typeof(page) !== "number") {
  425. page = o.startPanel;
  426. base.setCurrentPage(page);
  427. }
  428. // pause YouTube videos before scrolling or prevent change if playing
  429. if (autoplay && o.isVideoPlaying(base)) { return; }
  430. if (page > base.pages + 1 - base.adj) { page = (!o.infiniteSlides && !o.stopAtEnd) ? 1 : base.pages; }
  431. if (page < base.adj ) { page = (!o.infiniteSlides && !o.stopAtEnd) ? base.pages : 1; }
  432. base.currentPage = ( page > base.pages ) ? base.pages : ( page < 1 ) ? 1 : base.currentPage;
  433. base.$currentPage = base.$items.eq(base.currentPage - base.adj);
  434. base.exactPage = page;
  435. base.targetPage = (page === 0) ? base.pages - base.adj : (page > base.pages) ? 1 - base.adj : page - base.adj;
  436. base.$targetPage = base.$items.eq( base.targetPage );
  437. time = time || o.animationTime;
  438. // don't trigger events when time = 1 - to prevent FX from firing multiple times on page resize
  439. if (time >= 0) { base.$el.trigger('slide_init', base); }
  440. base.slideControls(true, false);
  441. // When autoplay isn't passed, we stop the timer
  442. if (autoplay !== true) { autoplay = false; }
  443. // Stop the slider when we reach the last page, if the option stopAtEnd is set to true
  444. if (!autoplay || (o.stopAtEnd && page === base.pages)) { base.startStop(false); }
  445. if (time >= 0) { base.$el.trigger('slide_begin', base); }
  446. // delay starting slide animation
  447. setTimeout(function(d){
  448. // resize slider if content size varies
  449. if (!o.resizeContents) {
  450. // animating the wrapper resize before the window prevents flickering in Firefox
  451. d = base.getDim(page);
  452. base.$wrapper.filter(':not(:animated)').animate(
  453. // prevent animating a dimension to zero
  454. { width: d[0] || base.width, height: d[1] || base.height },
  455. { queue: false, duration: (time < 0 ? 0 : time), easing: o.easing }
  456. );
  457. }
  458. d = {};
  459. d[base.dir] = -base.panelSize[(o.infiniteSlides && base.pages > 1) ? page : page - 1][2];
  460. // Animate Slider
  461. base.$el.filter(':not(:animated)').animate(
  462. d, { queue: false, duration: time, easing: o.easing, complete: function(){ base.endAnimation(page, callback, time); } }
  463. );
  464. }, parseInt(o.delayBeforeAnimate, 10) || 0);
  465. };
  466. base.endAnimation = function(page, callback, time){
  467. if (page === 0) {
  468. base.$el.css( base.dir, -base.panelSize[base.pages][2]);
  469. page = base.pages;
  470. } else if (page > base.pages) {
  471. // reset back to start position
  472. base.$el.css( base.dir, -base.panelSize[1][2]);
  473. page = 1;
  474. }
  475. base.exactPage = page;
  476. base.setCurrentPage(page, false);
  477. // Add active panel class
  478. base.$items.removeClass('activePage').eq(page - base.adj).addClass('activePage');
  479. if (!base.hovered) { base.slideControls(false); }
  480. if (time >= 0) { base.$el.trigger('slide_complete', base); }
  481. // callback from external slide control: $('#slider').anythingSlider(4, function(slider){ })
  482. if (typeof callback === 'function') { callback(base); }
  483. // Continue slideshow after a delay
  484. if (o.autoPlayLocked && !base.playing) {
  485. setTimeout(function(){
  486. base.startStop(true);
  487. // subtract out slide delay as the slideshow waits that additional time.
  488. }, o.resumeDelay - (o.autoPlayDelayed ? o.delay : 0));
  489. }
  490. };
  491. base.setCurrentPage = function(page, move) {
  492. page = parseInt(page, 10);
  493. if (base.pages < 1 || page === 0 || isNaN(page)) { return; }
  494. if (page > base.pages + 1 - base.adj) { page = base.pages - base.adj; }
  495. if (page < base.adj ) { page = 1; }
  496. // Set visual
  497. if (o.buildNavigation){
  498. base.$nav
  499. .find('.cur').removeClass('cur').end()
  500. .find('a').eq(page - 1).addClass('cur');
  501. }
  502. // hide/show arrows based on infinite scroll mode
  503. if (!o.infiniteSlides && o.stopAtEnd){
  504. base.$wrapper
  505. .find('span.forward')[ page === base.pages ? 'addClass' : 'removeClass']('disabled').end()
  506. .find('span.back')[ page === 1 ? 'addClass' : 'removeClass']('disabled');
  507. if (page === base.pages && base.playing) { base.startStop(); }
  508. }
  509. // Only change left if move does not equal false
  510. if (!move) {
  511. var d = base.getDim(page);
  512. base.$wrapper
  513. .css({ width: d[0], height: d[1] })
  514. .add(base.$window).scrollLeft(0); // reset in case tabbing changed this scrollLeft - probably overly redundant
  515. base.$el.css( base.dir, -base.panelSize[(o.infiniteSlides && base.pages > 1) ? page : page - 1][2] );
  516. }
  517. // Update local variable
  518. base.currentPage = page;
  519. base.$currentPage = base.$items.removeClass('activePage').eq(page - base.adj).addClass('activePage');
  520. };
  521. base.makeActive = function(){
  522. // Set current slider as active so keyboard navigation works properly
  523. if (!base.$wrapper.is('.activeSlider')){
  524. $('.activeSlider').removeClass('activeSlider');
  525. base.$wrapper.addClass('activeSlider');
  526. }
  527. };
  528. // This method tries to find a hash that matches an ID and panel-X
  529. // If either found, it tries to find a matching item
  530. // If that is found as well, then it returns the page number
  531. base.gotoHash = function(){
  532. var h = base.win.location.hash,
  533. i = h.indexOf('&'),
  534. n = h.match(base.regex);
  535. if (n === null && !/^#&/.test(h)) {
  536. // #quote2&panel1-3&panel3-3
  537. h = h.substring(0, (i >= 0 ? i : h.length));
  538. // ensure the element is in the same slider
  539. n = ($(h).closest('.anythingBase')[0] === base.el) ? $(h).closest('.panel').index() : null;
  540. } else if (n !== null) {
  541. // #&panel1-3&panel3-3
  542. n = (o.hashTags) ? parseInt(n[1],10) : null;
  543. }
  544. return n;
  545. };
  546. base.setHash = function(n){
  547. var s = 'panel' + base.runTimes + '-',
  548. h = base.win.location.hash;
  549. if ( typeof h !== 'undefined' ) {
  550. base.win.location.hash = (h.indexOf(s) > 0) ? h.replace(base.regex, s + n) : h + "&" + s + n;
  551. }
  552. };
  553. // Slide controls (nav and play/stop button up or down)
  554. base.slideControls = function(toggle){
  555. var dir = (toggle) ? 'slideDown' : 'slideUp',
  556. t1 = (toggle) ? 0 : o.animationTime,
  557. t2 = (toggle) ? o.animationTime: 0,
  558. op = (toggle) ? 1 : 0,
  559. sign = (toggle) ? 0 : 1; // 0 = visible, 1 = hidden
  560. if (o.toggleControls) {
  561. base.$controls.stop(true,true).delay(t1)[dir](o.animationTime/2).delay(t2);
  562. }
  563. if (o.buildArrows && o.toggleArrows) {
  564. if (!base.hovered && base.playing) { sign = 1; op = 0; } // don't animate arrows during slideshow
  565. base.$forward.stop(true,true).delay(t1).animate({ right: sign * base.$arrowWidth, opacity: op }, o.animationTime/2);
  566. base.$back.stop(true,true).delay(t1).animate({ left: sign * base.$arrowWidth, opacity: op }, o.animationTime/2);
  567. }
  568. };
  569. base.clearTimer = function(paused){
  570. // Clear the timer only if it is set
  571. if (base.timer) {
  572. base.win.clearInterval(base.timer);
  573. if (!paused && base.slideshow) {
  574. base.$el.trigger('slideshow_stop', base);
  575. base.slideshow = false;
  576. }
  577. }
  578. };
  579. // Pass startStop(false) to stop and startStop(true) to play
  580. base.startStop = function(playing, paused) {
  581. if (playing !== true) { playing = false; } // Default if not supplied is false
  582. base.playing = playing;
  583. if (playing && !paused) {
  584. base.$el.trigger('slideshow_start', base);
  585. base.slideshow = true;
  586. }
  587. // Toggle playing and text
  588. if (o.buildStartStop) {
  589. base.$startStop.toggleClass('playing', playing).find('span').html( playing ? o.stopText : o.startText );
  590. // add button text to title attribute if it is hidden by text-indent
  591. if (parseInt(base.$startStop.find('span').css('text-indent'),10) < 0) {
  592. base.$startStop.addClass(o.tooltipClass).attr( 'title', playing ? o.stopText : o.startText );
  593. }
  594. }
  595. // Pause slideshow while video is playing
  596. if (playing){
  597. base.clearTimer(true); // Just in case this was triggered twice in a row
  598. base.timer = base.win.setInterval(function() {
  599. // prevent autoplay if video is playing
  600. if ( !o.isVideoPlaying(base) ) {
  601. base.goForward(true);
  602. // stop slideshow if resume if false
  603. } else if (!o.resumeOnVideoEnd) {
  604. base.startStop();
  605. }
  606. }, o.delay);
  607. } else {
  608. base.clearTimer();
  609. }
  610. };
  611. // Trigger the initialization
  612. base.init();
  613. };
  614. $.anythingSlider.defaults = {
  615. // Appearance
  616. theme : "default", // Theme name, add the css stylesheet manually
  617. expand : false, // If true, the entire slider will expand to fit the parent element
  618. resizeContents : true, // If true, solitary images/objects in the panel will expand to fit the viewport
  619. vertical : false, // If true, all panels will slide vertically; they slide horizontally otherwise
  620. showMultiple : false, // Set this value to a number and it will show that many slides at once
  621. easing : "swing", // Anything other than "linear" or "swing" requires the easing plugin or jQuery UI
  622. buildArrows : true, // If true, builds the forwards and backwards buttons
  623. buildNavigation : true, // If true, builds a list of anchor links to link to each panel
  624. buildStartStop : true, // ** If true, builds the start/stop button
  625. appendForwardTo : null, // Append forward arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
  626. appendBackTo : null, // Append back arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
  627. appendControlsTo : null, // Append controls (navigation + start-stop) to a HTML element (jQuery Object, selector or HTMLNode), if not null
  628. appendNavigationTo : null, // Append navigation buttons to a HTML element (jQuery Object, selector or HTMLNode), if not null
  629. appendStartStopTo : null, // Append start-stop button to a HTML element (jQuery Object, selector or HTMLNode), if not null
  630. toggleArrows : false, // If true, side navigation arrows will slide out on hovering & hide @ other times
  631. toggleControls : false, // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times
  632. startText : "Start", // Start button text
  633. stopText : "Stop", // Stop button text
  634. forwardText : "&raquo;", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
  635. backText : "&laquo;", // Link text used to move the slider back (hidden by CSS, replace with arrow image)
  636. tooltipClass : "tooltip", // Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)
  637. // Function
  638. enableArrows : true, // if false, arrows will be visible, but not clickable.
  639. enableNavigation : true, // if false, navigation links will still be visible, but not clickable.
  640. enableStartStop : true, // if false, the play/stop button will still be visible, but not clickable. Previously "enablePlay"
  641. enableKeyboard : true, // if false, keyboard arrow keys will not work for this slider.
  642. // Navigation
  643. startPanel : 1, // This sets the initial panel
  644. changeBy : 1, // Amount to go forward or back when changing panels.
  645. hashTags : true, // Should links change the hashtag in the URL?
  646. infiniteSlides : true, // if false, the slider will not wrap & not clone any panels
  647. navigationFormatter : null, // Details at the top of the file on this use (advanced use)
  648. navigationSize : false, // Set this to the maximum number of visible navigation tabs; false to disable
  649. // Slideshow options
  650. autoPlay : false, // If true, the slideshow will start running; replaces "startStopped" option
  651. autoPlayLocked : false, // If true, user changing slides will not stop the slideshow
  652. autoPlayDelayed : false, // If true, starting a slideshow will delay advancing slides; if false, the slider will immediately advance to the next slide when slideshow starts
  653. pauseOnHover : true, // If true & the slideshow is active, the slideshow will pause on hover
  654. stopAtEnd : false, // If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
  655. playRtl : false, // If true, the slideshow will move right-to-left
  656. // Times
  657. delay : 3000, // How long between slideshow transitions in AutoPlay mode (in milliseconds)
  658. resumeDelay : 15000, // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
  659. animationTime : 600, // How long the slideshow transition takes (in milliseconds)
  660. delayBeforeAnimate : 0, // How long to pause slide animation before going to the desired slide (used if you want your "out" FX to show).
  661. // Callbacks - removed from options to reduce size - they still work
  662. // Interactivity
  663. clickForwardArrow : "click", // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight")
  664. clickBackArrow : "click", // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft")
  665. clickControls : "click focusin", // Events used to activate navigation control functionality
  666. clickSlideshow : "click", // Event used to activate slideshow play/stop button
  667. // Video
  668. resumeOnVideoEnd : true, // If true & the slideshow is active & a supported video is playing, it will pause the autoplay until the video is complete
  669. resumeOnVisible : true, // If true the video will resume playing (if previously paused, except for YouTube iframe - known issue); if false, the video remains paused.
  670. addWmodeToObject : "opaque", // If your slider has an embedded object, the script will automatically add a wmode parameter with this setting
  671. isVideoPlaying : function(base){ return false; } // return true if video is playing or false if not - used by video extension
  672. };
  673. $.fn.anythingSlider = function(options, callback) {
  674. return this.each(function(){
  675. var page, anySlide = $(this).data('AnythingSlider');
  676. // initialize the slider but prevent multiple initializations
  677. if ((typeof(options)).match('object|undefined')){
  678. if (!anySlide) {
  679. (new $.anythingSlider(this, options));
  680. } else {
  681. anySlide.updateSlider();
  682. }
  683. // If options is a number, process as an external link to page #: $(element).anythingSlider(#)
  684. } else if (/\d/.test(options) && !isNaN(options) && anySlide) {
  685. page = (typeof(options) === "number") ? options : parseInt($.trim(options),10); // accepts " 2 "
  686. // ignore out of bound pages
  687. if ( page >= 1 && page <= anySlide.pages ) {
  688. anySlide.gotoPage(page, false, callback); // page #, autoplay, one time callback
  689. }
  690. // Accept id or class name
  691. } else if (/^[#|.]/.test(options) && $(options).length) {
  692. anySlide.gotoPage(options, false, callback);
  693. }
  694. });
  695. };
  696. })(jQuery);