Viljami S
13 years ago
3 changed files with 403 additions and 287 deletions
@ -1,140 +1,157 @@ |
|||||||
/*! ResponsiveSlides.js v1.06. (c) 2011-2012 Viljami Salminen. MIT License. http://responsive-slides.viljamis.com */ |
/*! ResponsiveSlides.js v1.07. (c) 2011 Viljami Salminen. MIT License. http://responsive-slides.viljamis.com */ |
||||||
(function($, window, i) { |
(function($, window, i) { |
||||||
|
|
||||||
$.fn.responsiveSlides = function( options ) { |
$.fn.responsiveSlides = function( options ) { |
||||||
// Settings
|
|
||||||
|
// Merge default settings with optional arguments
|
||||||
var settings = $.extend({ |
var settings = $.extend({ |
||||||
'speed' : 4000, |
"auto": true, |
||||||
'fade' : 1000, |
"fade": 1000, |
||||||
'auto' : true, |
"maxwidth": "none", |
||||||
'maxwidth' : 'none' |
"speed": 4000 |
||||||
}, options); |
}, options); |
||||||
|
|
||||||
return this.each( function () { |
return this.each( function () { |
||||||
|
|
||||||
|
// increment i, which is used for namespacing
|
||||||
i++; |
i++; |
||||||
|
|
||||||
|
// save handle for the slideshow
|
||||||
var $this = $( this ); |
var $this = $( this ); |
||||||
|
|
||||||
var slideshow = function () { |
var $slide = $this.children(), |
||||||
var $slide = $this.find('img'), |
$img = $( "img", this ), |
||||||
hasTouch = 'ontouchstart' in window, |
|
||||||
startEvent = hasTouch ? 'touchstart' : 'mousedown', |
namespace = "rslides" + i, |
||||||
namespace = 'rslides', |
|
||||||
namespace_i = namespace + i, |
activeClass = namespace + "_here", |
||||||
namespace_i_class = namespace + ' ' + namespace_i, |
slideClassPrefix = namespace + "_s", |
||||||
active_class = namespace + '_here', |
|
||||||
visible_class = namespace_i + '_on', |
tabsClass = namespace + "_tabs", |
||||||
slide_class_prefix = namespace_i + '_s', |
$pagination = $( "<ul class=\"" + tabsClass + "\" />" ), |
||||||
tabs_class = namespace_i + '_tabs', |
|
||||||
fadetime = parseFloat(settings.fade), |
visible = {"float": "left", "position": "relative"}, |
||||||
$pagination = $('<ul class="' + namespace + '_tabs ' + tabs_class + '" />'), |
hidden = {"float": "none", "position": "absolute"}, |
||||||
visible = { 'position': 'relative', 'float': 'left' }, |
|
||||||
hidden = { 'position': 'absolute', 'float': 'none' }; |
// start index and number of slides
|
||||||
|
index = 0, |
||||||
|
length = $slide.size(); |
||||||
|
|
||||||
|
// animations
|
||||||
|
var slideTo = function( idx ) { |
||||||
|
|
||||||
|
$slide |
||||||
|
.stop() |
||||||
|
.fadeOut( settings.fade, function() { |
||||||
|
$( this ).css( hidden ); |
||||||
|
}) |
||||||
|
.eq( idx ) |
||||||
|
.fadeIn( settings.fade, function() { |
||||||
|
$( this ).css( visible ); |
||||||
|
index = idx; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
// Only run if there's more than one slide
|
// Only run if there's more than one slide
|
||||||
if ($this.find($slide).length > 1) { |
if ( $slide.size() > 1 ) { |
||||||
|
|
||||||
|
// add ids to each slide
|
||||||
$slide.each( function ( i ) { |
$slide.each( function ( i ) { |
||||||
this.id = slide_class_prefix + i; |
this.id = slideClassPrefix + i; |
||||||
}); |
}); |
||||||
|
|
||||||
$slide.css({ |
// add css to the slideshow
|
||||||
'top': 0, |
$this.css({ |
||||||
'left': 0, |
"max-width": settings.maxwidth |
||||||
'width': '100%', |
|
||||||
'height': 'inherit', |
|
||||||
'position': 'absolute' |
|
||||||
}); |
}); |
||||||
|
|
||||||
$this.css({ |
// hide all slides, then show first one
|
||||||
'max-width': parseFloat(settings.maxwidth), |
$slide |
||||||
'width': '100%', |
.hide() |
||||||
'overflow': 'hidden', |
.eq( 0 ) |
||||||
'position': 'relative' |
.css( visible ) |
||||||
}) |
.show(); |
||||||
.addClass(namespace_i_class) |
|
||||||
.find(':first-child').css(visible).end() |
|
||||||
.find($slide + ':gt(0)').hide(); |
|
||||||
|
|
||||||
// Auto: true
|
// Auto: true
|
||||||
if ( settings.auto === true ) { |
if ( settings.auto === true ) { |
||||||
|
|
||||||
|
// rotate slides automatically
|
||||||
setInterval( function () { |
setInterval( function () { |
||||||
$this.find(':first-child').fadeOut(fadetime, function () { |
var idx = index + 1 < length ? index + 1 : 0; |
||||||
$(this).css(hidden); |
slideTo( idx ); |
||||||
}).next($slide).fadeIn(fadetime, function () { |
}, settings.speed ); |
||||||
$(this).css(visible); |
|
||||||
}).end().appendTo($this); |
|
||||||
}, parseFloat(settings.speed)); |
|
||||||
|
|
||||||
|
} |
||||||
// Auto: false
|
// Auto: false
|
||||||
} else { |
else { |
||||||
var t = ''; |
|
||||||
|
// build pagination
|
||||||
|
var tabMarkup = []; |
||||||
$slide.each( function( i ) { |
$slide.each( function( i ) { |
||||||
var n = i + 1; |
var n = i + 1; |
||||||
t += |
|
||||||
'<li>' + |
|
||||||
'<a href="#" class="' + slide_class_prefix + n + '">' + n + '</a>' + |
|
||||||
'</li>'; |
|
||||||
}); |
|
||||||
$pagination.append(t); |
|
||||||
|
|
||||||
$this.after($pagination).find(':first-child').addClass(visible_class); |
|
||||||
$('.' + slide_class_prefix + '1').parent().addClass(active_class); |
|
||||||
|
|
||||||
$('.' + tabs_class + ' a').each(function (i) { |
tabMarkup.push( "<li>" ); |
||||||
|
tabMarkup.push( "<a href=\"#" + slideClassPrefix + n + "\" " ); |
||||||
|
tabMarkup.push( "class=\"" + slideClassPrefix + n + "\">" + n + "</a>" ); |
||||||
|
tabMarkup.push( "</li>" ); |
||||||
|
}); |
||||||
|
$pagination.append( tabMarkup.join("") ); |
||||||
|
|
||||||
var $el = $(this); |
var $tabs = $pagination.find( "a" ); |
||||||
|
|
||||||
$el.bind('click', function (e) { |
// add click/touch event handler and set first tab active
|
||||||
|
$tabs.on( "ontouchstart" in window ? "touchstart" : "click", function( e ) { |
||||||
e.preventDefault(); |
e.preventDefault(); |
||||||
}); |
|
||||||
|
|
||||||
$el.bind(startEvent, function () { |
// get index of clicked tab
|
||||||
|
var idx = $tabs.index( this ); |
||||||
|
|
||||||
// Prevent clicking if animated
|
// break here if element is already active
|
||||||
if ($('.' + visible_class + ':animated').length) { |
if( index === idx ) { |
||||||
return false; |
return; |
||||||
} |
} |
||||||
|
|
||||||
if (!($el.parent().hasClass(active_class))) { |
// remove active state from old tab and set new one
|
||||||
$('.' + tabs_class + ' li').removeClass(active_class); |
$tabs |
||||||
$('.' + visible_class).stop().fadeOut(fadetime, function () { |
.closest( "li" ) |
||||||
$(this).removeClass(visible_class).css(hidden); |
.removeClass( activeClass ) |
||||||
}).end(); |
.eq( idx ) |
||||||
$('#' + slide_class_prefix + i).stop().fadeIn(fadetime, function () { |
.addClass( activeClass ); |
||||||
$(this).addClass(visible_class).css(visible); |
|
||||||
}).end(); |
// do the animation
|
||||||
$el.parent().addClass(active_class); |
slideTo( idx ); |
||||||
|
}) |
||||||
|
.eq( 0 ) |
||||||
|
.closest( "li" ) |
||||||
|
.addClass( activeClass ); |
||||||
|
|
||||||
|
// inject pagination
|
||||||
|
$this.after( $pagination ); |
||||||
} |
} |
||||||
}); |
|
||||||
}); |
|
||||||
} |
} |
||||||
|
|
||||||
} |
|
||||||
}; |
// only add fallback if maxwidth isn't supported and maxwidth is set
|
||||||
|
if ( typeof document.body.style.maxWidth === "undefined" && options && options.maxwidth ) { |
||||||
|
|
||||||
// Fallback to make IE6 support CSS max-width
|
// Fallback to make IE6 support CSS max-width
|
||||||
var widthSupport = function() { |
var widthSupport = function() { |
||||||
var maxwidth = parseFloat(settings.maxwidth); |
|
||||||
if (options && options.maxwidth) { |
$this.css( "width", "100%" ); |
||||||
if (typeof document.body.style.maxHeight === 'undefined') { |
|
||||||
$this.each(function () { |
if ( $this.width() > settings.maxwidth ) { |
||||||
$this.css('width', '100%'); |
$this.css( "width", settings.maxwidth ); |
||||||
if ($this.width() > maxwidth) { |
|
||||||
$this.css('width', maxwidth); |
|
||||||
} else if ($this.width() < maxwidth) { |
|
||||||
$this.css('width', '100%'); |
|
||||||
} |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
} |
||||||
}; |
}; |
||||||
|
|
||||||
// Call once
|
|
||||||
slideshow(); |
|
||||||
widthSupport(); |
widthSupport(); |
||||||
// Call on resize
|
// bind on window resize
|
||||||
$(window).resize(function () { |
$( window ).on( "resize", function () { |
||||||
widthSupport(); |
widthSupport(); |
||||||
}); |
}); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
}); |
}); |
||||||
}; |
}; |
||||||
|
|
||||||
})(jQuery, this, 0); |
})(jQuery, this, 0); |
||||||
Loading…
Reference in new issue