API tools faq
paste
Advertisement
nefi_c

Supersize modification Christianto @javascriptquestions.com

nefi_c
Dec 8th, 2012
1,181
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
jQuery 35.02 KB | None | 0 0
raw download clone embed print report
  1. /*
  2.  
  3.     Supersized - Fullscreen Slideshow jQuery Plugin
  4.     Version : 3.2.7
  5.     Site    : www.buildinternet.com/project/supersized
  6.     Author  : Sam Dunn
  7.     Company : One Mighty Roar (www.onemightyroar.com)
  8.     License : MIT License / GPL License
  9.  
  10. */
  11.  
  12. (function($){
  13.  
  14.     /* Place Supersized Elements
  15.     ----------------------------*/
  16.     $(document).ready(function() {
  17.         $('body').append('<div id="supersized-loader"></div><ul id="supersized"></ul>');
  18.     });
  19.  
  20.  
  21.     $.supersized = function(options){
  22.  
  23.         /* Variables
  24.     ----------------------------*/
  25.         var el = '#supersized',
  26.             base = this,
  27.             uniqueCounter = 0;
  28.             // Access to jQuery and DOM versions of element
  29.             base.$el = $(el);
  30.             base.el = el;
  31.             vars = $.supersized.vars;
  32.             // Add a reverse reference to the DOM object
  33.             base.$el.data("supersized", base);
  34.             api = base.$el.data('supersized');
  35.  
  36.  
  37.         base.init = function(){
  38.             // Combine options and vars
  39.             $.supersized.vars = $.extend($.supersized.vars, $.supersized.themeVars);
  40.             $.supersized.vars.options = $.extend({},$.supersized.defaultOptions, $.supersized.themeOptions, options);
  41.             base.options = $.supersized.vars.options;
  42.  
  43.             base._build();
  44.         };
  45.  
  46.  
  47.         /* Build Elements
  48.         ----------------------------*/
  49.         base._slideCreator = function (options){
  50.  
  51.             // If links should open in new window
  52.             var linkTarget = base.options.new_window ? ' target="_blank"' : '';
  53.  
  54.             var slideData = options.slideData,
  55.                 targetList = options.targetList,
  56.                 loadedCallback = options.loadedCallback;
  57.  
  58.             targetList.attr("data-slidetype",slideData.type);
  59.  
  60.            
  61.             switch(slideData.type){
  62.  
  63.                 case 'VIMEO':
  64.                     if(!$f) alert("You must include froogaloops.js to use vimeo slides");
  65.  
  66.                     var d = new Date();
  67.                     var uid = "vimeo-"+ d.getTime() + '_' + uniqueCounter++;
  68.                     var html = '<iframe src="http://player.vimeo.com/video/'+slideData.video_id+'?api=1&player_id=' + uid + '"';
  69.                     html += ' id="'+uid+'"';
  70.                     html += ' width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
  71.                     targetList.html(html);
  72.                     var iframe=targetList.find('iframe')[0];
  73.                     $f(iframe).addEvent('ready', function() {
  74.                         console.log("ready called");
  75.                         base.resizeNow();   // Resize background image
  76.                         if(loadedCallback) loadedCallback($(this));
  77.                     });
  78.                 break;
  79.                
  80.                 case 'YOUTUBE':
  81.                     var d = new Date();
  82.                     var html = '<iframe width="100%" height="100%" src="http://www.youtube.com/embed/' + slideData.video_id + '?wmode=transparent" frameborder="0" allowfullscreen></iframe>';
  83.                     targetList.html(html);
  84.                     if(loadedCallback) loadedCallback();
  85.                 break;
  86.                
  87.                 case 'IMAGE':
  88.                 default:
  89.                     var slideLink = (slideData.url) ? "href='" + slideData.url + "'" : "";
  90.  
  91.                     var img = $('<img src="'+slideData.image+'"/>');
  92.                     img.appendTo(targetList).wrap('<a ' + slideLink + linkTarget + '></a>');
  93.  
  94.                     img.load(function(){
  95.                         base._origDim($(this));
  96.                         base.resizeNow();   // Resize background image
  97.                         if(loadedCallback) loadedCallback($(this)); //
  98.                     }); // End  IMAGE
  99.                 break;
  100.  
  101.             }
  102.         }
  103.  
  104.         base._build = function(){
  105.             // Add in slide markers
  106.             var thisSlide = 0,
  107.             slideSet = '',
  108.             markers = '',
  109.             markerContent,
  110.             thumbMarkers = '',
  111.             thumbImage;
  112.  
  113.             while(thisSlide <= base.options.slides.length-1){
  114.                 //Determine slide link content
  115.                 switch(base.options.slide_links){
  116.                     case 'num':
  117.                         markerContent = thisSlide;
  118.                         break;
  119.                     case 'name':
  120.                         markerContent = base.options.slides[thisSlide].title;
  121.                         break;
  122.                     case 'blank':
  123.                         markerContent = '';
  124.                         break;
  125.                 }
  126.  
  127.                 slideSet = slideSet+'<li class="slide-'+thisSlide+'"></li>';
  128.  
  129.                 if(thisSlide == base.options.start_slide-1){
  130.                     // Slide links
  131.                     if (base.options.slide_links)markers = markers+'<li class="slide-link-'+thisSlide+' current-slide"><a>'+markerContent+'</a></li>';
  132.                     // Slide Thumbnail Links
  133.                     if (base.options.thumb_links){
  134.                         base.options.slides[thisSlide].thumb ? thumbImage = base.options.slides[thisSlide].thumb : thumbImage = base.options.slides[thisSlide].image;
  135.                         thumbMarkers = thumbMarkers+'<li class="thumb'+thisSlide+' current-thumb"><img src="'+thumbImage+'"/></li>';
  136.                     };
  137.                 }else{
  138.                     // Slide links
  139.                     if (base.options.slide_links) markers = markers+'<li class="slide-link-'+thisSlide+'" ><a>'+markerContent+'</a></li>';
  140.                     // Slide Thumbnail Links
  141.                     if (base.options.thumb_links){
  142.                         base.options.slides[thisSlide].thumb ? thumbImage = base.options.slides[thisSlide].thumb : thumbImage = base.options.slides[thisSlide].image;
  143.                         thumbMarkers = thumbMarkers+'<li class="thumb'+thisSlide+'"><img src="'+thumbImage+'"/></li>';
  144.                     };
  145.                 }
  146.                 thisSlide++;
  147.             }
  148.  
  149.             if (base.options.slide_links) $(vars.slide_list).html(markers);
  150.             if (base.options.thumb_links && vars.thumb_tray.length){
  151.                 $(vars.thumb_tray).append('<ul id="'+vars.thumb_list.replace('#','')+'">'+thumbMarkers+'</ul>');
  152.             }
  153.  
  154.             $(base.el).append(slideSet);
  155.  
  156.             // Add in thumbnails
  157.             if (base.options.thumbnail_navigation){
  158.                 // Load previous thumbnail
  159.                 vars.current_slide - 1 < 0  ? prevThumb = base.options.slides.length - 1 : prevThumb = vars.current_slide - 1;
  160.                 $(vars.prev_thumb).show().html($("<img/>").attr("src", base.options.slides[prevThumb].image));
  161.  
  162.                 // Load next thumbnail
  163.                 vars.current_slide == base.options.slides.length - 1 ? nextThumb = 0 : nextThumb = vars.current_slide + 1;
  164.                 $(vars.next_thumb).show().html($("<img/>").attr("src", base.options.slides[nextThumb].image));
  165.             }
  166.  
  167.             base._start(); // Get things started
  168.         };
  169.  
  170.  
  171.         /* Initialize
  172.         ----------------------------*/
  173.         base._start = function(){
  174.  
  175.             // Determine if starting slide random
  176.             if (base.options.start_slide){
  177.                 vars.current_slide = base.options.start_slide - 1;
  178.             }else{
  179.                 vars.current_slide = Math.floor(Math.random()*base.options.slides.length);  // Generate random slide number
  180.             }
  181.  
  182.             // Set slideshow quality (Supported only in FF and IE, no Webkit)
  183.             if (base.options.performance == 3){
  184.                 base.$el.addClass('speed');         // Faster transitions
  185.             } else if ((base.options.performance == 1) || (base.options.performance == 2)){
  186.                 base.$el.addClass('quality');   // Higher image quality
  187.             }
  188.  
  189.             // Shuffle slide order if needed
  190.             if (base.options.random){
  191.                 arr = base.options.slides;
  192.                 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)
  193.                     base.options.slides = arr;
  194.             }
  195.  
  196.             /*-----Load initial set of images-----*/
  197.  
  198.             if (base.options.slides.length > 1){
  199.                 if(base.options.slides.length > 2){
  200.                     // Set previous image
  201.                     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
  202.  
  203.                     var prevTargetList = $(base.el+' li:eq('+loadPrev+')').addClass('image-loading prevslide');
  204.                     base._slideCreator({
  205.                         slideData:base.options.slides[loadPrev],
  206.                         targetList : prevTargetList,
  207.                         loadedCallback : null
  208.                     });
  209.                 }
  210.             } else {
  211.                 // Slideshow turned off if there is only one slide
  212.                 base.options.slideshow = 0;
  213.             }
  214.  
  215.             //  Hide elements to be faded in
  216.             base.$el.css('visibility','hidden');
  217.             $('.load-item').hide();
  218.            
  219.             // Set current image
  220.             var currentTargetList = $(base.el+' li:eq('+vars.current_slide+')').addClass('image-loading activeslide');
  221.             base._slideCreator({
  222.                 slideData:base.options.slides[vars.current_slide],
  223.                 targetList : currentTargetList,
  224.                 loadedCallback :function(imgElm){
  225.                     base.launch();
  226.                     if( typeof theme != 'undefined' && typeof theme._init == "function" ) theme._init();    // Load Theme
  227.                 }
  228.             });
  229.  
  230.             if (base.options.slides.length > 1){
  231.  
  232.                 // Set next image
  233.                 vars.current_slide == base.options.slides.length - 1 ? loadNext = 0 : loadNext = vars.current_slide + 1;    // If slide is last, load first slide as next
  234.  
  235.                 var nextTargetList = $(base.el+' li:eq('+loadNext+')').addClass('image-loading');
  236.                 base._slideCreator({
  237.                     slideData:base.options.slides[loadNext],
  238.                     targetList : nextTargetList,
  239.                     loadedCallback :null
  240.                 });
  241.  
  242.             }
  243.             /*-----End load initial images-----*/
  244.  
  245.             };
  246.  
  247.  
  248.         /* Launch Supersized
  249.         ----------------------------*/
  250.         base.launch = function(){
  251.  
  252.             base.$el.css('visibility','visible');
  253.             $('#supersized-loader').remove();       //Hide loading animation
  254.            
  255.             // Call theme function for before slide transition
  256.             if( typeof theme != 'undefined' && typeof theme.beforeAnimation == "function" ) theme.beforeAnimation('next');
  257.             $('.load-item').show();
  258.  
  259.             // Keyboard Navigation
  260.             if (base.options.keyboard_nav){
  261.                 $(document.documentElement).keyup(function (event) {
  262.  
  263.                     if(vars.in_animation) return false;     // Abort if currently animating
  264.  
  265.                     // Left Arrow or Down Arrow
  266.                     if ((event.keyCode == 37) || (event.keyCode == 40)) {
  267.                         clearInterval(vars.slideshow_interval); // Stop slideshow, prevent buildup
  268.                         base.prevSlide();
  269.  
  270.                     // Right Arrow or Up Arrow
  271.                     } else if ((event.keyCode == 39) || (event.keyCode == 38)) {
  272.                         clearInterval(vars.slideshow_interval); // Stop slideshow, prevent buildup
  273.                         base.nextSlide();
  274.  
  275.                     // Spacebar
  276.                     } else if (event.keyCode == 32 && !vars.hover_pause) {
  277.                         clearInterval(vars.slideshow_interval); // Stop slideshow, prevent buildup
  278.                         base.playToggle();
  279.                     }
  280.  
  281.                 });
  282.             }
  283.  
  284.             // Pause when hover on image
  285.             if (base.options.slideshow && base.options.pause_hover){
  286.                 $(base.el).hover(function() {
  287.                     if(vars.in_animation) return false;     // Abort if currently animating
  288.                             vars.hover_pause = true;    // Mark slideshow paused from hover
  289.                             if(!vars.is_paused){
  290.                                 vars.hover_pause = 'resume';    // It needs to resume afterwards
  291.                                 base.playToggle();
  292.                             }
  293.                     }, function() {
  294.                     if(vars.hover_pause == 'resume'){
  295.                         base.playToggle();
  296.                         vars.hover_pause = false;
  297.                     }
  298.                     });
  299.             }
  300.  
  301.             if (base.options.slide_links){
  302.                 // Slide marker clicked
  303.                 $(vars.slide_list+'> li').click(function(){
  304.  
  305.                     index = $(vars.slide_list+'> li').index(this);
  306.                     targetSlide = index + 1;
  307.  
  308.                     base.goTo(targetSlide);
  309.                     return false;
  310.  
  311.                 });
  312.             }
  313.  
  314.             // Thumb marker clicked
  315.             if (base.options.thumb_links){
  316.                 $(vars.thumb_list+'> li').click(function(){
  317.  
  318.                     index = $(vars.thumb_list+'> li').index(this);
  319.                     targetSlide = index + 1;
  320.  
  321.                     api.goTo(targetSlide);
  322.                     return false;
  323.  
  324.                 });
  325.             }
  326.  
  327.             // Start slideshow if enabled
  328.             if (base.options.slideshow && base.options.slides.length > 1){
  329.  
  330.                     // Start slideshow if autoplay enabled
  331.                     if (base.options.autoplay && base.options.slides.length > 1){
  332.                         vars.slideshow_interval = setInterval(base.nextSlide, base.options.slide_interval); // Initiate slide interval
  333.                 }else{
  334.                     vars.is_paused = true;  // Mark as paused
  335.                 }
  336.  
  337.                 //Prevent navigation items from being dragged
  338.                 $('.load-item img').bind("contextmenu mousedown",function(){
  339.                     return false;
  340.                 });
  341.  
  342.             }
  343.  
  344.             // Adjust image when browser is resized
  345.             $(window).resize(function(){
  346.                     base.resizeNow();
  347.             });
  348.  
  349.         };
  350.  
  351.  
  352.             /* Resize Images
  353.         ----------------------------*/
  354.         base.resizeNow = function(){
  355.  
  356.             return base.$el.each(function() {
  357.                     //  Resize each image seperately
  358.                     $('img', base.el).each(function(){
  359.  
  360.                     thisSlide = $(this);
  361.                     var ratio = (thisSlide.data('origHeight')/thisSlide.data('origWidth')).toFixed(2);  // Define image ratio
  362.  
  363.                     // Gather browser size
  364.                     var browserwidth = base.$el.width(),
  365.                         browserheight = base.$el.height(),
  366.                         offset;
  367.  
  368.                     /*-----Resize Image-----*/
  369.                     if (base.options.fit_always){   // Fit always is enabled
  370.                         if ((browserheight/browserwidth) > ratio){
  371.                             resizeWidth();
  372.                         } else {
  373.                             resizeHeight();
  374.                         }
  375.                     }else{  // Normal Resize
  376.                         if ((browserheight <= base.options.min_height) && (browserwidth <= base.options.min_width)){    // If window smaller than minimum width and height
  377.  
  378.                             if ((browserheight/browserwidth) > ratio){
  379.                                 base.options.fit_landscape && ratio < 1 ? resizeWidth(true) : resizeHeight(true);   // If landscapes are set to fit
  380.                             } else {
  381.                                 base.options.fit_portrait && ratio >= 1 ? resizeHeight(true) : resizeWidth(true);       // If portraits are set to fit
  382.                             }
  383.  
  384.                         } else if (browserwidth <= base.options.min_width){     // If window only smaller than minimum width
  385.  
  386.                             if ((browserheight/browserwidth) > ratio){
  387.                                 base.options.fit_landscape && ratio < 1 ? resizeWidth(true) : resizeHeight();   // If landscapes are set to fit
  388.                             } else {
  389.                                 base.options.fit_portrait && ratio >= 1 ? resizeHeight() : resizeWidth(true);       // If portraits are set to fit
  390.                             }
  391.  
  392.                         } else if (browserheight <= base.options.min_height){   // If window only smaller than minimum height
  393.  
  394.                             if ((browserheight/browserwidth) > ratio){
  395.                                 base.options.fit_landscape && ratio < 1 ? resizeWidth() : resizeHeight(true);   // If landscapes are set to fit
  396.                             } else {
  397.                                 base.options.fit_portrait && ratio >= 1 ? resizeHeight(true) : resizeWidth();       // If portraits are set to fit
  398.                             }
  399.  
  400.                         } else {    // If larger than minimums
  401.  
  402.                             if ((browserheight/browserwidth) > ratio){
  403.                                 base.options.fit_landscape && ratio < 1 ? resizeWidth() : resizeHeight();   // If landscapes are set to fit
  404.                             } else {
  405.                                 base.options.fit_portrait && ratio >= 1 ? resizeHeight() : resizeWidth();       // If portraits are set to fit
  406.                             }
  407.  
  408.                         }
  409.                     }
  410.                     /*-----End Image Resize-----*/
  411.  
  412.  
  413.                     /*-----Resize Functions-----*/
  414.  
  415.                     function resizeWidth(minimum){
  416.                         if (minimum){   // If minimum height needs to be considered
  417.                             if(thisSlide.width() < browserwidth || thisSlide.width() < base.options.min_width ){
  418.                                 if (thisSlide.width() * ratio >= base.options.min_height){
  419.                                     thisSlide.width(base.options.min_width);
  420.                                         thisSlide.height(thisSlide.width() * ratio);
  421.                                     }else{
  422.                                         resizeHeight();
  423.                                     }
  424.                                 }
  425.                         }else{
  426.                             if (base.options.min_height >= browserheight && !base.options.fit_landscape){   // If minimum height needs to be considered
  427.                                 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
  428.                                     thisSlide.width(browserwidth);
  429.                                     thisSlide.height(browserwidth * ratio);
  430.                                 } else if (ratio > 1){      // Else the image is portrait
  431.                                     thisSlide.height(base.options.min_height);
  432.                                     thisSlide.width(thisSlide.height() / ratio);
  433.                                 } else if (thisSlide.width() < browserwidth) {
  434.                                     thisSlide.width(browserwidth);
  435.                                         thisSlide.height(thisSlide.width() * ratio);
  436.                                 }
  437.                             }else{  // Otherwise, resize as normal
  438.                                 thisSlide.width(browserwidth);
  439.                                 thisSlide.height(browserwidth * ratio);
  440.                             }
  441.                         }
  442.                     };
  443.  
  444.                     function resizeHeight(minimum){
  445.                         if (minimum){   // If minimum height needs to be considered
  446.                             if(thisSlide.height() < browserheight){
  447.                                 if (thisSlide.height() / ratio >= base.options.min_width){
  448.                                     thisSlide.height(base.options.min_height);
  449.                                     thisSlide.width(thisSlide.height() / ratio);
  450.                                 }else{
  451.                                     resizeWidth(true);
  452.                                 }
  453.                             }
  454.                         }else{  // Otherwise, resized as normal
  455.                             if (base.options.min_width >= browserwidth){    // If minimum width needs to be considered
  456.                                 if (browserheight / ratio >= base.options.min_width || ratio > 1){  // If resizing would push below minimum width or image is a portrait
  457.                                     thisSlide.height(browserheight);
  458.                                     thisSlide.width(browserheight / ratio);
  459.                                 } else if (ratio <= 1){     // Else the image is landscape
  460.                                     thisSlide.width(base.options.min_width);
  461.                                         thisSlide.height(thisSlide.width() * ratio);
  462.                                 }
  463.                             }else{  // Otherwise, resize as normal
  464.                                 thisSlide.height(browserheight);
  465.                                 thisSlide.width(browserheight / ratio);
  466.                             }
  467.                         }
  468.                     };
  469.  
  470.                     /*-----End Resize Functions-----*/
  471.  
  472.                     if (thisSlide.parents('li').hasClass('image-loading')){
  473.                         $('.image-loading').removeClass('image-loading');
  474.                     }
  475.  
  476.                     // Horizontally Center
  477.                     if (base.options.horizontal_center){
  478.                         $(this).css('left', (browserwidth - $(this).width())/2);
  479.                     }
  480.  
  481.                     // Vertically Center
  482.                     if (base.options.vertical_center){
  483.                         $(this).css('top', (browserheight - $(this).height())/2);
  484.                     }
  485.  
  486.                 });
  487.  
  488.                 // Basic image drag and right click protection
  489.                 if (base.options.image_protect){
  490.  
  491.                     $('img', base.el).bind("contextmenu mousedown",function(){
  492.                         return false;
  493.                     });
  494.  
  495.                 }
  496.  
  497.                 return false;
  498.  
  499.             });
  500.  
  501.         };
  502.  
  503.  
  504.                 /* Next Slide
  505.         ----------------------------*/
  506.         base.nextSlide = function(){
  507.  
  508.             if(vars.in_animation || !api.options.slideshow) return false;       // Abort if currently animating
  509.                 else vars.in_animation = true;      // Otherwise set animation marker
  510.  
  511.                 clearInterval(vars.slideshow_interval); // Stop slideshow
  512.  
  513.                 var slides = base.options.slides,                   // Pull in slides array
  514.                 liveslide = base.$el.find('.activeslide');      // Find active slide
  515.                 $('.prevslide').removeClass('prevslide');
  516.                 liveslide.removeClass('activeslide').addClass('prevslide'); // Remove active class & update previous slide
  517.  
  518.                 //save current_slide to last slide
  519.                 vars.last_slide = vars.current_slide;
  520.  
  521.                 // Get the slide number of new slide
  522.                 vars.current_slide + 1 == base.options.slides.length ? vars.current_slide = 0 : vars.current_slide++;
  523.  
  524.                 var nextslide = $(base.el+' li:eq('+vars.current_slide+')'),
  525.                     prevslide = base.$el.find('.prevslide');
  526.  
  527.             // If hybrid mode is on drop quality for transition
  528.             if (base.options.performance == 1) base.$el.removeClass('quality').addClass('speed');
  529.  
  530.  
  531.             /*-----Load Image-----*/
  532.  
  533.             loadSlide = false;
  534.  
  535.             vars.current_slide == base.options.slides.length - 1 ? loadSlide = 0 : loadSlide = vars.current_slide + 1;  // Determine next slide
  536.  
  537.             var targetList = $(base.el+' li:eq('+loadSlide+')');
  538.             if (!targetList.html()){
  539.                 targetList.addClass('image-loading').css('visibility','hidden');
  540.                 base._slideCreator({
  541.                     slideData:base.options.slides[loadSlide],
  542.                     targetList : targetList,
  543.                     loadedCallback :null
  544.                 });
  545.  
  546.             };
  547.  
  548.             // Update thumbnails (if enabled)
  549.             if (base.options.thumbnail_navigation == 1){
  550.  
  551.                 // Load previous thumbnail
  552.                 vars.current_slide - 1 < 0  ? prevThumb = base.options.slides.length - 1 : prevThumb = vars.current_slide - 1;
  553.                 $(vars.prev_thumb).html($("<img/>").attr("src", base.options.slides[prevThumb].image));
  554.  
  555.                 // Load next thumbnail
  556.                 nextThumb = loadSlide;
  557.                 $(vars.next_thumb).html($("<img/>").attr("src", base.options.slides[nextThumb].image));
  558.  
  559.             }
  560.  
  561.  
  562.  
  563.             /*-----End Load Image-----*/
  564.  
  565.  
  566.             // Call theme function for before slide transition
  567.             if( typeof theme != 'undefined' && typeof theme.beforeAnimation == "function" ) theme.beforeAnimation('next');
  568.  
  569.             //Update slide markers
  570.             if (base.options.slide_links){
  571.                 $('.current-slide').removeClass('current-slide');
  572.                 $(vars.slide_list +'> li' ).eq(vars.current_slide).addClass('current-slide');
  573.             }
  574.  
  575.                 nextslide.css('visibility','hidden').addClass('activeslide');   // Update active slide
  576.  
  577.                 switch(base.options.transition){
  578.                     case 0: case 'none':    // No transition
  579.                             nextslide.css('visibility','visible'); vars.in_animation = false; base.afterAnimation();
  580.                             break;
  581.                     case 1: case 'fade':    // Fade
  582.                             nextslide.animate({opacity : 0},0).css('visibility','visible').animate({opacity : 1, avoidTransforms : false}, base.options.transition_speed, function(){ base.afterAnimation(); });
  583.                             break;
  584.                     case 2: case 'slideTop':    // Slide Top
  585.                             nextslide.animate({top : -base.$el.height()}, 0 ).css('visibility','visible').animate({ top:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  586.                             break;
  587.                     case 3: case 'slideRight':  // Slide Right
  588.                         nextslide.animate({left : base.$el.width()}, 0 ).css('visibility','visible').animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  589.                         break;
  590.                     case 4: case 'slideBottom': // Slide Bottom
  591.                         nextslide.animate({top : base.$el.height()}, 0 ).css('visibility','visible').animate({ top:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  592.                         break;
  593.                     case 5: case 'slideLeft':  // Slide Left
  594.                         nextslide.animate({left : -base.$el.width()}, 0 ).css('visibility','visible').animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  595.                         break;
  596.                     case 6: case 'carouselRight':   // Carousel Right
  597.                         nextslide.animate({left : base.$el.width()}, 0 ).css('visibility','visible').animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  598.                     liveslide.animate({ left: -base.$el.width(), avoidTransforms : false }, base.options.transition_speed );
  599.                         break;
  600.                     case 7: case 'carouselLeft':   // Carousel Left
  601.                         nextslide.animate({left : -base.$el.width()}, 0 ).css('visibility','visible').animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  602.                     liveslide.animate({ left: base.$el.width(), avoidTransforms : false }, base.options.transition_speed );
  603.                         break;
  604.                 }
  605.                 return false;
  606.         };
  607.  
  608.  
  609.         /* Previous Slide
  610.         ----------------------------*/
  611.         base.prevSlide = function(){
  612.  
  613.             if(vars.in_animation || !api.options.slideshow) return false;       // Abort if currently animating
  614.                 else vars.in_animation = true;      // Otherwise set animation marker
  615.  
  616.             clearInterval(vars.slideshow_interval); // Stop slideshow
  617.  
  618.             var slides = base.options.slides,                   // Pull in slides array
  619.             liveslide = base.$el.find('.activeslide');      // Find active slide
  620.             $('.prevslide').removeClass('prevslide');
  621.             liveslide.removeClass('activeslide').addClass('prevslide');     // Remove active class & update previous slide
  622.  
  623.             //save current_slide to last slide
  624.             vars.last_slide = vars.current_slide;
  625.  
  626.             // Get current slide number
  627.             vars.current_slide == 0 ?  vars.current_slide = base.options.slides.length - 1 : vars.current_slide-- ;
  628.  
  629.             var nextslide =  $(base.el+' li:eq('+vars.current_slide+')'),
  630.                 prevslide =  base.$el.find('.prevslide');
  631.  
  632.             // If hybrid mode is on drop quality for transition
  633.             if (base.options.performance == 1) base.$el.removeClass('quality').addClass('speed');
  634.  
  635.  
  636.             /*-----Load Image-----*/
  637.  
  638.             loadSlide = vars.current_slide;
  639.  
  640.             var targetList = $(base.el+' li:eq('+loadSlide+')');
  641.             if (!targetList.html()){
  642.  
  643.                 targetList.addClass('image-loading').css('visibility','hidden');
  644.  
  645.                 base._slideCreator({
  646.                     slideData:base.options.slides[loadSlide],
  647.                     targetList : targetList,
  648.                     loadedCallback :null
  649.                 });
  650.  
  651.             };
  652.  
  653.             // Update thumbnails (if enabled)
  654.             if (base.options.thumbnail_navigation == 1){
  655.  
  656.                 // Load previous thumbnail
  657.                 //prevThumb = loadSlide;
  658.                 loadSlide == 0 ? prevThumb = base.options.slides.length - 1 : prevThumb = loadSlide - 1;
  659.                 $(vars.prev_thumb).html($("<img/>").attr("src", base.options.slides[prevThumb].image));
  660.  
  661.                 // Load next thumbnail
  662.                 vars.current_slide == base.options.slides.length - 1 ? nextThumb = 0 : nextThumb = vars.current_slide + 1;
  663.                 $(vars.next_thumb).html($("<img/>").attr("src", base.options.slides[nextThumb].image));
  664.             }
  665.  
  666.             /*-----End Load Image-----*/
  667.  
  668.  
  669.             // Call theme function for before slide transition
  670.             if( typeof theme != 'undefined' && typeof theme.beforeAnimation == "function" ) theme.beforeAnimation('prev');
  671.  
  672.             //Update slide markers
  673.             if (base.options.slide_links){
  674.                 $('.current-slide').removeClass('current-slide');
  675.                 $(vars.slide_list +'> li' ).eq(vars.current_slide).addClass('current-slide');
  676.             }
  677.  
  678.                 nextslide.css('visibility','hidden').addClass('activeslide');   // Update active slide
  679.  
  680.                 switch(base.options.transition){
  681.                     case 0: case 'none':    // No transition
  682.                             nextslide.css('visibility','visible'); vars.in_animation = false; base.afterAnimation();
  683.                             break;
  684.                     case 1: case 'fade':    // Fade
  685.                             nextslide.animate({opacity : 0},0).css('visibility','visible').animate({opacity : 1, avoidTransforms : false}, base.options.transition_speed, function(){ base.afterAnimation(); });
  686.                             break;
  687.                     case 2: case 'slideTop':    // Slide Top (reverse)
  688.                             nextslide.animate({top : base.$el.height()}, 0 ).css('visibility','visible').animate({ top:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  689.                             break;
  690.                     case 3: case 'slideRight':  // Slide Right (reverse)
  691.                         nextslide.animate({left : -base.$el.width()}, 0 ).css('visibility','visible').animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  692.                         break;
  693.                     case 4: case 'slideBottom': // Slide Bottom (reverse)
  694.                         nextslide.animate({top : -base.$el.height()}, 0 ).css('visibility','visible').animate({ top:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  695.                         break;
  696.                     case 5: case 'slideLeft':  // Slide Left (reverse)
  697.                         nextslide.animate({left : base.$el.width()}, 0 ).css('visibility','visible').animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  698.                         break;
  699.                     case 6: case 'carouselRight':   // Carousel Right (reverse)
  700.                         nextslide.animate({left : -base.$el.width()}, 0 ).css('visibility','visible').animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  701.                     liveslide.animate({left : 0}, 0 ).animate({ left: base.$el.width(), avoidTransforms : false}, base.options.transition_speed );
  702.                         break;
  703.                     case 7: case 'carouselLeft':   // Carousel Left (reverse)
  704.                         nextslide.animate({left : base.$el.width()}, 0 ).css('visibility','visible').animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); });
  705.                     liveslide.animate({left : 0}, 0 ).animate({ left: -base.$el.width(), avoidTransforms : false }, base.options.transition_speed );
  706.                         break;
  707.                 }
  708.                 return false;
  709.         };
  710.  
  711.  
  712.         /* Play/Pause Toggle
  713.         ----------------------------*/
  714.         base.playToggle = function(){
  715.  
  716.             if (vars.in_animation || !api.options.slideshow) return false;      // Abort if currently animating
  717.  
  718.             if (vars.is_paused){
  719.  
  720.                 vars.is_paused = false;
  721.  
  722.                 // Call theme function for play
  723.                 if( typeof theme != 'undefined' && typeof theme.playToggle == "function" ) theme.playToggle('play');
  724.  
  725.                 // Resume slideshow
  726.                         vars.slideshow_interval = setInterval(base.nextSlide, base.options.slide_interval);
  727.  
  728.                     }else{
  729.  
  730.                         vars.is_paused = true;
  731.  
  732.                         // Call theme function for pause
  733.                         if( typeof theme != 'undefined' && typeof theme.playToggle == "function" ) theme.playToggle('pause');
  734.  
  735.                         // Stop slideshow
  736.                         clearInterval(vars.slideshow_interval);
  737.  
  738.                     }
  739.  
  740.                 return false;
  741.  
  742.             };
  743.  
  744.  
  745.             /* Go to specific slide
  746.         ----------------------------*/
  747.         base.goTo = function(targetSlide){
  748.             if (vars.in_animation || !api.options.slideshow) return false;      // Abort if currently animating
  749.  
  750.             var totalSlides = base.options.slides.length;
  751.  
  752.             // If target outside range
  753.             if(targetSlide < 0){
  754.                 targetSlide = totalSlides;
  755.             }else if(targetSlide > totalSlides){
  756.                 targetSlide = 1;
  757.             }
  758.             targetSlide = totalSlides - targetSlide + 1;
  759.  
  760.             clearInterval(vars.slideshow_interval); // Stop slideshow, prevent buildup
  761.  
  762.             //save current_slide to last slide
  763.             vars.last_slide = vars.current_slide;
  764.             base._cleanOldSlide();
  765.  
  766.             // Call theme function for goTo trigger
  767.             if (typeof theme != 'undefined' && typeof theme.goTo == "function" ) theme.goTo();
  768.  
  769.             if (vars.current_slide == totalSlides - targetSlide){
  770.                 if(!(vars.is_paused)){
  771.                     vars.slideshow_interval = setInterval(base.nextSlide, base.options.slide_interval);
  772.                 }
  773.                 return false;
  774.             }
  775.  
  776.             // If ahead of current position
  777.             if(totalSlides - targetSlide > vars.current_slide ){
  778.  
  779.                 // Adjust for new next slide
  780.                 vars.current_slide = totalSlides-targetSlide-1;
  781.                 vars.update_images = 'next';
  782.                 base._placeSlide(vars.update_images);
  783.  
  784.             //Otherwise it's before current position
  785.             }else if(totalSlides - targetSlide < vars.current_slide){
  786.  
  787.                 // Adjust for new prev slide
  788.                 vars.current_slide = totalSlides-targetSlide+1;
  789.                 vars.update_images = 'prev';
  790.                     base._placeSlide(vars.update_images);
  791.  
  792.             }
  793.  
  794.             // set active markers
  795.             if (base.options.slide_links){
  796.                 $(vars.slide_list +'> .current-slide').removeClass('current-slide');
  797.                 $(vars.slide_list +'> li').eq((totalSlides-targetSlide)).addClass('current-slide');
  798.             }
  799.  
  800.             if (base.options.thumb_links){
  801.                 $(vars.thumb_list +'> .current-thumb').removeClass('current-thumb');
  802.                 $(vars.thumb_list +'> li').eq((totalSlides-targetSlide)).addClass('current-thumb');
  803.             }
  804.  
  805.         };
  806.  
  807.  
  808.         /* Place Slide
  809.         ----------------------------*/
  810.         base._placeSlide = function(place){
  811.             loadSlide = false;
  812.  
  813.             if (place == 'next'){
  814.  
  815.                 vars.current_slide == base.options.slides.length - 1 ? loadSlide = 0 : loadSlide = vars.current_slide + 1;  // Determine next slide
  816.  
  817.                 var targetList = $(base.el+' li:eq('+loadSlide+')');
  818.  
  819.                 if (!targetList.html()){
  820.  
  821.                     targetList.addClass('image-loading').css('visibility','hidden');
  822.                     base._slideCreator({
  823.                         slideData:base.options.slides[loadSlide],
  824.                         targetList : targetList,
  825.                         loadedCallback :null
  826.                     });
  827.  
  828.                 };
  829.  
  830.                 base.nextSlide();
  831.  
  832.             }else if (place == 'prev'){
  833.  
  834.                 vars.current_slide - 1 < 0  ? loadSlide = base.options.slides.length - 1 : loadSlide = vars.current_slide - 1;  // Determine next slide
  835.  
  836.                 var targetList = $(base.el+' li:eq('+loadSlide+')');
  837.  
  838.                 if (!targetList.html()){
  839.  
  840.                     targetList.addClass('image-loading').css('visibility','hidden');
  841.                     base._slideCreator({
  842.                         slideData:base.options.slides[loadSlide],
  843.                         targetList : targetList,
  844.                         loadedCallback :null
  845.                     });
  846.                 };
  847.  
  848.                 base.prevSlide();
  849.             }
  850.  
  851.         };
  852.  
  853.         /* stop any video playing in the slide about to animate off */
  854.         base._cleanOldSlide = function (){
  855.  
  856.             //neg 1 is the default value when there is no last slide
  857.             if(vars.last_slide == -1) return;
  858.  
  859.             var listItem = $(base.el+' li:eq('+vars.last_slide+')');
  860.  
  861.             switch(listItem.attr("data-slidetype")){
  862.                 case 'VIMEO':
  863.                     try{
  864.                         var iframe = listItem.find("iframe")[0];
  865.                         $f(iframe).api("unload");
  866.                     }catch(e){
  867.                         //the vimeo video is probably not yet loaded
  868.                     }
  869.  
  870.                     break;
  871.             }
  872.         };
  873.  
  874.  
  875.         /* Get Original Dimensions
  876.         ----------------------------*/
  877.         base._origDim = function(targetSlide){
  878.             targetSlide.data('origWidth', targetSlide.width()).data('origHeight', targetSlide.height());
  879.         };
  880.  
  881.  
  882.         /* After Slide Animation
  883.         ----------------------------*/
  884.         base.afterAnimation = function(){
  885.  
  886.             base._cleanOldSlide();
  887.  
  888.             // If hybrid mode is on swap back to higher image quality
  889.             if (base.options.performance == 1){
  890.                     base.$el.removeClass('speed').addClass('quality');
  891.             }
  892.  
  893.             // Update previous slide
  894.             if (vars.update_images){
  895.                 vars.current_slide - 1 < 0  ? setPrev = base.options.slides.length - 1 : setPrev = vars.current_slide-1;
  896.                 vars.update_images = false;
  897.                 $('.prevslide').removeClass('prevslide');
  898.                 $(base.el+' li:eq('+setPrev+')').addClass('prevslide');
  899.             }
  900.  
  901.             vars.in_animation = false;
  902.  
  903.             // Resume slideshow
  904.             if (!vars.is_paused && base.options.slideshow){
  905.                 vars.slideshow_interval = setInterval(base.nextSlide, base.options.slide_interval);
  906.                 if (base.options.stop_loop && vars.current_slide == base.options.slides.length - 1 ) base.playToggle();
  907.             }
  908.  
  909.             // Call theme function for after slide transition
  910.             if (typeof theme != 'undefined' && typeof theme.afterAnimation == "function" ) theme.afterAnimation();
  911.  
  912.             return false;
  913.  
  914.         };
  915.  
  916.         base.getField = function(field){
  917.             return base.options.slides[vars.current_slide][field];
  918.         };
  919.  
  920.                 // Make it go!
  921.                 base.init();
  922.     };
  923.  
  924.  
  925.     /* Global Variables
  926.     ----------------------------*/
  927.     $.supersized.vars = {
  928.  
  929.         // Elements
  930.         thumb_tray          :   '#thumb-tray',  // Thumbnail tray
  931.         thumb_list          :   '#thumb-list',  // Thumbnail list
  932.         slide_list          :   '#slide-list',  // Slide link list
  933.  
  934.         // Internal variables
  935.         current_slide           :   0,          // Current slide number
  936.         last_slide              :   -1,         // Current slide number
  937.         in_animation            :   false,      // Prevents animations from stacking
  938.         is_paused               :   false,      // Tracks paused on/off
  939.         hover_pause             :   false,      // If slideshow is paused from hover
  940.         slideshow_interval      :   false,      // Stores slideshow timer
  941.         update_images           :   false,      // Trigger to update images after slide jump
  942.         options                 :   {}          // Stores assembled options list
  943.  
  944.     };
  945.  
  946.  
  947.     /* Default Options
  948.     ----------------------------*/
  949.     $.supersized.defaultOptions = {
  950.  
  951.             // Functionality
  952.         slideshow               :   1,          // Slideshow on/off
  953.         autoplay                :   1,          // Slideshow starts playing automatically
  954.         start_slide             :   1,          // Start slide (0 is random)
  955.         stop_loop               :   0,          // Stops slideshow on last slide
  956.         random                  :   0,          // Randomize slide order (Ignores start slide)
  957.         slide_interval          :   5000,       // Length between transitions
  958.         transition              :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
  959.         transition_speed        :   750,        // Speed of transition
  960.         new_window              :   1,          // Image links open in new window/tab
  961.         pause_hover             :   0,          // Pause slideshow on hover
  962.         keyboard_nav            :   1,          // Keyboard navigation on/off
  963.         performance             :   1,          // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed //  (Only works for Firefox/IE, not Webkit)
  964.         image_protect           :   1,          // Disables image dragging and right click with Javascript
  965.  
  966.         // Size & Position
  967.         fit_always              :   0,          // Image will never exceed browser width or height (Ignores min. dimensions)
  968.         fit_landscape           :   0,          // Landscape images will not exceed browser width
  969.         fit_portrait            :   1,          // Portrait images will not exceed browser height
  970.         min_width               :   0,          // Min width allowed (in pixels)
  971.         min_height              :   0,          // Min height allowed (in pixels)
  972.         horizontal_center       :   1,          // Horizontally center background
  973.         vertical_center         :   1,          // Vertically center background
  974.  
  975.  
  976.         // Components
  977.         slide_links             :   1,          // Individual links for each slide (Options: false, 'num', 'name', 'blank')
  978.         thumb_links             :   1,          // Individual thumb links for each slide
  979.         thumbnail_navigation    :   0           // Thumbnail navigation
  980.  
  981.         };
  982.  
  983.         $.fn.supersized = function(options){
  984.                 return this.each(function(){
  985.                         (new $.supersized(options));
  986.                 });
  987.         };
  988.  
  989. })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!