1. /*
  2. Supersized - Fullscreen Slideshow jQuery Plugin
  3. Version : 3.2.7
  4. Site : www.buildinternet.com/project/supersized
  5. Author : Sam Dunn
  6. Company : One Mighty Roar (www.onemightyroar.com)
  7. License : MIT License / GPL License
  8. */
  9. (function($){
  10. /* Place Supersized Elements
  11. ----------------------------*/
  12. $(document).ready(function() {
  13. $('body').append('<div id="supersized-loader"></div><ul id="supersized"></ul>');
  14. });
  15. $.supersized = function(options){
  16. /* Variables
  17. ----------------------------*/
  18. var el = '#supersized',
  19. base = this;
  20. // Access to jQuery and DOM versions of element
  21. base.$el = $(el);
  22. base.el = el;
  23. vars = $.supersized.vars;
  24. // Add a reverse reference to the DOM object
  25. base.$el.data("supersized", base);
  26. api = base.$el.data('supersized');
  27. base.init = function(){
  28. // Combine options and vars
  29. $.supersized.vars = $.extend($.supersized.vars, $.supersized.themeVars);
  30. $.supersized.vars.options = $.extend({},$.supersized.defaultOptions, $.supersized.themeOptions, options);
  31. base.options = $.supersized.vars.options;
  32. base._build();
  33. };
  34. /* Build Elements
  35. ----------------------------*/
  36. base._build = function(){
  37. // Add in slide markers
  38. var thisSlide = 0,
  39. slideSet = '',
  40. markers = '',
  41. markerContent,
  42. thumbMarkers = '',
  43. thumbImage;
  44. while(thisSlide <= base.options.slides.length-1){
  45. //Determine slide link content
  46. switch(base.options.slide_links){
  47. case 'num':
  48. markerContent = thisSlide;
  49. break;
  50. case 'name':
  51. markerContent = base.options.slides[thisSlide].title;
  52. break;
  53. case 'blank':
  54. markerContent = '';
  55. break;
  56. }
  57. slideSet = slideSet+'<li class="slide-'+thisSlide+'"></li>';
  58. if(thisSlide == base.options.start_slide-1){
  59. // Slide links
  60. if (base.options.slide_links)markers = markers+'<li class="slide-link-'+thisSlide+' current-slide"><a>'+markerContent+'</a></li>';
  61. // Slide Thumbnail Links
  62. if (base.options.thumb_links){
  63. base.options.slides[thisSlide].thumb ? thumbImage = base.options.slides[thisSlide].thumb : thumbImage = base.options.slides[thisSlide].image;
  64. thumbMarkers = thumbMarkers+'<li class="thumb'+thisSlide+' current-thumb"><img src="'+thumbImage+'"/></li>';
  65. };
  66. }else{
  67. // Slide links
  68. if (base.options.slide_links) markers = markers+'<li class="slide-link-'+thisSlide+'" ><a>'+markerContent+'</a></li>';
  69. // Slide Thumbnail Links
  70. if (base.options.thumb_links){
  71. base.options.slides[thisSlide].thumb ? thumbImage = base.options.slides[thisSlide].thumb : thumbImage = base.options.slides[thisSlide].image;
  72. thumbMarkers = thumbMarkers+'<li class="thumb'+thisSlide+'"><img src="'+thumbImage+'"/></li>';
  73. };
  74. }
  75. thisSlide++;
  76. }
  77. if (base.options.slide_links) $(vars.slide_list).html(markers);
  78. if (base.options.thumb_links && vars.thumb_tray.length){
  79. $(vars.thumb_tray).append('<ul id="'+vars.thumb_list.replace('#','')+'">'+thumbMarkers+'</ul>');
  80. }
  81. $(base.el).append(slideSet);
  82. // Add in thumbnails
  83. if (base.options.thumbnail_navigation){
  84. // Load previous thumbnail
  85. vars.current_slide - 1 < 0 ? prevThumb = base.options.slides.length - 1 : prevThumb = vars.current_slide - 1;
  86. $(vars.prev_thumb).show().html($("<img/>").attr("src", base.options.slides[prevThumb].image));
  87. // Load next thumbnail
  88. vars.current_slide == base.options.slides.length - 1 ? nextThumb = 0 : nextThumb = vars.current_slide + 1;
  89. $(vars.next_thumb).show().html($("<img/>").attr("src", base.options.slides[nextThumb].image));
  90. }
  91. base._start(); // Get things started
  92. };
  93. /* Initialize
  94. ----------------------------*/
  95. base._start = function(){
  96. // Determine if starting slide random
  97. if (base.options.start_slide){
  98. vars.current_slide = base.options.start_slide - 1;
  99. }else{
  100. vars.current_slide = Math.floor(Math.random()*base.options.slides.length); // Generate random slide number
  101. }
  102. // If links should open in new window
  103. var linkTarget = base.options.new_window ? ' target="_blank"' : '';
  104. // Set slideshow quality (Supported only in FF and IE, no Webkit)
  105. if (base.options.performance == 3){
  106. base.$el.addClass('speed'); // Faster transitions
  107. } else if ((base.options.performance == 1) || (base.options.performance == 2)){
  108. base.$el.addClass('quality'); // Higher image quality
  109. }
  110. // Shuffle slide order if needed
  111. if (base.options.random){
  112. arr = base.options.slides;
  113. for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x); // Fisher-Yates shuffle algorithm (jsfromhell.com/array/shuffle)
  114. base.options.slides = arr;
  115. }
  116. /*-----Load initial set of images-----*/
  117. if (base.options.slides.length > 1){
  118. if(base.options.slides.length > 2){
  119. // Set previous image
  120. vars.current_slide - 1 < 0 ? loadPrev = base.options.slides.length - 1 : loadPrev = vars.current_slide - 1; // If slide is 1, load last slide as previous
  121. var imageLink = (base.options.slides[loadPrev].url) ? "href='" + base.options.slides[loadPrev].url + "'" : "";
  122. var imgPrev = $('<img src="'+base.options.slides[loadPrev].image+'"/>');
  123. var slidePrev = base.el+' li:eq('+loadPrev+')';
  124. imgPrev.appendTo(slidePrev).wrap('<a ' + imageLink + linkTarget + '></a>').parent().parent().addClass('image-loading prevslide');
  125. imgPrev.load(function(){
  126. $(this).data('origWidth', $(this).width()).data('origHeight', $(this).height());
  127. base.resizeNow(); // Resize background image
  128. }); // End Load
  129. }
  130. } else {
  131. // Slideshow turned off if there is only one slide
  132. base.options.slideshow = 0;
  133. }
  134. // Set current image
  135. imageLink = (api.getField('url')) ? "href='" + api.getField('url') + "'" : "";
  136. var img = $('<img src="'+api.getField('image')+'"/>');
  137. var slideCurrent= base.el+' li:eq('+vars.current_slide+')';
  138. img.appendTo(slideCurrent).wrap('<a ' + imageLink + linkTarget + '></a>').parent().parent().addClass('image-loading activeslide');
  139. img.load(function(){
  140. base._origDim($(this));
  141. base.resizeNow(); // Resize background image
  142. base.launch();
  143. if( typeof theme != 'undefined' && typeof theme._init == "function" ) theme._init(); // Load Theme
  144. });
  145. if (base.options.slides.length > 1){
  146. // Set next image
  147. vars.current_slide == base.options.slides.length - 1 ? loadNext = 0 : loadNext = vars.current_slide + 1; // If slide is last, load first slide as next
  148. imageLink = (base.options.slides[loadNext].url) ? "href='" + base.options.slides[loadNext].url + "'" : "";
  149. var imgNext = $('<img src="'+base.options.slides[loadNext].image+'"/>');
  150. var slideNext = base.el+' li:eq('+loadNext+')';
  151. imgNext.appendTo(slideNext).wrap('<a ' + imageLink + linkTarget + '></a>').parent().parent().addClass('image-loading');
  152. imgNext.load(function(){
  153. $(this).data('origWidth', $(this).width()).data('origHeight', $(this).height());
  154. base.resizeNow(); // Resize background image
  155. }); // End Load
  156. }
  157. /*-----End load initial images-----*/
  158. // Hide elements to be faded in
  159. base.$el.css('visibility','hidden');
  160. $('.load-item').hide();
  161. };
  162. /* Launch Supersized
  163. ----------------------------*/
  164. base.launch = function(){
  165. base.$el.css('visibility','visible');
  166. $('#supersized-loader').remove(); //Hide loading animation
  167. // Call theme function for before slide transition
  168. if( typeof theme != 'undefined' && typeof theme.beforeAnimation == "function" ) theme.beforeAnimation('next');
  169. $('.load-item').show();
  170. // Keyboard Navigation
  171. if (base.options.keyboard_nav){
  172. $(document.documentElement).keyup(function (event) {
  173. if(vars.in_animation) return false; // Abort if currently animating
  174. if($(document.activeElement).is("input, textarea")) return false; // Abort if active element is an input or a textarea.
  175. // Left Arrow or Down Arrow
  176. if ((event.keyCode == 37) || (event.keyCode == 40)) {
  177. clearInterval(vars.slideshow_interval); // Stop slideshow, prevent buildup
  178. base.prevSlide();
  179. // Right Arrow or Up Arrow
  180. } else if ((event.keyCode == 39) || (event.keyCode == 38)) {
  181. clearInterval(vars.slideshow_interval); // Stop slideshow, prevent buildup
  182. base.nextSlide();
  183. // Spacebar
  184. } else if (event.keyCode == 32 && !vars.hover_pause) {
  185. clearInterval(vars.slideshow_interval); // Stop slideshow, prevent buildup
  186. base.playToggle();
  187. }
  188. });
  189. }
  190. // Pause when hover on image
  191. if (base.options.slideshow && base.options.pause_hover){
  192. $(base.el).hover(function() {
  193. if(vars.in_animation) return false; // Abort if currently animating
  194. vars.hover_pause = true; // Mark slideshow paused from hover
  195. if(!vars.is_paused){
  196. vars.hover_pause = 'resume'; // It needs to resume afterwards
  197. base.playToggle();
  198. }
  199. }, function() {
  200. if(vars.hover_pause == 'resume'){
  201. base.playToggle();
  202. vars.hover_pause = false;
  203. }
  204. });
  205. }
  206. if (base.options.slide_links){
  207. // Slide marker clicked
  208. $(vars.slide_list+'> li').click(function(){
  209. index = $(vars.slide_list+'> li').index(this);
  210. targetSlide = index + 1;
  211. base.goTo(targetSlide);
  212. return false;
  213. });
  214. }
  215. // Thumb marker clicked
  216. if (base.options.thumb_links){
  217. $(vars.thumb_list+'> li').click(function(){
  218. index = $(vars.thumb_list+'> li').index(this);
  219. targetSlide = index + 1;
  220. api.goTo(targetSlide);
  221. return false;
  222. });
  223. }
  224. // Start slideshow if enabled
  225. if (base.options.slideshow && base.options.slides.length > 1){
  226. // Start slideshow if autoplay enabled
  227. if (base.options.autoplay && base.options.slides.length > 1){
  228. vars.slideshow_interval = setInterval(base.nextSlide, base.options.slide_interval); // Initiate slide interval
  229. }else{
  230. vars.is_paused = true; // Mark as paused
  231. }
  232. //Prevent navigation items from being dragged
  233. $('.load-item img').bind("contextmenu mousedown",function(){
  234. return false;
  235. });
  236. }
  237. // Adjust image when browser is resized
  238. $(window).resize(function(){
  239. base.resizeNow();
  240. });
  241. };
  242. /* Resize Images
  243. ----------------------------*/
  244. base.resizeNow = function(){
  245. return base.$el.each(function() {
  246. // Resize each image seperately
  247. $('img', base.el).each(function(){
  248. thisSlide = $(this);
  249. var ratio = (thisSlide.data('origHeight')/thisSlide.data('origWidth')).toFixed(2); // Define image ratio
  250. // Gather browser size
  251. var browserwidth = base.$el.width(),
  252. browserheight = base.$el.height(),
  253. offset;
  254. /*-----Resize Image-----*/
  255. if (base.options.fit_always){ // Fit always is enabled
  256. if ((browserheight/browserwidth) > ratio){
  257. resizeWidth();
  258. } else {
  259. resizeHeight();
  260. }
  261. }else{ // Normal Resize
  262. if ((browserheight <= base.options.min_height) && (browserwidth <= base.options.min_width)){ // If window smaller than minimum width and height
  263. if ((browserheight/browserwidth) > ratio){
  264. base.options.fit_landscape && ratio < 1 ? resizeWidth(true) : resizeHeight(true); // If landscapes are set to fit
  265. } else {
  266. base.options.fit_portrait && ratio >= 1 ? resizeHeight(true) : resizeWidth(true); // If portraits are set to fit
  267. }
  268. } else if (browserwidth <= base.options.min_width){ // If window only smaller than minimum width
  269. if ((browserheight/browserwidth) > ratio){
  270. base.options.fit_landscape && ratio < 1 ? resizeWidth(true) : resizeHeight(); // If landscapes are set to fit
  271. } else {
  272. base.options.fit_portrait && ratio >= 1 ? resizeHeight() : resizeWidth(true); // If portraits are set to fit
  273. }
  274. } else if (browserheight <= base.options.min_height){ // If window only smaller than minimum height
  275. if ((browserheight/browserwidth) > ratio){
  276. base.options.fit_landscape && ratio < 1 ? resizeWidth() : resizeHeight(true); // If landscapes are set to fit
  277. } else {
  278. base.options.fit_portrait && ratio >= 1 ? resizeHeight(true) : resizeWidth(); // If portraits are set to fit
  279. }
  280. } else { // If larger than minimums
  281. if ((browserheight/browserwidth) > ratio){
  282. base.options.fit_landscape && ratio < 1 ? resizeWidth() : resizeHeight(); // If landscapes are set to fit
  283. } else {
  284. base.options.fit_portrait && ratio >= 1 ? resizeHeight() : resizeWidth(); // If portraits are set to fit
  285. }
  286. }
  287. }
  288. /*-----End Image Resize-----*/
  289. /*-----Resize Functions-----*/
  290. function resizeWidth(minimum){
  291. if (minimum){ // If minimum height needs to be considered
  292. if(thisSlide.width() < browserwidth || thisSlide.width() < base.options.min_width ){
  293. if (thisSlide.width() * ratio >= base.options.min_height){
  294. thisSlide.width(base.options.min_width);
  295. thisSlide.height(thisSlide.width() * ratio);
  296. }else{
  297. resizeHeight();
  298. }
  299. }
  300. }else{
  301. if (base.options.min_height >= browserheight && !base.options.fit_landscape){ // If minimum height needs to be considered
  302. if (browserwidth * ratio >= base.options.min_height || (browserwidth * ratio >= base.options.min_height && ratio <= 1)){ // If resizing would push below minimum height or image is a landscape
  303. thisSlide.width(browserwidth);
  304. thisSlide.height(browserwidth * ratio);
  305. } else if (ratio > 1){ // Else the image is portrait
  306. thisSlide.height(base.options.min_height);
  307. thisSlide.width(thisSlide.height() / ratio);
  308. } else if (thisSlide.width() < browserwidth) {
  309. thisSlide.width(browserwidth);
  310. thisSlide.height(thisSlide.width() * ratio);
  311. }
  312. }else{ // Otherwise, resize as normal
  313. thisSlide.width(browserwidth);
  314. thisSlide.height(browserwidth * ratio);
  315. }
  316. }
  317. };
  318. function resizeHeight(minimum){
  319. if (minimum){ // If minimum height needs to be considered
  320. if(thisSlide.height() < browserheight){
  321. if (thisSlide.height() / ratio >= base.options.min_width){
  322. thisSlide.height(base.options.min_height);
  323. thisSlide.width(thisSlide.height() / ratio);
  324. }else{
  325. resizeWidth(true);
  326. }
  327. }
  328. }else{ // Otherwise, resized as normal
  329. if (base.options.min_width >= browserwidth){ // If minimum width needs to be considered
  330. if (browserheight / ratio >= base.options.min_width || ratio > 1){ // If resizing would push below minimum width or image is a portrait
  331. thisSlide.height(browserheight);
  332. thisSlide.width(browserheight / ratio);
  333. } else if (ratio <= 1){ // Else the image is landscape
  334. thisSlide.width(base.options.min_width);
  335. thisSlide.height(thisSlide.width() * ratio);
  336. }
  337. }else{ // Otherwise, resize as normal
  338. thisSlide.height(browserheight);
  339. thisSlide.width(browserheight / ratio);
  340. }
  341. }
  342. };
  343. /*-----End Resize Functions-----*/
  344. if (thisSlide.parents('li').hasClass('image-loading')){
  345. $('.image-loading').removeClass('image-loading');
  346. }
  347. // Horizontally Center
  348. if (base.options.horizontal_center){
  349. $(this).css('left', (browserwidth - $(this).width())/2);
  350. }
  351. // Vertically Center
  352. if (base.options.vertical_center){
  353. $(this).css('top', (browserheight - $(this).height())/2);
  354. }
  355. });
  356. // Basic image drag and right click protection
  357. if (base.options.image_protect){
  358. $('img', base.el).bind("contextmenu mousedown",function(){
  359. return false;
  360. });
  361. }
  362. return false;
  363. });
  364. };
  365. /* Next Slide
  366. ----------------------------*/
  367. base.nextSlide = function(){
  368. if(vars.in_animation || !api.options.slideshow) return false; // Abort if currently animating
  369. else vars.in_animation = true; // Otherwise set animation marker
  370. clearInterval(vars.slideshow_interval); // Stop slideshow
  371. var slides = base.options.slides, // Pull in slides array
  372. liveslide = base.$el.find('.activeslide'); // Find active slide
  373. $('.prevslide').removeClass('prevslide');
  374. liveslide.removeClass('activeslide').addClass('prevslide'); // Remove active class & update previous slide
  375. // Get the slide number of new slide
  376. vars.current_slide + 1 == base.options.slides.length ? vars.current_slide = 0 : vars.current_slide++;
  377. var nextslide = $(base.el+' li:eq('+vars.current_slide+')'),
  378. prevslide = base.$el.find('.prevslide');
  379. // If hybrid mode is on drop quality for transition
  380. if (base.options.performance == 1) base.$el.removeClass('quality').addClass('speed');
  381. /*-----Load Image-----*/
  382. loadSlide = false;
  383. vars.current_slide == base.options.slides.length - 1 ? loadSlide = 0 : loadSlide = vars.current_slide + 1; // Determine next slide
  384. var targetList = base.el+' li:eq('+loadSlide+')';
  385. if (!$(targetList).html()){
  386. // If links should open in new window
  387. var linkTarget = base.options.new_window ? ' target="_blank"' : '';
  388. imageLink = (base.options.slides[loadSlide].url) ? "href='" + base.options.slides[loadSlide].url + "'" : ""; // If link exists, build it
  389. var img = $('<img src="'+base.options.slides[loadSlide].image+'"/>');
  390. img.appendTo(targetList).wrap('<a ' + imageLink + linkTarget + '></a>').parent().parent().addClass('image-loading').css('visibility','hidden');
  391. img.load(function(){
  392. base._origDim($(this));
  393. base.resizeNow();
  394. }); // End Load
  395. };
  396. // Update thumbnails (if enabled)
  397. if (base.options.thumbnail_navigation == 1){
  398. // Load previous thumbnail
  399. vars.current_slide - 1 < 0 ? prevThumb = base.options.slides.length - 1 : prevThumb = vars.current_slide - 1;
  400. $(vars.prev_thumb).html($("<img/>").attr("src", base.options.slides[prevThumb].image));
  401. // Load next thumbnail
  402. nextThumb = loadSlide;
  403. $(vars.next_thumb).html($("<img/>").attr("src", base.options.slides[nextThumb].image));
  404. }
  405. /*-----End Load Image-----*/
  406. // Call theme function for before slide transition
  407. if( typeof theme != 'undefined' && typeof theme.beforeAnimation == "function" ) theme.beforeAnimation('next');
  408. //Update slide markers
  409. if (base.options.slide_links){
  410. $('.current-slide').removeClass('current-slide');
  411. $(vars.slide_list +'> li' ).eq(vars.current_slide).addClass('current-slide');
  412. }
  413. nextslide.css('visibility','hidden').addClass('activeslide'); // Update active slide
  414. switch(base.options.transition){
  415. case 0: case 'none': // No transition
  416. nextslide.css('visibility','visible'); vars.in_animation = false; base.afterAnimation();
  417. break;
  418. case 1: case 'fade': // Fade
  419. nextslide.css({opacity : 0, 'visibility': 'visible'}).animate({opacity : 1, avoidTransforms : false}, base.options.transition_speed, function(){ base.afterAnimation(); });
  420. break;
  421. case 2: case 'slideTop': // Slide Top
  422. nextslide.css({top : -base.$el.height(), 'visibility': 'visible'}).animate({ top:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  423. break;
  424. case 3: case 'slideRight': // Slide Right
  425. nextslide.css({left : base.$el.width(), 'visibility': 'visible'}).animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  426. break;
  427. case 4: case 'slideBottom': // Slide Bottom
  428. nextslide.css({top : base.$el.height(), 'visibility': 'visible'}).animate({ top:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  429. break;
  430. case 5: case 'slideLeft': // Slide Left
  431. nextslide.css({left : -base.$el.width(), 'visibility': 'visible'}).animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  432. break;
  433. case 6: case 'carouselRight': // Carousel Right
  434. nextslide.css({left : base.$el.width(), 'visibility': 'visible'}).animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  435. liveslide.animate({ left: -base.$el.width(), avoidTransforms : false }, base.options.transition_speed );
  436. break;
  437. case 7: case 'carouselLeft': // Carousel Left
  438. nextslide.css({left : -base.$el.width(), 'visibility': 'visible'}).animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  439. liveslide.animate({ left: base.$el.width(), avoidTransforms : false }, base.options.transition_speed );
  440. break;
  441. }
  442. return false;
  443. };
  444. /* Previous Slide
  445. ----------------------------*/
  446. base.prevSlide = function(){
  447. if(vars.in_animation || !api.options.slideshow) return false; // Abort if currently animating
  448. else vars.in_animation = true; // Otherwise set animation marker
  449. clearInterval(vars.slideshow_interval); // Stop slideshow
  450. var slides = base.options.slides, // Pull in slides array
  451. liveslide = base.$el.find('.activeslide'); // Find active slide
  452. $('.prevslide').removeClass('prevslide');
  453. liveslide.removeClass('activeslide').addClass('prevslide'); // Remove active class & update previous slide
  454. // Get current slide number
  455. vars.current_slide == 0 ? vars.current_slide = base.options.slides.length - 1 : vars.current_slide-- ;
  456. var nextslide = $(base.el+' li:eq('+vars.current_slide+')'),
  457. prevslide = base.$el.find('.prevslide');
  458. // If hybrid mode is on drop quality for transition
  459. if (base.options.performance == 1) base.$el.removeClass('quality').addClass('speed');
  460. /*-----Load Image-----*/
  461. loadSlide = vars.current_slide;
  462. var targetList = base.el+' li:eq('+loadSlide+')';
  463. if (!$(targetList).html()){
  464. // If links should open in new window
  465. var linkTarget = base.options.new_window ? ' target="_blank"' : '';
  466. imageLink = (base.options.slides[loadSlide].url) ? "href='" + base.options.slides[loadSlide].url + "'" : ""; // If link exists, build it
  467. var img = $('<img src="'+base.options.slides[loadSlide].image+'"/>');
  468. img.appendTo(targetList).wrap('<a ' + imageLink + linkTarget + '></a>').parent().parent().addClass('image-loading').css('visibility','hidden');
  469. img.load(function(){
  470. base._origDim($(this));
  471. base.resizeNow();
  472. }); // End Load
  473. };
  474. // Update thumbnails (if enabled)
  475. if (base.options.thumbnail_navigation == 1){
  476. // Load previous thumbnail
  477. //prevThumb = loadSlide;
  478. loadSlide == 0 ? prevThumb = base.options.slides.length - 1 : prevThumb = loadSlide - 1;
  479. $(vars.prev_thumb).html($("<img/>").attr("src", base.options.slides[prevThumb].image));
  480. // Load next thumbnail
  481. vars.current_slide == base.options.slides.length - 1 ? nextThumb = 0 : nextThumb = vars.current_slide + 1;
  482. $(vars.next_thumb).html($("<img/>").attr("src", base.options.slides[nextThumb].image));
  483. }
  484. /*-----End Load Image-----*/
  485. // Call theme function for before slide transition
  486. if( typeof theme != 'undefined' && typeof theme.beforeAnimation == "function" ) theme.beforeAnimation('prev');
  487. //Update slide markers
  488. if (base.options.slide_links){
  489. $('.current-slide').removeClass('current-slide');
  490. $(vars.slide_list +'> li' ).eq(vars.current_slide).addClass('current-slide');
  491. }
  492. nextslide.css('visibility','hidden').addClass('activeslide'); // Update active slide
  493. switch(base.options.transition){
  494. case 0: case 'none': // No transition
  495. nextslide.css('visibility','visible'); vars.in_animation = false; base.afterAnimation();
  496. break;
  497. case 1: case 'fade': // Fade
  498. nextslide.css({opacity : 0, 'visibility': 'visible'}).animate({opacity : 1, avoidTransforms : false}, base.options.transition_speed, function(){ base.afterAnimation(); });
  499. break;
  500. case 2: case 'slideTop': // Slide Top (reverse)
  501. nextslide.css({top : base.$el.height(), 'visibility': 'visible'}).animate({ top:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  502. break;
  503. case 3: case 'slideRight': // Slide Right (reverse)
  504. nextslide.css({left : -base.$el.width(), 'visibility': 'visible'}).animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  505. break;
  506. case 4: case 'slideBottom': // Slide Bottom (reverse)
  507. nextslide.css({top : -base.$el.height(), 'visibility': 'visible'}).animate({ top:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  508. break;
  509. case 5: case 'slideLeft': // Slide Left (reverse)
  510. nextslide.css({left : base.$el.width(), 'visibility': 'visible'}).animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  511. break;
  512. case 6: case 'carouselRight': // Carousel Right (reverse)
  513. nextslide.css({left : -base.$el.width(), 'visibility': 'visible'}).animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  514. liveslide.css({left : 0}).animate({ left: base.$el.width(), avoidTransforms : false}, base.options.transition_speed );
  515. break;
  516. case 7: case 'carouselLeft': // Carousel Left (reverse)
  517. nextslide.css({left : base.$el.width(), 'visibility': 'visible'}).animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  518. liveslide.css({left : 0}).animate({ left: -base.$el.width(), avoidTransforms : false }, base.options.transition_speed );
  519. break;
  520. }
  521. return false;
  522. };
  523. /* Play/Pause Toggle
  524. ----------------------------*/
  525. base.playToggle = function(){
  526. if (vars.in_animation || !api.options.slideshow) return false; // Abort if currently animating
  527. if (vars.is_paused){
  528. vars.is_paused = false;
  529. // Call theme function for play
  530. if( typeof theme != 'undefined' && typeof theme.playToggle == "function" ) theme.playToggle('play');
  531. // Resume slideshow
  532. vars.slideshow_interval = setInterval(base.nextSlide, base.options.slide_interval);
  533. }else{
  534. vars.is_paused = true;
  535. // Call theme function for pause
  536. if( typeof theme != 'undefined' && typeof theme.playToggle == "function" ) theme.playToggle('pause');
  537. // Stop slideshow
  538. clearInterval(vars.slideshow_interval);
  539. }
  540. return false;
  541. };
  542. /* Go to specific slide
  543. ----------------------------*/
  544. base.goTo = function(targetSlide){
  545. if (vars.in_animation || !api.options.slideshow) return false; // Abort if currently animating
  546. var totalSlides = base.options.slides.length;
  547. // If target outside range
  548. if(targetSlide < 0){
  549. targetSlide = totalSlides;
  550. }else if(targetSlide > totalSlides){
  551. targetSlide = 1;
  552. }
  553. targetSlide = totalSlides - targetSlide + 1;
  554. clearInterval(vars.slideshow_interval); // Stop slideshow, prevent buildup
  555. // Call theme function for goTo trigger
  556. if (typeof theme != 'undefined' && typeof theme.goTo == "function" ) theme.goTo();
  557. if (vars.current_slide == totalSlides - targetSlide){
  558. if(!(vars.is_paused)){
  559. vars.slideshow_interval = setInterval(base.nextSlide, base.options.slide_interval);
  560. }
  561. return false;
  562. }
  563. // If ahead of current position
  564. if(totalSlides - targetSlide > vars.current_slide ){
  565. // Adjust for new next slide
  566. vars.current_slide = totalSlides-targetSlide-1;
  567. vars.update_images = 'next';
  568. base._placeSlide(vars.update_images);
  569. //Otherwise it's before current position
  570. }else if(totalSlides - targetSlide < vars.current_slide){
  571. // Adjust for new prev slide
  572. vars.current_slide = totalSlides-targetSlide+1;
  573. vars.update_images = 'prev';
  574. base._placeSlide(vars.update_images);
  575. }
  576. // set active markers
  577. if (base.options.slide_links){
  578. $(vars.slide_list +'> .current-slide').removeClass('current-slide');
  579. $(vars.slide_list +'> li').eq((totalSlides-targetSlide)).addClass('current-slide');
  580. }
  581. if (base.options.thumb_links){
  582. $(vars.thumb_list +'> .current-thumb').removeClass('current-thumb');
  583. $(vars.thumb_list +'> li').eq((totalSlides-targetSlide)).addClass('current-thumb');
  584. }
  585. };
  586. /* Place Slide
  587. ----------------------------*/
  588. base._placeSlide = function(place){
  589. // If links should open in new window
  590. var linkTarget = base.options.new_window ? ' target="_blank"' : '';
  591. loadSlide = false;
  592. if (place == 'next'){
  593. vars.current_slide == base.options.slides.length - 1 ? loadSlide = 0 : loadSlide = vars.current_slide + 1; // Determine next slide
  594. var targetList = base.el+' li:eq('+loadSlide+')';
  595. if (!$(targetList).html()){
  596. // If links should open in new window
  597. var linkTarget = base.options.new_window ? ' target="_blank"' : '';
  598. imageLink = (base.options.slides[loadSlide].url) ? "href='" + base.options.slides[loadSlide].url + "'" : ""; // If link exists, build it
  599. var img = $('<img src="'+base.options.slides[loadSlide].image+'"/>');
  600. img.appendTo(targetList).wrap('<a ' + imageLink + linkTarget + '></a>').parent().parent().addClass('image-loading').css('visibility','hidden');
  601. img.load(function(){
  602. base._origDim($(this));
  603. base.resizeNow();
  604. }); // End Load
  605. };
  606. base.nextSlide();
  607. }else if (place == 'prev'){
  608. vars.current_slide - 1 < 0 ? loadSlide = base.options.slides.length - 1 : loadSlide = vars.current_slide - 1; // Determine next slide
  609. var targetList = base.el+' li:eq('+loadSlide+')';
  610. if (!$(targetList).html()){
  611. // If links should open in new window
  612. var linkTarget = base.options.new_window ? ' target="_blank"' : '';
  613. imageLink = (base.options.slides[loadSlide].url) ? "href='" + base.options.slides[loadSlide].url + "'" : ""; // If link exists, build it
  614. var img = $('<img src="'+base.options.slides[loadSlide].image+'"/>');
  615. img.appendTo(targetList).wrap('<a ' + imageLink + linkTarget + '></a>').parent().parent().addClass('image-loading').css('visibility','hidden');
  616. img.load(function(){
  617. base._origDim($(this));
  618. base.resizeNow();
  619. }); // End Load
  620. };
  621. base.prevSlide();
  622. }
  623. };
  624. /* Get Original Dimensions
  625. ----------------------------*/
  626. base._origDim = function(targetSlide){
  627. targetSlide.data('origWidth', targetSlide.width()).data('origHeight', targetSlide.height());
  628. };
  629. /* After Slide Animation
  630. ----------------------------*/
  631. base.afterAnimation = function(){
  632. // If hybrid mode is on swap back to higher image quality
  633. if (base.options.performance == 1){
  634. base.$el.removeClass('speed').addClass('quality');
  635. }
  636. // Update previous slide
  637. if (vars.update_images){
  638. vars.current_slide - 1 < 0 ? setPrev = base.options.slides.length - 1 : setPrev = vars.current_slide-1;
  639. vars.update_images = false;
  640. $('.prevslide').removeClass('prevslide');
  641. $(base.el+' li:eq('+setPrev+')').addClass('prevslide');
  642. }
  643. vars.in_animation = false;
  644. // Resume slideshow
  645. if (!vars.is_paused && base.options.slideshow){
  646. vars.slideshow_interval = setInterval(base.nextSlide, base.options.slide_interval);
  647. if (base.options.stop_loop && vars.current_slide == base.options.slides.length - 1 ) base.playToggle();
  648. }
  649. // Call theme function for after slide transition
  650. if (typeof theme != 'undefined' && typeof theme.afterAnimation == "function" ) theme.afterAnimation();
  651. return false;
  652. };
  653. base.getField = function(field){
  654. return base.options.slides[vars.current_slide][field];
  655. };
  656. // Make it go!
  657. base.init();
  658. };
  659. /* Global Variables
  660. ----------------------------*/
  661. $.supersized.vars = {
  662. // Elements
  663. thumb_tray : '#thumb-tray', // Thumbnail tray
  664. thumb_list : '#thumb-list', // Thumbnail list
  665. slide_list : '#slide-list', // Slide link list
  666. // Internal variables
  667. current_slide : 0, // Current slide number
  668. in_animation : false, // Prevents animations from stacking
  669. is_paused : false, // Tracks paused on/off
  670. hover_pause : false, // If slideshow is paused from hover
  671. slideshow_interval : false, // Stores slideshow timer
  672. update_images : false, // Trigger to update images after slide jump
  673. options : {} // Stores assembled options list
  674. };
  675. /* Default Options
  676. ----------------------------*/
  677. $.supersized.defaultOptions = {
  678. // Functionality
  679. slideshow : 1, // Slideshow on/off
  680. autoplay : 1, // Slideshow starts playing automatically
  681. start_slide : 1, // Start slide (0 is random)
  682. stop_loop : 0, // Stops slideshow on last slide
  683. random : 0, // Randomize slide order (Ignores start slide)
  684. slide_interval : 5000, // Length between transitions
  685. transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
  686. transition_speed : 750, // Speed of transition
  687. new_window : 1, // Image links open in new window/tab
  688. pause_hover : 0, // Pause slideshow on hover
  689. keyboard_nav : 1, // Keyboard navigation on/off
  690. performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
  691. image_protect : 1, // Disables image dragging and right click with Javascript
  692. // Size & Position
  693. fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
  694. fit_landscape : 0, // Landscape images will not exceed browser width
  695. fit_portrait : 1, // Portrait images will not exceed browser height
  696. min_width : 0, // Min width allowed (in pixels)
  697. min_height : 0, // Min height allowed (in pixels)
  698. horizontal_center : 1, // Horizontally center background
  699. vertical_center : 1, // Vertically center background
  700. // Components
  701. slide_links : 1, // Individual links for each slide (Options: false, 'num', 'name', 'blank')
  702. thumb_links : 1, // Individual thumb links for each slide
  703. thumbnail_navigation : 0 // Thumbnail navigation
  704. };
  705. $.fn.supersized = function(options){
  706. return this.each(function(){
  707. (new $.supersized(options));
  708. });
  709. };
  710. })(jQuery);