diff --git a/core.html b/core.html new file mode 100644 index 0000000..4360dbc --- /dev/null +++ b/core.html @@ -0,0 +1,65 @@ + + + + + + + Supersized - Full Screen Background/Slideshow jQuery Plugin + + + + + + + + + + + + + + + +
 
+ + +
+
+

+

+ If all you want is a fullscreen background, and no slideshow, this version of Supersized is stripped down to just the core functionality. +

+
+
+ + +
+ + + diff --git a/default.html b/default.html new file mode 100644 index 0000000..3686d11 --- /dev/null +++ b/default.html @@ -0,0 +1,85 @@ + + + + + + + Supersized - Full Screen Background/Slideshow jQuery Plugin + + + + + + + + + + + + + + + + + +
 
+ + +
+ +
+
+ + + +
+
+ + +
+ / +
+ + +
+ + + + + + +
+
+ + + + diff --git a/images/back.png b/images/back.png new file mode 100644 index 0000000..8a0e01e Binary files /dev/null and b/images/back.png differ diff --git a/images/back_dull.png b/images/back_dull.png new file mode 100644 index 0000000..5933af9 Binary files /dev/null and b/images/back_dull.png differ diff --git a/images/buildinternet-logo.png b/images/buildinternet-logo.png new file mode 100644 index 0000000..dd58ef9 Binary files /dev/null and b/images/buildinternet-logo.png differ diff --git a/images/forward.png b/images/forward.png new file mode 100644 index 0000000..ceb5346 Binary files /dev/null and b/images/forward.png differ diff --git a/images/forward_dull.png b/images/forward_dull.png new file mode 100644 index 0000000..ecfe1a2 Binary files /dev/null and b/images/forward_dull.png differ diff --git a/images/nav-bg.png b/images/nav-bg.png new file mode 100644 index 0000000..983c373 Binary files /dev/null and b/images/nav-bg.png differ diff --git a/images/pause.png b/images/pause.png new file mode 100644 index 0000000..28d95e5 Binary files /dev/null and b/images/pause.png differ diff --git a/images/pause_dull.png b/images/pause_dull.png new file mode 100644 index 0000000..cdcbc05 Binary files /dev/null and b/images/pause_dull.png differ diff --git a/images/play.png b/images/play.png new file mode 100644 index 0000000..4ea14a0 Binary files /dev/null and b/images/play.png differ diff --git a/images/play_dull.png b/images/play_dull.png new file mode 100644 index 0000000..e462d1f Binary files /dev/null and b/images/play_dull.png differ diff --git a/images/progress.gif b/images/progress.gif new file mode 100644 index 0000000..f56e2b3 Binary files /dev/null and b/images/progress.gif differ diff --git a/images/supersized-logo.png b/images/supersized-logo.png new file mode 100644 index 0000000..b1243a2 Binary files /dev/null and b/images/supersized-logo.png differ diff --git a/js/effects.core.js b/js/effects.core.js new file mode 100644 index 0000000..8c91fe4 --- /dev/null +++ b/js/effects.core.js @@ -0,0 +1,509 @@ +/* + * jQuery UI Effects 1.5.3 + * + * Copyright (c) 2008 Aaron Eisenberger (aaronchi@gmail.com) + * Dual licensed under the MIT (MIT-LICENSE.txt) + * and GPL (GPL-LICENSE.txt) licenses. + * + * http://docs.jquery.com/UI/Effects/ + */ +;(function($) { + +$.effects = $.effects || {}; //Add the 'effects' scope + +$.extend($.effects, { + save: function(el, set) { + for(var i=0;i'); + 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; + } +}); + +/* + * + * TERMS OF USE - EASING EQUATIONS + * + * Open source under the BSD License. + * + * Copyright © 2001 Robert Penner + * 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. + * + */ + +})(jQuery); diff --git a/js/effects.slide.js b/js/effects.slide.js new file mode 100644 index 0000000..3571337 --- /dev/null +++ b/js/effects.slide.js @@ -0,0 +1,50 @@ +/* + * jQuery UI Effects Slide + * + * Copyright (c) 2008 Aaron Eisenberger (aaronchi@gmail.com) + * Dual licensed under the MIT (MIT-LICENSE.txt) + * and GPL (GPL-LICENSE.txt) licenses. + * + * http://docs.jquery.com/UI/Effects/Slide + * + * Depends: + * effects.core.js + */ +(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); diff --git a/plainslides.html b/plainslides.html new file mode 100644 index 0000000..ad6d2f2 --- /dev/null +++ b/plainslides.html @@ -0,0 +1,80 @@ + + + + + + + Supersized - Full Screen Background/Slideshow jQuery Plugin + + + + + + + + + + + + + + + + + + +
 
+ + +
+
+

+

+ If you want to run a fullscreen slideshow behind your content, this demo is for you. +

+
+
+ + + +
+ + + + diff --git a/slidehover.html b/slidehover.html new file mode 100644 index 0000000..78ae3e6 --- /dev/null +++ b/slidehover.html @@ -0,0 +1,86 @@ + + + + + + + Supersized - Full Screen Background/Slideshow jQuery Plugin + + + + + + + + + + + + + + + + + +
 
+ + +
+ + +
+
+ + +
+ / +
+ + +
+ +
+
+ + + + + + +
+
+ + + + diff --git a/slides/fence.jpg b/slides/fence.jpg new file mode 100644 index 0000000..5ec7e41 Binary files /dev/null and b/slides/fence.jpg differ diff --git a/slides/tower.jpg b/slides/tower.jpg new file mode 100644 index 0000000..96642fc Binary files /dev/null and b/slides/tower.jpg differ diff --git a/slides/tracks.jpg b/slides/tracks.jpg new file mode 100644 index 0000000..ab2557a Binary files /dev/null and b/slides/tracks.jpg differ diff --git a/supersized.3.0.core.js b/supersized.3.0.core.js new file mode 100644 index 0000000..0990142 --- /dev/null +++ b/supersized.3.0.core.js @@ -0,0 +1,84 @@ +/* +Supersized - Fullscreen Slideshow jQuery Plugin +Version 3.0 - Core +By Sam Dunn (www.buildinternet.com // www.onemightyroar.com) +Version: supersized.3.0.js +Website: www.buildinternet.com/project/supersized +*/ + +(function($){ + + //Resize image on ready or resize + $.fn.supersized = function() { + + var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options); + $.currentSlide = 0; + + //Set current image + $("").attr("src", options.slides[$.currentSlide].image).appendTo("#supersized"); + + $(window).bind("load", function(){ + + $('#loading').hide(); + $('#supersized').fadeIn('fast'); + + $('#supersized').resizenow(); + + }); + + $(document).ready(function() { + $('#supersized').resizenow(); + }); + + + $(window).bind("resize", function(){ + $('#supersized').resizenow(); + }); + + $('#supersized').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; + }); + }; + + $.fn.supersized.defaults = { + startwidth: 4, + startheight: 3, + vertical_center: 1 + }; + +})(jQuery); + diff --git a/supersized.3.0.js b/supersized.3.0.js new file mode 100644 index 0000000..283dba0 --- /dev/null +++ b/supersized.3.0.js @@ -0,0 +1,395 @@ +/* +Supersized - Fullscreen Slideshow jQuery Plugin +Version 3.0 +By Sam Dunn (www.buildinternet.com // www.onemightyroar.com) +Version: supersized.3.0.js +Website: www.buildinternet.com/project/supersized +*/ + +(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 + "'" : ""; + $("").attr("src", options.slides[options.slides.length - 1].image).appendTo("#supersized").wrap("");//Doesnt account for start slide + + //Set current image + imageLink = (options.slides[$.currentSlide].url) ? "href='" + options.slides[$.currentSlide].url + "'" : ""; + $("").attr("src", options.slides[$.currentSlide].image).appendTo("#supersized").wrap(""); + + //Set next image + imageLink = (options.slides[$.currentSlide + 1].url) ? "href='" + options.slides[$.currentSlide + 1].url + "'" : ""; + $("").attr("src", options.slides[$.currentSlide + 1].image).appendTo("#supersized").wrap(""); + + $(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($("").attr("src", options.slides[prevThumb].image)); + + //Load next thumbnail + $.currentSlide == options.slides.length - 1 ? nextThumb = 0 : nextThumb = $.currentSlide + 1; + $('#nextthumb').show().html($("").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 + "'" : ""; + $("").attr("src", options.slides[loadSlide].image).appendTo("#supersized").wrap(""); + + if (options.thumbnail_navigation == 1){ + //Load previous thumbnail + $.currentSlide - 1 < 0 ? prevThumb = options.slides.length - 1 : prevThumb = $.currentSlide - 1; + $('#prevthumb').html($("").attr("src", options.slides[prevThumb].image)); + + //Load next thumbnail + nextThumb = loadSlide; + $('#nextthumb').html($("").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 + "'" : ""; + $("").attr("src", options.slides[loadSlide].image).prependTo("#supersized").wrap(""); + + if (options.thumbnail_navigation == 1){ + //Load previous thumbnail + prevThumb = loadSlide; + $('#prevthumb').html($("").attr("src", options.slides[prevThumb].image)); + + //Load next thumbnail + $.currentSlide == options.slides.length - 1 ? nextThumb = 0 : nextThumb = $.currentSlide + 1; + $('#nextthumb').html($("").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); + diff --git a/supersized.css b/supersized.css new file mode 100644 index 0000000..d2a2294 --- /dev/null +++ b/supersized.css @@ -0,0 +1,116 @@ +/* +Supersized - Fullscreen Slideshow jQuery Plugin Stylesheet Version 3.0 +By Sam Dunn (www.buildinternet.com // www.onemightyroar.com) +Version: supersized.3.0.js +Website: www.buildinternet.com/project/supersized +*/ + + *{ + margin:0; + padding:0; + } + a{ + color:#8FC2FF; + text-decoration: none; + outline: none; + } + img{ + border:none; + } + body { + overflow:hidden;/*Needed to eliminate scrollbars*/ + background:#000; + } + /*Area to place content normally*/ + #content-wrapper{ + width:100%; + height:100%; + position:absolute; + top:0; + overflow:auto; + z-index:4; + text-align:center; + } + + /*Controls Section*/ + #controls-wrapper{ + margin:0px auto; + height:62px; + width:100%; + bottom:0; + z-index: 5; + background:url('images/nav-bg.png') repeat-x; + position:absolute; + } + #controls{ + overflow: hidden; + height: 100%; + text-align:left; + z-index: 5; + padding:0 114px; /* Increase padding to give thumbnails room */ + } + #slidecounter{ + float:left; + color:#888; + font:23px "Helvetica Neue", "Helvetica", Arial, sans-serif; + font-weight:bold; + text-shadow: #000 0px -1px 0px; + margin:19px 10px 18px 20px; + } + #slidecaption{ + overflow: hidden; + float:left; + color:#FFF; + font:16px "Helvetica Neue", "Helvetica", Arial, sans-serif; + font-weight:bold; + text-shadow: #000 0px 2px 0px; + margin:23px 20px 23px 0; + } + + + /*Supersized Link*/ + .stamp{ float: right; margin: 15px 30px 0 0;} + + + /*Supersize Plugin Styles*/ + #navigation{ + float: right; + margin:10px 20px 0 0; + } + #loading { + position: absolute; + top: 49.5%; + left: 49.5%; + z-index: 10; + width: 24px; + height: 24px; + text-indent: -999em; + background-image: url(images/progress.gif); + } + #supersized{ + position:fixed; + } + #supersized img{ -ms-interpolation-mode: bicubic; } + #supersized img, #supersized a{ + height:100%; + width:100%; + position:absolute; + z-index: -1; + } + + #supersized .prevslide, #supersized .prevslide img{ + z-index: 1; + } + #supersized .activeslide, #supersized .activeslide img{ + z-index: 2; + } + + #nextthumb, #prevthumb{ z-index:6; display:none; position:absolute; bottom:12px; height:75px; width:100px; overflow:hidden; border:2px solid #fff; -webkit-box-shadow: 0px 0px 5px #000; } + #nextthumb{ right:12px; } + #prevthumb{ left:12px; } + #nextthumb img, #prevthumb img{ width:150px; } + #nextthumb:active, #prevthumb:active{ bottom:10px; } + + /*Add hover pointer*/ + #controls > *:hover, #nextthumb:hover, #prevthumb:hover{ cursor:pointer; } + \ No newline at end of file