7 Replies Latest reply: Jan 24, 2011 11:28 AM by luadke RSS

    need some help tweaking the supersized jquery plugin

    luadke Community Member

      Hi, I'm using this plugin http://www.buildintearnet.com/2010/11/supersized-3-0-full-screen-background-slideshow-jque ry-plugin/ on my site here - http://www.blackpaint.co.uk/new/

       

      The plugin cycles through as many images as yuo tell it to, when it reaches the last image it starts from the beginning again. I would like to make it through 3 images and then stop on the last.

       

      here is the code:

       

      <!--START SCRIPT FOR BG IMAGES CHANGE -->
           <script type="text/javascript" src="supersized3/supersized.3.0.js"></script>
           <script type="text/javascript">  
                $(function(){
                     $.fn.supersized.options = {  
                          startwidth: 640,  
                          startheight: 377,
                          vertical_center: 1,
                          slideshow: 1,
                          navigation: 0,
                          thumbnail_navigation: 0,
                          transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
                          pause_hover: 0,
                          slide_counter: 0,
                          slide_captions: 0,
                          slide_interval: 200,
                          slides : [
                               
                               {image : 'supersized3/slides/1.jpg'},{image : 'supersized3/slides/2.jpg'},
                               {image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},{image : 'supersized3/slides/3.jpg'},
                               
                               ]
                     };
                   $('#supersized').supersized(); 
               });
           </script>
          <!--END SCRIPT FOR FONT BG IMAGES CHANGE -->
      

       

      As you can see, my clunky work-around is to simply to repeat the last image over and over again - not very elegant and I imagine it uses up the users RAM.

      Any suggestions of how to go about fixing this? Please note, I'm terrible with javascript syntax as of yet.

      Many thanks for any help,

      Luke

        • 1. Re: need some help tweaking the supersized jquery plugin
          luadke Community Member

          Maybe if I somehow can control the duration of the last slide and set it really high. Any ideas on how to do this?

          • 2. Re: need some help tweaking the supersized jquery plugin
            John Waller CommunityMVP

            Have you tried posting your question in the comments on the page which hosts the plugin?

            http://buildinternet.com/2010/11/supersized-3-0-full-screen-background-slideshow-jquery-pl ugin/

             

            Comments look quite active at the moment.

            • 3. Re: need some help tweaking the supersized jquery plugin
              luadke Community Member

              I just asked. But I asked something else on there and it didn't get an answer. I think there are more questions than answers there.

               

              Here is the .js code, do you think it could be something in here that I can amend?

               

               

              (function($) {
              
              $.effects.slide = function(o) {
              
                   return this.queue(function() {
              
                        // Create element
                        var el = $(this), props = ['position','top','left'];
                        
                        // Set options
                        var mode = $.effects.setMode(el, o.options.mode || 'show'); // Set Mode
                        var direction = o.options.direction || 'left'; // Default Direction
                        
                        // Adjust
                        $.effects.save(el, props); el.show(); // Save & Show
                        $.effects.createWrapper(el).css({overflow:'hidden'}); // Create Wrapper
                        var ref = (direction == 'up' || direction == 'down') ? 'top' : 'left';
                        var motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg';
                        var distance = o.options.distance || (ref == 'top' ? el.outerHeight({margin:true}) : el.outerWidth({margin:true}));
                        if (mode == 'show') el.css(ref, motion == 'pos' ? -distance : distance); // Shift
                        
                        // Animation
                        var animation = {};
                        animation[ref] = (mode == 'show' ? (motion == 'pos' ? '+=' : '-=') : (motion == 'pos' ? '-=' : '+=')) + distance;
                        
                        // Animate
                        el.animate(animation, { queue: false, duration: o.duration, easing: o.options.easing, complete: function() {
                             if(mode == 'hide') el.hide(); // Hide
                             $.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
                             if(o.callback) o.callback.apply(this, arguments); // Callback
                             el.dequeue();
                        }});
                        
                   });
                   
              };
              
              })(jQuery);
              

               

              Here is another file it links to:

               

              ;(function($) {
              
              $.effects = $.effects || {}; //Add the 'effects' scope
              
              $.extend($.effects, {
                   save: function(el, set) {
                        for(var i=0;i<set.length;i++) {
                             if(set[i] !== null) $.data(el[0], "ec.storage."+set[i], el[0].style[set[i]]);
                        }
                   },
                   restore: function(el, set) {
                        for(var i=0;i<set.length;i++) {
                             if(set[i] !== null) el.css(set[i], $.data(el[0], "ec.storage."+set[i]));
                        }
                   },
                   setMode: function(el, mode) {
                        if (mode == 'toggle') mode = el.is(':hidden') ? 'show' : 'hide'; // Set for toggle
                        return mode;
                   },
                   getBaseline: function(origin, original) { // Translates a [top,left] array into a baseline value
                        // this should be a little more flexible in the future to handle a string & hash
                        var y, x;
                        switch (origin[0]) {
                             case 'top': y = 0; break;
                             case 'middle': y = 0.5; break;
                             case 'bottom': y = 1; break;
                             default: y = origin[0] / original.height;
                        };
                        switch (origin[1]) {
                             case 'left': x = 0; break;
                             case 'center': x = 0.5; break;
                             case 'right': x = 1; break;
                             default: x = origin[1] / original.width;
                        };
                        return {x: x, y: y};
                   },
                   createWrapper: function(el) {
                        if (el.parent().attr('id') == 'fxWrapper')
                             return el;
                        var props = {width: el.outerWidth({margin:true}), height: el.outerHeight({margin:true}), 'float': el.css('float')};
                        el.wrap('<div id="fxWrapper" style="font-size:100%;background:transparent;border:none;margin:0;padding:0"></div>');
                        var wrapper = el.parent();
                        if (el.css('position') == 'static'){
                             wrapper.css({position: 'relative'});
                             el.css({position: 'relative'});
                        } else {
                             var top = el.css('top'); if(isNaN(parseInt(top))) top = 'auto';
                             var left = el.css('left'); if(isNaN(parseInt(left))) left = 'auto';
                             wrapper.css({ position: el.css('position'), top: top, left: left, zIndex: el.css('z-index') }).show();
                             el.css({position: 'relative', top:0, left:0});
                        }
                        wrapper.css(props);
                        return wrapper;
                   },
                   removeWrapper: function(el) {
                        if (el.parent().attr('id') == 'fxWrapper')
                             return el.parent().replaceWith(el);
                        return el;
                   },
                   setTransition: function(el, list, factor, val) {
                        val = val || {};
                        $.each(list,function(i, x){
                             unit = el.cssUnit(x);
                             if (unit[0] > 0) val[x] = unit[0] * factor + unit[1];
                        });
                        return val;
                   },
                   animateClass: function(value, duration, easing, callback) {
              
                        var cb = (typeof easing == "function" ? easing : (callback ? callback : null));
                        var ea = (typeof easing == "object" ? easing : null);
              
                        return this.each(function() {
              
                             var offset = {}; var that = $(this); var oldStyleAttr = that.attr("style") || '';
                             if(typeof oldStyleAttr == 'object') oldStyleAttr = oldStyleAttr["cssText"]; /* Stupidly in IE, style is a object.. */
                             if(value.toggle) { that.hasClass(value.toggle) ? value.remove = value.toggle : value.add = value.toggle; }
              
                             //Let's get a style offset
                             var oldStyle = $.extend({}, (document.defaultView ? document.defaultView.getComputedStyle(this,null) : this.currentStyle));
                             if(value.add) that.addClass(value.add); if(value.remove) that.removeClass(value.remove);
                             var newStyle = $.extend({}, (document.defaultView ? document.defaultView.getComputedStyle(this,null) : this.currentStyle));
                             if(value.add) that.removeClass(value.add); if(value.remove) that.addClass(value.remove);
              
                             // The main function to form the object for animation
                             for(var n in newStyle) {
                                  if( typeof newStyle[n] != "function" && newStyle[n] /* No functions and null properties */
                                  && n.indexOf("Moz") == -1 && n.indexOf("length") == -1 /* No mozilla spezific render properties. */
                                  && newStyle[n] != oldStyle[n] /* Only values that have changed are used for the animation */
                                  && (n.match(/color/i) || (!n.match(/color/i) && !isNaN(parseInt(newStyle[n],10)))) /* Only things that can be parsed to integers or colors */
                                  && (oldStyle.position != "static" || (oldStyle.position == "static" && !n.match(/left|top|bottom|right/))) /* No need for positions when dealing with static positions */
                                  ) offset[n] = newStyle[n];
                             }
              
                             that.animate(offset, duration, ea, function() { // Animate the newly constructed offset object
                                  // Change style attribute back to original. For stupid IE, we need to clear the damn object.
                                  if(typeof $(this).attr("style") == 'object') { $(this).attr("style")["cssText"] = ""; $(this).attr("style")["cssText"] = oldStyleAttr; } else $(this).attr("style", oldStyleAttr);
                                  if(value.add) $(this).addClass(value.add); if(value.remove) $(this).removeClass(value.remove);
                                  if(cb) cb.apply(this, arguments);
                             });
              
                        });
                   }
              });
              
              //Extend the methods of jQuery
              $.fn.extend({
                   //Save old methods
                   _show: $.fn.show,
                   _hide: $.fn.hide,
                   __toggle: $.fn.toggle,
                   _addClass: $.fn.addClass,
                   _removeClass: $.fn.removeClass,
                   _toggleClass: $.fn.toggleClass,
                   // New ec methods
                   effect: function(fx,o,speed,callback) {
                        return $.effects[fx] ? $.effects[fx].call(this, {method: fx, options: o || {}, duration: speed, callback: callback }) : null;
                   },
                   show: function() {
                        if(!arguments[0] || (arguments[0].constructor == Number || /(slow|normal|fast)/.test(arguments[0])))
                             return this._show.apply(this, arguments);
                        else {
                             var o = arguments[1] || {}; o['mode'] = 'show';
                             return this.effect.apply(this, [arguments[0], o, arguments[2] || o.duration, arguments[3] || o.callback]);
                        }
                   },
                   hide: function() {
                        if(!arguments[0] || (arguments[0].constructor == Number || /(slow|normal|fast)/.test(arguments[0])))
                             return this._hide.apply(this, arguments);
                        else {
                             var o = arguments[1] || {}; o['mode'] = 'hide';
                             return this.effect.apply(this, [arguments[0], o, arguments[2] || o.duration, arguments[3] || o.callback]);
                        }
                   },
                   toggle: function(){
                        if(!arguments[0] || (arguments[0].constructor == Number || /(slow|normal|fast)/.test(arguments[0])) || (arguments[0].constructor == Function))
                             return this.__toggle.apply(this, arguments);
                        else {
                             var o = arguments[1] || {}; o['mode'] = 'toggle';
                             return this.effect.apply(this, [arguments[0], o, arguments[2] || o.duration, arguments[3] || o.callback]);
                        }
                   },
                   addClass: function(classNames,speed,easing,callback) {
                        return speed ? $.effects.animateClass.apply(this, [{ add: classNames },speed,easing,callback]) : this._addClass(classNames);
                   },
                   removeClass: function(classNames,speed,easing,callback) {
                        return speed ? $.effects.animateClass.apply(this, [{ remove: classNames },speed,easing,callback]) : this._removeClass(classNames);
                   },
                   toggleClass: function(classNames,speed,easing,callback) {
                        return speed ? $.effects.animateClass.apply(this, [{ toggle: classNames },speed,easing,callback]) : this._toggleClass(classNames);
                   },
                   morph: function(remove,add,speed,easing,callback) {
                        return $.effects.animateClass.apply(this, [{ add: add, remove: remove },speed,easing,callback]);
                   },
                   switchClass: function() {
                        return this.morph.apply(this, arguments);
                   },
                   // helper functions
                   cssUnit: function(key) {
                        var style = this.css(key), val = [];
                        $.each( ['em','px','%','pt'], function(i, unit){
                             if(style.indexOf(unit) > 0)
                                  val = [parseFloat(style), unit];
                        });
                        return val;
                   }
              });
              
              /*
               * jQuery Color Animations
               * Copyright 2007 John Resig
               * Released under the MIT and GPL licenses.
               */
              
              // We override the animation for all of these color styles
              jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){
                        jQuery.fx.step[attr] = function(fx){
                                  if ( fx.state == 0 ) {
                                            fx.start = getColor( fx.elem, attr );
                                            fx.end = getRGB( fx.end );
                                  }
              
                                  fx.elem.style[attr] = "rgb(" + [
                                            Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),
                                            Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),
                                            Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)
                                  ].join(",") + ")";
                        }
              });
              
              // Color Conversion functions from highlightFade
              // By Blair Mitchelmore
              // http://jquery.offput.ca/highlightFade/
              
              // Parse strings looking for color tuples [255,255,255]
              function getRGB(color) {
                        var result;
              
                        // Check if we're already dealing with an array of colors
                        if ( color && color.constructor == Array && color.length == 3 )
                                  return color;
              
                        // Look for rgb(num,num,num)
                        if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
                                  return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
              
                        // Look for rgb(num%,num%,num%)
                        if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
                                  return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
              
                        // Look for #a0b1c2
                        if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
                                  return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
              
                        // Look for #fff
                        if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
                                  return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
              
                        // Look for rgba(0, 0, 0, 0) == transparent in Safari 3
                        if (result = /rgba\(0, 0, 0, 0\)/.exec(color))
                                  return colors['transparent']
              
                        // Otherwise, we're most likely dealing with a named color
                        return colors[jQuery.trim(color).toLowerCase()];
              }
              
              function getColor(elem, attr) {
                        var color;
              
                        do {
                                  color = jQuery.curCSS(elem, attr);
              
                                  // Keep going until we find an element that has color, or we hit the body
                                  if ( color != '' && color != 'transparent' || jQuery.nodeName(elem, "body") )
                                            break;
              
                                  attr = "backgroundColor";
                        } while ( elem = elem.parentNode );
              
                        return getRGB(color);
              };
              
              // Some named colors to work with
              // From Interface by Stefan Petre
              // http://interface.eyecon.ro/
              
              var colors = {
                   aqua:[0,255,255],
                   azure:[240,255,255],
                   beige:[245,245,220],
                   black:[0,0,0],
                   blue:[0,0,255],
                   brown:[165,42,42],
                   cyan:[0,255,255],
                   darkblue:[0,0,139],
                   darkcyan:[0,139,139],
                   darkgrey:[169,169,169],
                   darkgreen:[0,100,0],
                   darkkhaki:[189,183,107],
                   darkmagenta:[139,0,139],
                   darkolivegreen:[85,107,47],
                   darkorange:[255,140,0],
                   darkorchid:[153,50,204],
                   darkred:[139,0,0],
                   darksalmon:[233,150,122],
                   darkviolet:[148,0,211],
                   fuchsia:[255,0,255],
                   gold:[255,215,0],
                   green:[0,128,0],
                   indigo:[75,0,130],
                   khaki:[240,230,140],
                   lightblue:[173,216,230],
                   lightcyan:[224,255,255],
                   lightgreen:[144,238,144],
                   lightgrey:[211,211,211],
                   lightpink:[255,182,193],
                   lightyellow:[255,255,224],
                   lime:[0,255,0],
                   magenta:[255,0,255],
                   maroon:[128,0,0],
                   navy:[0,0,128],
                   olive:[128,128,0],
                   orange:[255,165,0],
                   pink:[255,192,203],
                   purple:[128,0,128],
                   violet:[128,0,128],
                   red:[255,0,0],
                   silver:[192,192,192],
                   white:[255,255,255],
                   yellow:[255,255,0],
                   transparent: [255,255,255]
              };
                   
              /*
               * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
               *
               * Uses the built in easing capabilities added In jQuery 1.1
               * to offer multiple easing options
               *
               * TERMS OF USE - jQuery Easing
               * 
               * Open source under the BSD License. 
               * 
               * Copyright © 2008 George McGinley Smith
               * All rights reserved.
               * 
               * Redistribution and use in source and binary forms, with or without modification, 
               * are permitted provided that the following conditions are met:
               * 
               * Redistributions of source code must retain the above copyright notice, this list of 
               * conditions and the following disclaimer.
               * Redistributions in binary form must reproduce the above copyright notice, this list 
               * of conditions and the following disclaimer in the documentation and/or other materials 
               * provided with the distribution.
               * 
               * Neither the name of the author nor the names of contributors may be used to endorse 
               * or promote products derived from this software without specific prior written permission.
               * 
               * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
               * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
               * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
               * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
               * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
               * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
               * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
               * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
               * OF THE POSSIBILITY OF SUCH DAMAGE. 
               *
              */
              
              // t: current time, b: begInnIng value, c: change In value, d: duration
              jQuery.easing['jswing'] = jQuery.easing['swing'];
              
              jQuery.extend( jQuery.easing,
              {
                   def: 'easeOutQuad',
                   swing: function (x, t, b, c, d) {
                        //alert(jQuery.easing.default);
                        return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
                   },
                   easeInQuad: function (x, t, b, c, d) {
                        return c*(t/=d)*t + b;
                   },
                   easeOutQuad: function (x, t, b, c, d) {
                        return -c *(t/=d)*(t-2) + b;
                   },
                   easeInOutQuad: function (x, t, b, c, d) {
                        if ((t/=d/2) < 1) return c/2*t*t + b;
                        return -c/2 * ((--t)*(t-2) - 1) + b;
                   },
                   easeInCubic: function (x, t, b, c, d) {
                        return c*(t/=d)*t*t + b;
                   },
                   easeOutCubic: function (x, t, b, c, d) {
                        return c*((t=t/d-1)*t*t + 1) + b;
                   },
                   easeInOutCubic: function (x, t, b, c, d) {
                        if ((t/=d/2) < 1) return c/2*t*t*t + b;
                        return c/2*((t-=2)*t*t + 2) + b;
                   },
                   easeInQuart: function (x, t, b, c, d) {
                        return c*(t/=d)*t*t*t + b;
                   },
                   easeOutQuart: function (x, t, b, c, d) {
                        return -c * ((t=t/d-1)*t*t*t - 1) + b;
                   },
                   easeInOutQuart: function (x, t, b, c, d) {
                        if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
                        return -c/2 * ((t-=2)*t*t*t - 2) + b;
                   },
                   easeInQuint: function (x, t, b, c, d) {
                        return c*(t/=d)*t*t*t*t + b;
                   },
                   easeOutQuint: function (x, t, b, c, d) {
                        return c*((t=t/d-1)*t*t*t*t + 1) + b;
                   },
                   easeInOutQuint: function (x, t, b, c, d) {
                        if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
                        return c/2*((t-=2)*t*t*t*t + 2) + b;
                   },
                   easeInSine: function (x, t, b, c, d) {
                        return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
                   },
                   easeOutSine: function (x, t, b, c, d) {
                        return c * Math.sin(t/d * (Math.PI/2)) + b;
                   },
                   easeInOutSine: function (x, t, b, c, d) {
                        return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
                   },
                   easeInExpo: function (x, t, b, c, d) {
                        return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
                   },
                   easeOutExpo: function (x, t, b, c, d) {
                        return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
                   },
                   easeInOutExpo: function (x, t, b, c, d) {
                        if (t==0) return b;
                        if (t==d) return b+c;
                        if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
                        return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
                   },
                   easeInCirc: function (x, t, b, c, d) {
                        return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
                   },
                   easeOutCirc: function (x, t, b, c, d) {
                        return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
                   },
                   easeInOutCirc: function (x, t, b, c, d) {
                        if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
                        return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
                   },
                   easeInElastic: function (x, t, b, c, d) {
                        var s=1.70158;var p=0;var a=c;
                        if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
                        if (a < Math.abs(c)) { a=c; var s=p/4; }
                        else var s = p/(2*Math.PI) * Math.asin (c/a);
                        return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
                   },
                   easeOutElastic: function (x, t, b, c, d) {
                        var s=1.70158;var p=0;var a=c;
                        if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
                        if (a < Math.abs(c)) { a=c; var s=p/4; }
                        else var s = p/(2*Math.PI) * Math.asin (c/a);
                        return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
                   },
                   easeInOutElastic: function (x, t, b, c, d) {
                        var s=1.70158;var p=0;var a=c;
                        if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
                        if (a < Math.abs(c)) { a=c; var s=p/4; }
                        else var s = p/(2*Math.PI) * Math.asin (c/a);
                        if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
                        return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
                   },
                   easeInBack: function (x, t, b, c, d, s) {
                        if (s == undefined) s = 1.70158;
                        return c*(t/=d)*t*((s+1)*t - s) + b;
                   },
                   easeOutBack: function (x, t, b, c, d, s) {
                        if (s == undefined) s = 1.70158;
                        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
                   },
                   easeInOutBack: function (x, t, b, c, d, s) {
                        if (s == undefined) s = 1.70158; 
                        if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
                        return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
                   },
                   easeInBounce: function (x, t, b, c, d) {
                        return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
                   },
                   easeOutBounce: function (x, t, b, c, d) {
                        if ((t/=d) < (1/2.75)) {
                             return c*(7.5625*t*t) + b;
                        } else if (t < (2/2.75)) {
                             return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
                        } else if (t < (2.5/2.75)) {
                             return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
                        } else {
                             return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
                        }
                   },
                   easeInOutBounce: function (x, t, b, c, d) {
                        if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
                        return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
                   }
              });
              

              • 4. Re: need some help tweaking the supersized jquery plugin
                John Waller CommunityMVP

                Here is the .js code, do you think it could be something in here that I can amend?


                I'm really no JS expert.

                 

                The author of the plugin is best placed to answer you.

                • 5. Re: need some help tweaking the supersized jquery plugin
                  luadke Community Member

                  I just found that the code author replied with this to somebody who asked the same question:

                   

                  If you are looking at the supersized js file, you can stop a slideshow by using the clearInterval line that appears multiple times throughout. Within the nextslide portion, you would need to have a conditional statement that detects if it is the last slide and then uses clearInterval to stop the slideshow.

                   

                  Here is the .js code he is referring to. Has anyone got any ideas on how to implement what he is saying? I don't know how to write this 'conditional statement'.

                   

                  (function($){
                  
                       //Resize image on ready or resize
                       $.fn.supersized = function() {
                            
                            
                            $.inAnimation = false;
                            $.paused = false;
                            
                            var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
                            $.currentSlide = options.start_slide - 1;
                            
                            /******Set up initial images -- Add class doesnt work*****/
                            //Set previous image
                            var imageLink = (options.slides[options.slides.length - 1].url) ? "href='" + options.slides[options.slides.length - 1].url + "'" : "";
                            $("<img/>").attr("src", options.slides[options.slides.length - 1].image).appendTo("#supersized").wrap("<a " + imageLink + "></a>");//Doesnt account for start slide
                            
                            //Set current image
                            imageLink = (options.slides[$.currentSlide].url) ? "href='" + options.slides[$.currentSlide].url + "'" : "";
                            $("<img/>").attr("src", options.slides[$.currentSlide].image).appendTo("#supersized").wrap("<a class=\"activeslide\" " + imageLink + "></a>");
                            
                            //Set next image
                            imageLink = (options.slides[$.currentSlide + 1].url) ? "href='" + options.slides[$.currentSlide + 1].url + "'" : "";
                            $("<img/>").attr("src", options.slides[$.currentSlide + 1].image).appendTo("#supersized").wrap("<a " + imageLink + "></a>");
                            
                            $(window).bind("load", function(){
                                 
                                 $('#loading').hide();
                                 $('#supersized').fadeIn('fast');
                                 
                                 $('#controls-wrapper').show();
                                 
                                 if (options.thumbnail_navigation == 1){
                                 
                                      /*****Set up thumbnails****/
                                      //Load previous thumbnail
                                      $.currentSlide - 1 < 0  ? prevThumb = options.slides.length - 1 : prevThumb = $.currentSlide - 1;
                                      $('#prevthumb').show().html($("<img/>").attr("src", options.slides[prevThumb].image));
                                      
                                      //Load next thumbnail
                                      $.currentSlide == options.slides.length - 1 ? nextThumb = 0 : nextThumb = $.currentSlide + 1;
                                      $('#nextthumb').show().html($("<img/>").attr("src", options.slides[nextThumb].image));
                            
                                 }
                                 
                                 $('#supersized').resizenow();
                                 
                                 if (options.slide_captions == 1) $('#slidecaption').html(options.slides[$.currentSlide].title);//*********Pull caption from array
                                 if (options.navigation == 0) $('#navigation').hide();
                                 if (options.thumbnail_navigation == 0){ $('#nextthumb').hide(); $('#prevthumb').hide(); }
                                 
                                 //Slideshow
                                 if (options.slideshow == 1){
                                      if (options.slide_counter == 1){ //Initiate slide counter if active
                                           $('#slidecounter .slidenumber').html(options.start_slide);
                                          $('#slidecounter .totalslides').html(options.slides.length); //*******Pull total from length of array
                                     }
                                      slideshow_interval = setInterval(nextslide, options.slide_interval);
                                      
                                      if (options.thumbnail_navigation == 1){
                                           //Thumbnail Navigation
                                           $('#nextthumb').click(function() {
                                               if($.inAnimation) return false;
                                               clearInterval(slideshow_interval);
                                               nextslide();
                                               if(!($.paused)) slideshow_interval = setInterval(nextslide, options.slide_interval);
                                               return false;
                                          });
                                          $('#prevthumb').click(function() {
                                               if($.inAnimation) return false;
                                              clearInterval(slideshow_interval);
                                              prevslide();
                                                  if(!($.paused)) slideshow_interval = setInterval(nextslide, options.slide_interval);
                                              return false;
                                          });
                                           }
                                      
                                      if (options.navigation == 1){ //Skip if no navigation
                                           $('#navigation a').click(function(){  
                                                   $(this).blur();  
                                                   return false;  
                                              });
                                                    
                                           //Slide Navigation
                                          $('#nextslide').click(function() {
                                               if($.inAnimation) return false;
                                               clearInterval(slideshow_interval);
                                               nextslide();
                                               if(!($.paused)) slideshow_interval = setInterval(nextslide, options.slide_interval);
                                               return false;
                                          });
                                          $('#prevslide').click(function() {
                                               if($.inAnimation) return false;
                                              clearInterval(slideshow_interval);
                                              prevslide();
                                              if(!($.paused)) slideshow_interval = setInterval(nextslide, options.slide_interval);
                                              return false;
                                          });
                                          $('#nextslide').mousedown(function() {
                                                   $(this).attr("src", "images/forward.png");
                                           });
                                           $('#nextslide').mouseup(function() {
                                               $(this).attr("src", "images/forward_dull.png");
                                           });
                                           $('#nextslide').mouseout(function() {
                                               $(this).attr("src", "images/forward_dull.png");
                                           });
                                           
                                           $('#prevslide').mousedown(function() {
                                               $(this).attr("src", "images/back.png");
                                           });
                                           $('#prevslide').mouseup(function() {
                                               $(this).attr("src", "images/back_dull.png");
                                           });
                                           $('#prevslide').mouseout(function() {
                                               $(this).attr("src", "images/back_dull.png");
                                           });
                                           
                                          //Play/Pause Button
                                          $('#pauseplay').click(function() {
                                               if($.inAnimation) return false;
                                               var src = ($(this).attr("src") === "images/play.png") ? "images/pause.png" : "images/play.png";
                                                 if (src == "images/pause.png"){
                                                      $(this).attr("src", "images/play.png");
                                                      $.paused = false;
                                                   slideshow_interval = setInterval(nextslide, options.slide_interval);  
                                              }else{
                                                   $(this).attr("src", "images/pause.png");
                                                   clearInterval(slideshow_interval);
                                                   $.paused = true;
                                              }
                                                 $(this).attr("src", src);
                                               return false;
                                          });
                                          $('#pauseplay').mouseover(function() {
                                               var imagecheck = ($(this).attr("src") === "images/play_dull.png");
                                               if (imagecheck){
                                                      $(this).attr("src", "images/play.png"); 
                                              }else{
                                                   $(this).attr("src", "images/pause.png");
                                              }
                                          });
                                          
                                          $('#pauseplay').mouseout(function() {
                                               var imagecheck = ($(this).attr("src") === "images/play.png");
                                               if (imagecheck){
                                                      $(this).attr("src", "images/play_dull.png"); 
                                              }else{
                                                   $(this).attr("src", "images/pause_dull.png");
                                              }
                                              return false;
                                          });
                                      }
                                 }
                            });
                                      
                            $(document).ready(function() {
                                 $('#supersized').resizenow(); 
                            });
                            
                            //Pause when hover on image
                            $('#supersized').hover(function() {
                                    if (options.slideshow == 1 && options.pause_hover == 1){
                                         if(!($.paused) && options.navigation == 1){
                                              $('#pauseplay').attr("src", "images/pause.png"); 
                                              clearInterval(slideshow_interval);
                                         }
                                    }
                                    if($.inAnimation) return false; //*******Pull title from array
                               }, function() {
                                 if (options.slideshow == 1 && options.pause_hover == 1){
                                      if(!($.paused) && options.navigation == 1){
                                           $('#pauseplay').attr("src", "images/pause_dull.png");
                                           slideshow_interval = setInterval(nextslide, options.slide_interval);
                                      } 
                                 }
                                      //*******Pull title from array
                               });
                            
                            $(window).bind("resize", function(){
                                $('#supersized').resizenow(); 
                            });
                            
                            $('#supersized').hide();
                            $('#controls-wrapper').hide();
                       };
                       
                       //Adjust image size
                       $.fn.resizenow = function() {
                            var t = $(this);
                            var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
                              return t.each(function() {
                                   
                                 //Define image ratio
                                 var ratio = options.startheight/options.startwidth;
                                 
                                 //Gather browser and current image size
                                 var imagewidth = t.width();
                                 var imageheight = t.height();
                                 var browserwidth = $(window).width();
                                 var browserheight = $(window).height();
                                 var offset;
                  
                                 //Resize image to proper ratio
                                 if ((browserheight/browserwidth) > ratio){
                                     t.height(browserheight);
                                     t.width(browserheight / ratio);
                                     t.children().height(browserheight);
                                     t.children().width(browserheight / ratio);
                                 } else {
                                     t.width(browserwidth);
                                     t.height(browserwidth * ratio);
                                     t.children().width(browserwidth);
                                     t.children().height(browserwidth * ratio);
                                 }
                                 if (options.vertical_center == 1){
                                      t.children().css('left', (browserwidth - t.width())/2);
                                      t.children().css('top', (browserheight - t.height())/2);
                                 }
                                 return false;
                            });
                       };
                       
                            //Slideshow Next Slide
                       function nextslide() {
                            if($.inAnimation) return false;
                            else $.inAnimation = true;
                           var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
                            
                            var currentslide = $('#supersized .activeslide');
                           currentslide.removeClass('activeslide');
                            
                           if ( currentslide.length == 0 ) currentslide = $('#supersized a:last'); //*******Check if end of array?
                                 
                           var nextslide =  currentslide.next().length ? currentslide.next() : $('#supersized a:first'); //*******Array
                           var prevslide =  nextslide.prev().length ? nextslide.prev() : $('#supersized a:last'); //*******Array
                            
                            $('.prevslide').removeClass('prevslide');
                            prevslide.addClass('prevslide');
                            
                            //Get the slide number of new slide
                            $.currentSlide + 1 == options.slides.length ? $.currentSlide = 0 : $.currentSlide++;
                            
                            /**** Image Loading ****/
                            //Load next image
                            loadSlide=false;
                            $.currentSlide == options.slides.length - 1 ? loadSlide = 0 : loadSlide = $.currentSlide + 1;
                            imageLink = (options.slides[loadSlide].url) ? "href='" + options.slides[loadSlide].url + "'" : "";
                            $("<img/>").attr("src", options.slides[loadSlide].image).appendTo("#supersized").wrap("<a " + imageLink + "></a>");
                            
                            if (options.thumbnail_navigation == 1){
                            //Load previous thumbnail
                            $.currentSlide - 1 < 0  ? prevThumb = options.slides.length - 1 : prevThumb = $.currentSlide - 1;
                            $('#prevthumb').html($("<img/>").attr("src", options.slides[prevThumb].image));
                            
                            //Load next thumbnail
                            nextThumb = loadSlide;
                            $('#nextthumb').html($("<img/>").attr("src", options.slides[nextThumb].image));
                            }
                            
                            currentslide.prev().remove(); //Remove Old Image
                            
                            /**** End Image Loading ****/
                            
                            //Display slide counter
                            if (options.slide_counter == 1){
                                $('#slidecounter .slidenumber').html($.currentSlide + 1);//**display current slide after checking if last
                            }
                            
                            //Captions
                           if (options.slide_captions == 1){
                                (options.slides[$.currentSlide].title) ? $('#slidecaption').html(options.slides[$.currentSlide].title) : $('#slidecaption').html('') ; //*******Grab next slide's title from array
                           }
                            
                           nextslide.hide().addClass('activeslide')
                                if (options.transition == 0){
                                     nextslide.show(); $.inAnimation = false;
                                }
                                if (options.transition == 1){
                                     nextslide.fadeIn(750, function(){$.inAnimation = false;});
                                }
                                if (options.transition == 2){
                                     nextslide.show("slide", { direction: "up" }, 'slow', function(){$.inAnimation = false;});
                                }
                                if (options.transition == 3){
                                     nextslide.show("slide", { direction: "right" }, 'slow', function(){$.inAnimation = false;});
                                }
                                if (options.transition == 4){
                                     nextslide.show("slide", { direction: "down" }, 'slow', function(){$.inAnimation = false;});
                                }
                                if (options.transition == 5){
                                     nextslide.show("slide", { direction: "left" }, 'slow', function(){$.inAnimation = false;});
                                }
                           $('#supersized').resizenow();
                       }
                       
                       //Slideshow Previous Slide
                       function prevslide() {
                            if($.inAnimation) return false;
                            else $.inAnimation = true;
                            var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
                           
                           var currentslide = $('#supersized .activeslide');
                           currentslide.removeClass('activeslide');
                            
                           if ( currentslide.length == 0 ) currentslide = $('#supersized a:first');
                                 
                           var nextslide =  currentslide.prev().length ? currentslide.prev() : $('#supersized a:last'); //****** If equal to total length of array
                           var prevslide =  nextslide.next().length ? nextslide.next() : $('#supersized a:first');
                                      
                            //Get current slide number
                            $.currentSlide == 0 ?  $.currentSlide = options.slides.length - 1 : $.currentSlide-- ;
                            
                            /**** Image Loading ****/
                            //Load next image
                            loadSlide=false;
                            $.currentSlide - 1 < 0  ? loadSlide = options.slides.length - 1 : loadSlide = $.currentSlide - 1;
                            imageLink = (options.slides[loadSlide].url) ? "href='" + options.slides[loadSlide].url + "'" : "";
                            $("<img/>").attr("src", options.slides[loadSlide].image).prependTo("#supersized").wrap("<a " + imageLink + "></a>");
                            
                            if (options.thumbnail_navigation == 1){
                            //Load previous thumbnail
                            prevThumb = loadSlide;
                            $('#prevthumb').html($("<img/>").attr("src", options.slides[prevThumb].image));
                            
                            //Load next thumbnail
                            $.currentSlide == options.slides.length - 1 ? nextThumb = 0 : nextThumb = $.currentSlide + 1;
                            $('#nextthumb').html($("<img/>").attr("src", options.slides[nextThumb].image));
                            }
                            
                            currentslide.next().remove(); //Remove Old Image
                            
                            /**** End Image Loading ****/
                            
                            //Display slide counter
                            if (options.slide_counter == 1){
                                $('#slidecounter .slidenumber').html($.currentSlide + 1);
                            }
                            
                            $('.prevslide').removeClass('prevslide');
                            prevslide.addClass('prevslide');
                            
                            //Captions
                           if (options.slide_captions == 1){
                                (options.slides[$.currentSlide].title) ? $('#slidecaption').html(options.slides[$.currentSlide].title) : $('#slidecaption').html('') ; //*******Grab next slide's title from array
                           }
                            
                           nextslide.hide().addClass('activeslide')
                                if (options.transition == 0){
                                     nextslide.show(); $.inAnimation = false;
                                }
                                if (options.transition == 1){
                                     nextslide.fadeIn(750, function(){$.inAnimation = false;});
                                }
                                if (options.transition == 2){
                                     nextslide.show("slide", { direction: "down" }, 'slow', function(){$.inAnimation = false;});
                                }
                                if (options.transition == 3){
                                     nextslide.show("slide", { direction: "left" }, 'slow', function(){$.inAnimation = false;});
                                }
                                if (options.transition == 4){
                                     nextslide.show("slide", { direction: "up" }, 'slow', function(){$.inAnimation = false;});
                                }
                                if (options.transition == 5){
                                     nextslide.show("slide", { direction: "right" }, 'slow', function(){$.inAnimation = false;});
                                }
                                
                                $('#supersized').resizenow();//Fix for resize mid-transition
                       }
                       
                       $.fn.supersized.defaults = { 
                                 startwidth: 4,  
                                 startheight: 3,
                                 vertical_center: 1,
                                 slideshow: 1,
                                 navigation:1,
                                 thumbnail_navigation: 0,
                                 transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
                                 pause_hover: 0,
                                 slide_counter: 1,
                                 slide_captions: 1,
                                 slide_interval: 5000,
                                 start_slide: 1
                       };
                       
                  })(jQuery);
                  
                  
                  

                  • 6. Re: need some help tweaking the supersized jquery plugin
                    luadke Community Member

                    I have an altered version of the .js file that is meant to be able to control playback etc. But it's not working for me if I just replace my existing file with this one (obviously).

                     

                    Any ideas on how to control this code? Here it is:

                     

                    (function($){
                    
                         //Resize image on ready or resize
                         $.fn.supersized = function() {
                              
                              $.inAnimation = false;
                              $.paused = false;
                              
                              var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
                              $.currentSlide = options.start_slide - 1;
                              
                              /******Set up initial images -- Add class doesnt work*****/
                              //Set previous image
                              var imageLink = (options.slides[options.slides.length - 1].url) ? "href='" + options.slides[options.slides.length - 1].url + "'" : "";
                              $("<img/>").attr("src", options.slides[options.slides.length - 1].image).appendTo("#supersized").wrap("<a " + imageLink + "></a>");//Doesnt account for start slide
                              
                              //Set current image
                              imageLink = (options.slides[$.currentSlide].url) ? "href='" + options.slides[$.currentSlide].url + "'" : "";
                              $("<img/>").attr("src", options.slides[$.currentSlide].image).appendTo("#supersized").wrap("<a class=\"activeslide\" " + imageLink + "></a>");
                              
                              //Set next image
                              imageLink = (options.slides[$.currentSlide + 1].url) ? "href='" + options.slides[$.currentSlide + 1].url + "'" : "";
                              $("<img/>").attr("src", options.slides[$.currentSlide + 1].image).appendTo("#supersized").wrap("<a " + imageLink + "></a>");
                              
                              $(window).bind("load", function(){
                                   
                                   $('#loading').hide();
                                   $('#supersized').fadeIn('fast');
                                   
                                   $('#controls-wrapper').show();
                                   
                                   if (options.thumbnail_navigation == 1){
                                   
                                        /*****Set up thumbnails****/
                                        //Load previous thumbnail
                                        $.currentSlide - 1 < 0  ? prevThumb = options.slides.length - 1 : prevThumb = $.currentSlide - 1;
                                        $('#prevthumb').show().html($("<img/>").attr("src", options.slides[prevThumb].image));
                                        
                                        //Load next thumbnail
                                        $.currentSlide == options.slides.length - 1 ? nextThumb = 0 : nextThumb = $.currentSlide + 1;
                                        $('#nextthumb').show().html($("<img/>").attr("src", options.slides[nextThumb].image));
                              
                                   }
                                   
                                   $('#supersized').resizenow();
                                   
                                   if (options.slide_captions == 1) $('#slidecaption').html(options.slides[$.currentSlide].title);//*********Pull caption from array
                                   if (options.slide_autoplay == 0) $('#pauseplay').hide();
                                   if (options.navigation == 0) $('#navigation').hide();
                                   if (options.thumbnail_navigation == 0){ $('#nextthumb').hide(); $('#prevthumb').hide(); }
                                   
                                   //Slideshow
                                   if (options.slideshow == 1){
                                        if (options.slide_counter == 1){ //Initiate slide counter if active
                                             $('#slidecounter .slidenumber').html(options.start_slide);
                                            $('#slidecounter .totalslides').html(options.slides.length); //*******Pull total from length of array
                                       }
                                        
                                        if (options.slide_autoplay == 1) slideshow_interval = setInterval(nextslide, options.slide_interval);
                                        
                                        function resetSlideInterval() {
                                             if (options.slide_autoplay == 1){
                                                  clearInterval(slideshow_interval);
                                                  if(!($.paused)) slideshow_interval = setInterval(nextslide, options.slide_interval);
                                             }              
                                        }
                                        
                                        if (options.thumbnail_navigation == 1){
                                             //Thumbnail Navigation
                                             $('#nextthumb').click(function() {
                                                 if($.inAnimation) return false;
                                                 nextslide();
                                                 resetSlideInterval();
                                                 return false;
                                            });
                                            $('#prevthumb').click(function() {
                                                 if($.inAnimation) return false;
                                                prevslide();
                                                resetSlideInterval();                       
                                                return false;
                                            });
                                        }
                                        
                                        if (options.navigation == 1){ //Skip if no navigation
                                             $('#navigation a').click(function(){  
                                                     $(this).blur();  
                                                     return false;  
                                                });
                                                      
                                             //Slide Navigation
                                            $('#nextslide').click(function() {
                                                 if($.inAnimation) return false;
                                                 nextslide();
                                                  resetSlideInterval();
                                                 return false;
                                            });
                                            $('#prevslide').click(function() {
                                                 if($.inAnimation) return false;
                                                prevslide();
                                                resetSlideInterval();
                                                return false;
                                            });
                                            $('#nextslide').mousedown(function() {
                                                     $(this).attr("src", "images/supersized/forward.png");
                                             });
                                             $('#nextslide').mouseup(function() {
                                                 $(this).attr("src", "images/supersized/forward_dull.png");
                                             });
                                             $('#nextslide').mouseout(function() {
                                                 $(this).attr("src", "images/supersized/forward_dull.png");
                                             });
                                             
                                             $('#prevslide').mousedown(function() {
                                                 $(this).attr("src", "images/supersized/back.png");
                                             });
                                             $('#prevslide').mouseup(function() {
                                                 $(this).attr("src", "images/supersized/back_dull.png");
                                             });
                                             $('#prevslide').mouseout(function() {
                                                 $(this).attr("src", "images/supersized/back_dull.png");
                                             });
                                             
                                             if (options.slide_autoplay == 1){
                                                  //Play/Pause Button
                                                  $('#pauseplay').click(function() {
                                                       if($.inAnimation) return false;
                                                       var src = ($(this).attr("src") === "images/supersized/play.png") ? "images/supersized/pause.png" : "images/supersized/play.png";
                                                       if (src == "images/supersized/pause.png"){
                                                            $(this).attr("src", "images/supersized/play.png");
                                                            $.paused = false;
                                                            slideshow_interval = setInterval(nextslide, options.slide_interval);  
                                                       }else{
                                                            $(this).attr("src", "images/supersized/pause.png");
                                                            clearInterval(slideshow_interval);
                                                            $.paused = true;
                                                       }
                                                       $(this).attr("src", src);
                                                       return false;
                                                  });
                                                  $('#pauseplay').mouseover(function() {
                                                       var imagecheck = ($(this).attr("src") === "images/supersized/play_dull.png");
                                                       if (imagecheck){
                                                            $(this).attr("src", "images/supersized/play.png"); 
                                                       }else{
                                                            $(this).attr("src", "images/supersized/pause.png");
                                                       }
                                                  });
                                                  
                                                  $('#pauseplay').mouseout(function() {
                                                       var imagecheck = ($(this).attr("src") === "images/supersized/play.png");
                                                       if (imagecheck){
                                                            $(this).attr("src", "images/supersized/play_dull.png"); 
                                                       }else{
                                                            $(this).attr("src", "images/supersized/pause_dull.png");
                                                       }
                                                       return false;
                                                  });
                                            }
                                        }
                                   }
                                   
                                   
                                   
                              });
                                        
                              $(document).ready(function() {
                                   $('#supersized').resizenow(); 
                              });
                              
                              if (options.slide_autoplay == 1){
                              //Pause when hover on image
                                   $('#supersized').hover(function() {
                                        if (options.slideshow == 1 && options.pause_hover == 1){
                                             if(!($.paused) && options.navigation == 1){
                                                  $('#pauseplay').attr("src", "images/supersized/pause.png"); 
                                                  clearInterval(slideshow_interval);
                                             }
                                        }
                                        if($.inAnimation) return false; //*******Pull title from array
                                   }, function() {
                                        if (options.slideshow == 1 && options.pause_hover == 1){
                                             if(!($.paused) && options.navigation == 1){
                                                  $('#pauseplay').attr("src", "images/supersized/pause_dull.png");
                                                  slideshow_interval = setInterval(nextslide, options.slide_interval);
                                             } 
                                        }
                                             //*******Pull title from array
                                   });
                              }
                              
                              $(window).bind("resize", function(){
                                  $('#supersized').resizenow(); 
                              });
                              
                              $('#supersized').hide();
                              $('#controls-wrapper').hide();
                         };
                         
                         //Adjust image size
                         $.fn.resizenow = function() {
                              var t = $(this);
                              var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
                                return t.each(function() {
                                     
                                   //Define image ratio
                                   var ratio = options.startheight/options.startwidth;
                                   
                                   //Gather browser and current image size
                                   var imagewidth = t.width();
                                   var imageheight = t.height();
                                   var browserwidth = $(window).width();
                                   var browserheight = $(window).height();
                                   var offset;
                    
                                   //Resize image to proper ratio
                                   if ((browserheight/browserwidth) > ratio){
                                       t.height(browserheight);
                                       t.width(browserheight / ratio);
                                       t.children().height(browserheight);
                                       t.children().width(browserheight / ratio);
                                   } else {
                                       t.width(browserwidth);
                                       t.height(browserwidth * ratio);
                                       t.children().width(browserwidth);
                                       t.children().height(browserwidth * ratio);
                                   }
                                   if (options.vertical_center == 1){
                                        t.children().css('left', (browserwidth - t.width())/2);
                                        t.children().css('top', (browserheight - t.height())/2);
                                   }
                                   return false;
                              });
                         };     
                         
                         function resetSlideInterval() {
                              if (options.slideshow == 1){
                                   clearInterval(slideshow_interval);
                                  if(!($.paused)) slideshow_interval = setInterval(nextslide, options.slide_interval);
                              }              
                         }
                         
                         //Slideshow Next Slide
                         function nextslide() {
                              if($.inAnimation) return false;
                              else $.inAnimation = true;
                             var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
                              
                              var currentslide = $('#supersized .activeslide');
                             currentslide.removeClass('activeslide');
                              
                             if ( currentslide.length == 0 ) currentslide = $('#supersized a:last'); //*******Check if end of array?
                                   
                             var nextslide =  currentslide.next().length ? currentslide.next() : $('#supersized a:first'); //*******Array
                             var prevslide =  nextslide.prev().length ? nextslide.prev() : $('#supersized a:last'); //*******Array
                              
                              $('.prevslide').removeClass('prevslide');
                              prevslide.addClass('prevslide');
                              
                              //Get the slide number of new slide
                              $.currentSlide + 1 == options.slides.length ? $.currentSlide = 0 : $.currentSlide++;
                              
                              /**** Image Loading ****/
                              //Load next image
                              loadSlide=false;
                              $.currentSlide == options.slides.length - 1 ? loadSlide = 0 : loadSlide = $.currentSlide + 1;
                              imageLink = (options.slides[loadSlide].url) ? "href='" + options.slides[loadSlide].url + "'" : "";
                              $("<img/>").attr("src", options.slides[loadSlide].image).appendTo("#supersized").wrap("<a " + imageLink + "></a>");
                              
                              if (options.thumbnail_navigation == 1){
                              //Load previous thumbnail
                              $.currentSlide - 1 < 0  ? prevThumb = options.slides.length - 1 : prevThumb = $.currentSlide - 1;
                              $('#prevthumb').html($("<img/>").attr("src", options.slides[prevThumb].image));
                              
                              //Load next thumbnail
                              nextThumb = loadSlide;
                              $('#nextthumb').html($("<img/>").attr("src", options.slides[nextThumb].image));
                              }
                              
                              currentslide.prev().remove(); //Remove Old Image
                              
                              /**** End Image Loading ****/
                              
                              //Display slide counter
                              if (options.slide_counter == 1){
                                  $('#slidecounter .slidenumber').html($.currentSlide + 1);//**display current slide after checking if last
                              }
                              
                              //Captions
                             if (options.slide_captions == 1){
                                  (options.slides[$.currentSlide].title) ? $('#slidecaption').html(options.slides[$.currentSlide].title) : $('#slidecaption').html('') ; //*******Grab next slide's title from array
                             }
                              
                             nextslide.hide().addClass('activeslide')
                                  if (options.transition == 0){
                                       nextslide.show(); $.inAnimation = false;
                                  }
                                  if (options.transition == 1){
                                       nextslide.fadeIn(750, function(){$.inAnimation = false;});
                                  }
                                  if (options.transition == 2){
                                       nextslide.show("slide", { direction: "up" }, 'slow', function(){$.inAnimation = false;});
                                  }
                                  if (options.transition == 3){
                                       nextslide.show("slide", { direction: "right" }, 'slow', function(){$.inAnimation = false;});
                                  }
                                  if (options.transition == 4){
                                       nextslide.show("slide", { direction: "down" }, 'slow', function(){$.inAnimation = false;});
                                  }
                                  if (options.transition == 5){
                                       nextslide.show("slide", { direction: "left" }, 'slow', function(){$.inAnimation = false;});
                                  }
                             $('#supersized').resizenow();
                         }
                         
                         //Slideshow Previous Slide
                         function prevslide() {
                              if($.inAnimation) return false;
                              else $.inAnimation = true;
                              var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
                             
                             var currentslide = $('#supersized .activeslide');
                             currentslide.removeClass('activeslide');
                              
                             if ( currentslide.length == 0 ) currentslide = $('#supersized a:first');
                                   
                             var nextslide =  currentslide.prev().length ? currentslide.prev() : $('#supersized a:last'); //****** If equal to total length of array
                             var prevslide =  nextslide.next().length ? nextslide.next() : $('#supersized a:first');
                                        
                              //Get current slide number
                              $.currentSlide == 0 ?  $.currentSlide = options.slides.length - 1 : $.currentSlide-- ;
                              
                              /**** Image Loading ****/
                              //Load next image
                              loadSlide=false;
                              $.currentSlide - 1 < 0  ? loadSlide = options.slides.length - 1 : loadSlide = $.currentSlide - 1;
                              imageLink = (options.slides[loadSlide].url) ? "href='" + options.slides[loadSlide].url + "'" : "";
                              $("<img/>").attr("src", options.slides[loadSlide].image).prependTo("#supersized").wrap("<a " + imageLink + "></a>");
                              
                              if (options.thumbnail_navigation == 1){
                              //Load previous thumbnail
                              prevThumb = loadSlide;
                              $('#prevthumb').html($("<img/>").attr("src", options.slides[prevThumb].image));
                              
                              //Load next thumbnail
                              $.currentSlide == options.slides.length - 1 ? nextThumb = 0 : nextThumb = $.currentSlide + 1;
                              $('#nextthumb').html($("<img/>").attr("src", options.slides[nextThumb].image));
                              }
                              
                              currentslide.next().remove(); //Remove Old Image
                              
                              /**** End Image Loading ****/
                              
                              //Display slide counter
                              if (options.slide_counter == 1){
                                  $('#slidecounter .slidenumber').html($.currentSlide + 1);
                              }
                              
                              $('.prevslide').removeClass('prevslide');
                              prevslide.addClass('prevslide');
                              
                              //Captions
                             if (options.slide_captions == 1){
                                  (options.slides[$.currentSlide].title) ? $('#slidecaption').html(options.slides[$.currentSlide].title) : $('#slidecaption').html('') ; //*******Grab next slide's title from array
                             }
                              
                             nextslide.hide().addClass('activeslide')
                                  if (options.transition == 0){
                                       nextslide.show(); $.inAnimation = false;
                                  }
                                  if (options.transition == 1){
                                       nextslide.fadeIn(750, function(){$.inAnimation = false;});
                                  }
                                  if (options.transition == 2){
                                       nextslide.show("slide", { direction: "down" }, 'slow', function(){$.inAnimation = false;});
                                  }
                                  if (options.transition == 3){
                                       nextslide.show("slide", { direction: "left" }, 'slow', function(){$.inAnimation = false;});
                                  }
                                  if (options.transition == 4){
                                       nextslide.show("slide", { direction: "up" }, 'slow', function(){$.inAnimation = false;});
                                  }
                                  if (options.transition == 5){
                                       nextslide.show("slide", { direction: "right" }, 'slow', function(){$.inAnimation = false;});
                                  }
                                  
                                  $('#supersized').resizenow();//Fix for resize mid-transition
                         }
                         
                         $.fn.supersized.defaults = { 
                                   startwidth: 4,  
                                   startheight: 3,
                                   vertical_center: 1,
                                   slideshow: 1,
                                   navigation:1,
                                   thumbnail_navigation: 1,
                                   transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
                                   pause_hover: 0,
                                   slide_counter: 1,
                                   slide_captions: 1,
                                   slide_interval: 5000,
                                   start_slide: 1,
                                   slide_autoplay:0,
                         };
                         
                    })(jQuery);
                    
                     
                    

                    • 7. Re: need some help tweaking the supersized jquery plugin
                      luadke Community Member

                      There must be some genie who can prove their knowledge and help here. Please?