Browse Source

Adds CSS3 transitions and fixes flickering + Make pause on hover option true by default.

pull/126/head
Viljami Salminen 12 years ago
parent
commit
98069a9952
  1. 88
      responsiveslides.js
  2. 14
      responsiveslides.min.js

88
responsiveslides.js

@ -1,4 +1,4 @@
/*! ResponsiveSlides.js v1.32
/*! ResponsiveSlides.js v1.5
* http://responsiveslides.com
* http://viljamis.com
*
@ -20,7 +20,7 @@
"nav": false, // Boolean: Show navigation, true or false
"random": false, // Boolean: Randomize the order of the slides, true or false
"pause": false, // Boolean: Pause on hover, true or false
"pauseControls": false, // Boolean: Pause when hovering controls, true or false
"pauseControls": true, // Boolean: Pause when hovering controls, true or false
"prevText": "Previous", // String: Text for the "previous" button
"nextText": "Next", // String: Text for the "next" button
"maxwidth": "", // Integer: Max-width of the slideshow, in pixels
@ -38,11 +38,7 @@
var $this = $(this),
// Local variables
selectTab,
startCycle,
restartCycle,
rotate,
$tabs,
v, p, selectTab, startCycle, restartCycle, rotate, $tabs,
// Helpers
index = 0,
@ -66,27 +62,62 @@
$pager = $("<ul class='" + namespace + "_tabs " + namespaceIdx + "_tabs' />"),
// Styles for visible and hidden slides
visible = {"float": "left", "position": "relative"},
hidden = {"float": "none", "position": "absolute"},
visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2},
hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1},
// Detect transition support
supportsTransitions = (function () {
var b = document.body || document.documentElement;
var s = b.style;
var p = 'transition';
if (typeof s[p] === 'string') {
return true;
}
// Tests for vendor specific prop
v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'];
p = p.charAt(0).toUpperCase() + p.substr(1);
var i;
for (i = 0; i < v.length; i++) {
if (typeof s[v[i] + p] === 'string') {
return true;
}
}
return false;
})(),
// Fading animation
slideTo = function (idx) {
settings.before();
$slide
.stop()
.fadeOut(fadeTime, function () {
$(this)
.removeClass(visibleClass)
.css(hidden);
})
.eq(idx)
.fadeIn(fadeTime, function () {
$(this)
.addClass(visibleClass)
.css(visible);
if (supportsTransitions) {
$slide
.removeClass(visibleClass)
.css(hidden)
.eq(idx)
.addClass(visibleClass)
.css(visible)
.delay(fadeTime);
setTimeout(function () {
settings.after();
index = idx;
});
}, fadeTime);
} else {
$slide
.stop()
.fadeOut(fadeTime, function () {
$(this)
.removeClass(visibleClass)
.css(hidden)
.css("opacity", 1);
})
.eq(idx)
.fadeIn(fadeTime, function () {
$(this)
.addClass(visibleClass)
.css(visible);
settings.after();
index = idx;
});
}
};
// Random order
@ -113,11 +144,24 @@
// Hide all slides, then show first one
$slide
.hide()
.css(hidden)
.eq(0)
.addClass(visibleClass)
.css(visible)
.show();
// CSS transitions
if (supportsTransitions) {
$slide
.show()
.css({
"-webkit-transition": "opacity " + fadeTime + "ms ease-in-out",
"-moz-transition": "opacity " + fadeTime + "ms ease-in-out",
"-o-transition": "opacity " + fadeTime + "ms ease-in-out",
"transition": "opacity " + fadeTime + "ms ease-in-out"
});
}
// Only run if there's more than one slide
if ($slide.size() > 1) {

14
responsiveslides.min.js vendored

@ -1,6 +1,8 @@
/*! http://responsiveslides.com v1.32 by @viljamis */
(function(d,E,w){d.fn.responsiveSlides=function(h){var b=d.extend({auto:!0,speed:1E3,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!1,prevText:"Previous",nextText:"Next",maxwidth:"",controls:"",namespace:"rslides",before:function(){},after:function(){}},h);return this.each(function(){w++;var e=d(this),n,q,i,k,l,m=0,f=e.children(),x=f.size(),r=parseFloat(b.speed),y=parseFloat(b.timeout),s=parseFloat(b.maxwidth),c=b.namespace,g=c+w,z=c+"_nav "+g+"_nav",t=c+"_here",j=g+"_on",A=g+"_s",
p=d("<ul class='"+c+"_tabs "+g+"_tabs' />"),B={"float":"left",position:"relative"},F={"float":"none",position:"absolute"},u=function(a){b.before();f.stop().fadeOut(r,function(){d(this).removeClass(j).css(F)}).eq(a).fadeIn(r,function(){d(this).addClass(j).css(B);b.after();m=a})};b.random&&(f.sort(function(){return Math.round(Math.random())-0.5}),e.empty().append(f));f.each(function(a){this.id=A+a});e.addClass(c+" "+g);h&&h.maxwidth&&e.css("max-width",s);f.hide().eq(0).addClass(j).css(B).show();if(1<
f.size()){if(y<r+100)return;if(b.pager){var v=[];f.each(function(a){a+=1;v+="<li><a href='#' class='"+A+a+"'>"+a+"</a></li>"});p.append(v);l=p.find("a");h.controls?d(b.controls).append(p):e.after(p);n=function(a){l.closest("li").removeClass(t).eq(a).addClass(t)}}b.auto&&(q=function(){k=setInterval(function(){f.stop(!0,!0);var a=m+1<x?m+1:0;b.pager&&n(a);u(a)},y)},q());i=function(){b.auto&&(clearInterval(k),q())};b.pause&&e.hover(function(){clearInterval(k)},function(){i()});b.pager&&(l.bind("click",
function(a){a.preventDefault();b.pauseControls||i();a=l.index(this);m===a||d("."+j).queue("fx").length||(n(a),u(a))}).eq(0).closest("li").addClass(t),b.pauseControls&&l.hover(function(){clearInterval(k)},function(){i()}));if(b.nav){c="<a href='#' class='"+z+" prev'>"+b.prevText+"</a><a href='#' class='"+z+" next'>"+b.nextText+"</a>";h.controls?d(b.controls).append(c):e.after(c);var c=d("."+g+"_nav"),C=d("."+g+"_nav.prev");c.bind("click",function(a){a.preventDefault();if(!d("."+j).queue("fx").length){var c=
f.index(d("."+j)),a=c-1,c=c+1<x?m+1:0;u(d(this)[0]===C[0]?a:c);b.pager&&n(d(this)[0]===C[0]?a:c);b.pauseControls||i()}});b.pauseControls&&c.hover(function(){clearInterval(k)},function(){i()})}}if("undefined"===typeof document.body.style.maxWidth&&h.maxwidth){var D=function(){e.css("width","100%");e.width()>s&&e.css("width",s)};D();d(E).bind("resize",function(){D()})}})}})(jQuery,this,0);
/*! http://responsiveslides.com v1.5 by @viljamis */
(function(b,I,A){b.fn.responsiveSlides=function(k){var a=b.extend({auto:!0,speed:1E3,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!0,prevText:"Previous",nextText:"Next",maxwidth:"",controls:"",namespace:"rslides",before:function(){},after:function(){}},k);return this.each(function(){A++;var f=b(this),s,q,t,l,n,p,m=0,e=f.children(),B=e.size(),g=parseFloat(a.speed),C=parseFloat(a.timeout),u=parseFloat(a.maxwidth),d=a.namespace,j=d+A,D=d+"_nav "+j+"_nav",v=d+"_here",h=j+"_on",E=j+"_s",
r=b("<ul class='"+d+"_tabs "+j+"_tabs' />"),w={"float":"left",position:"relative",opacity:1,zIndex:2},x={"float":"none",position:"absolute",opacity:0,zIndex:1},F=function(){var c=(document.body||document.documentElement).style,a="transition";if("string"===typeof c[a])return!0;s=["Moz","Webkit","Khtml","O","ms"];var a=a.charAt(0).toUpperCase()+a.substr(1),b;for(b=0;b<s.length;b++)if("string"===typeof c[s[b]+a])return!0;return!1}(),y=function(c){a.before();F?(e.removeClass(h).css(x).eq(c).addClass(h).css(w).delay(g),
setTimeout(function(){a.after();m=c},g)):e.stop().fadeOut(g,function(){b(this).removeClass(h).css(x).css("opacity",1)}).eq(c).fadeIn(g,function(){b(this).addClass(h).css(w);a.after();m=c})};a.random&&(e.sort(function(){return Math.round(Math.random())-0.5}),f.empty().append(e));e.each(function(a){this.id=E+a});f.addClass(d+" "+j);k&&k.maxwidth&&f.css("max-width",u);e.hide().css(x).eq(0).addClass(h).css(w).show();F&&e.show().css({"-webkit-transition":"opacity "+g+"ms ease-in-out","-moz-transition":"opacity "+
g+"ms ease-in-out","-o-transition":"opacity "+g+"ms ease-in-out",transition:"opacity "+g+"ms ease-in-out"});if(1<e.size()){if(C<g+100)return;if(a.pager){var z=[];e.each(function(a){a+=1;z+="<li><a href='#' class='"+E+a+"'>"+a+"</a></li>"});r.append(z);p=r.find("a");k.controls?b(a.controls).append(r):f.after(r);q=function(a){p.closest("li").removeClass(v).eq(a).addClass(v)}}a.auto&&(t=function(){n=setInterval(function(){e.stop(!0,!0);var b=m+1<B?m+1:0;a.pager&&q(b);y(b)},C)},t());l=function(){a.auto&&
(clearInterval(n),t())};a.pause&&f.hover(function(){clearInterval(n)},function(){l()});a.pager&&(p.bind("click",function(c){c.preventDefault();a.pauseControls||l();c=p.index(this);m===c||b("."+h).queue("fx").length||(q(c),y(c))}).eq(0).closest("li").addClass(v),a.pauseControls&&p.hover(function(){clearInterval(n)},function(){l()}));if(a.nav){d="<a href='#' class='"+D+" prev'>"+a.prevText+"</a><a href='#' class='"+D+" next'>"+a.nextText+"</a>";k.controls?b(a.controls).append(d):f.after(d);var d=b("."+
j+"_nav"),G=b("."+j+"_nav.prev");d.bind("click",function(c){c.preventDefault();if(!b("."+h).queue("fx").length){var d=e.index(b("."+h));c=d-1;d=d+1<B?m+1:0;y(b(this)[0]===G[0]?c:d);a.pager&&q(b(this)[0]===G[0]?c:d);a.pauseControls||l()}});a.pauseControls&&d.hover(function(){clearInterval(n)},function(){l()})}}if("undefined"===typeof document.body.style.maxWidth&&k.maxwidth){var H=function(){f.css("width","100%");f.width()>u&&f.css("width",u)};H();b(I).bind("resize",function(){H()})}})}})(jQuery,this,
0);

Loading…
Cancel
Save