Browse Source

Makes the styling of pagination & multiple slideshows easier (all paginations and slideshows have now the same classes that you can use in your css).

pull/21/head
Viljami S 13 years ago
parent
commit
faf1bd2309
  1. 2
      README.md
  2. 2
      example/index.html
  3. 16
      example/styles.css
  4. 47
      responsiveslides.js
  5. 8
      responsiveslides.min.js

2
README.md

@ -4,7 +4,7 @@
[ResponsiveSlides.js](http://responsive-slides.viljamis.com/) is a tiny jQuery plugin that creates a responsive slideshow using images inside a single container. It works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don't natively support it. Only dependency is [jQuery](http://jquery.com/) and that all the images are same size. [ResponsiveSlides.js](http://responsive-slides.viljamis.com/) is a tiny jQuery plugin that creates a responsive slideshow using images inside a single container. It works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don't natively support it. Only dependency is [jQuery](http://jquery.com/) and that all the images are same size.
Biggest difference to other responsive slideshow plugins is the file size (797 bytes minified and gzipped) + that this one doesn't try to do everything. ResponsiveSlides.js has basically only two different modes: Either it just automatically fades the images, or operates as a responsive image container with pagination to navigate/fade between slides. Biggest difference to other responsive slideshow plugins is the file size (809 bytes minified and gzipped) + that this one doesn't try to do everything. ResponsiveSlides.js has basically only two different modes: Either it just automatically fades the images, or operates as a responsive image container with pagination to navigate/fade between slides.
Usage Instructions and demo Usage Instructions and demo

2
example/index.html

@ -5,7 +5,7 @@
<title>ResponsiveSlides.js &middot; Responsive jQuery Slideshow</title> <title>ResponsiveSlides.js &middot; Responsive jQuery Slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="styles.css?v1.03" /> <link rel="stylesheet" href="styles.css?v1.03" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../responsiveslides.min.js"></script> <script src="../responsiveslides.min.js"></script>
<script> <script>
jQuery(function() { jQuery(function() {

16
example/styles.css

@ -22,14 +22,14 @@ body {
padding: 20px; padding: 20px;
} }
#slides { .rslides1 {
-webkit-box-shadow: 0 0 20px #000; -webkit-box-shadow: 0 0 20px #000;
-moz-box-shadow: 0 0 20px #000; -moz-box-shadow: 0 0 20px #000;
box-shadow: 0 0 20px #000; box-shadow: 0 0 20px #000;
margin-bottom: 40px !important; margin-bottom: 40px;
} }
#slides2 { .rslides2 {
margin: 0 auto; margin: 0 auto;
} }
@ -55,7 +55,7 @@ a {
color: #fff; color: #fff;
} }
.rslides2_tabs { .rslides_tabs {
font-size: 18px; font-size: 18px;
margin: 0 auto 50px; margin: 0 auto 50px;
padding: 10px 0; padding: 10px 0;
@ -69,21 +69,21 @@ a {
box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0); box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
} }
.rslides2_tabs li { .rslides_tabs li {
display: inline; display: inline;
} }
.rslides2_tabs li:first-child { .rslides_tabs li:first-child {
margin-left: 0; margin-left: 0;
} }
.rslides2_tabs a { .rslides_tabs a {
-webkit-tap-highlight-color: rgba(0,0,0,.01); -webkit-tap-highlight-color: rgba(0,0,0,.01);
padding: 8px 20px; padding: 8px 20px;
color: #666; color: #666;
} }
.rslides2_tabs .rslides2_here a { .rslides_tabs .rslides_here a {
color: #fff; color: #fff;
background: rgba(255,255,255,.1); background: rgba(255,255,255,.1);
font-weight: bold; font-weight: bold;

47
responsiveslides.js

@ -1,4 +1,4 @@
/*! ResponsiveSlides.js v1.05. (c) 2011 Viljami Salminen. MIT License. http://responsive-slides.viljamis.com */ /*! ResponsiveSlides.js v1.05. (c) 2011-2012 Viljami Salminen. MIT License. http://responsive-slides.viljamis.com */
(function ($, window, i) { (function ($, window, i) {
$.fn.responsiveSlides = function (options) { $.fn.responsiveSlides = function (options) {
// Settings // Settings
@ -15,13 +15,15 @@
var slideshow = function () { var slideshow = function () {
var $slide = $this.find('img'), var $slide = $this.find('img'),
namespace = 'rslides' + i, namespace = 'rslides',
activeClass = namespace + '_here', namespace_i = namespace + i,
visibleClass = namespace + '_on', namespace_i_class = namespace + ' ' + namespace_i,
slideClassPrefix = namespace + '_s', active_class = namespace + '_here',
tabsClass = namespace + '_tabs', visible_class = namespace_i + '_on',
$pagination = $('<ul class="' + tabsClass + '" />'), slide_class_prefix = namespace_i + '_s',
tabs_class = namespace_i + '_tabs',
fadetime = parseFloat(settings.fade), fadetime = parseFloat(settings.fade),
$pagination = $('<ul class="' + namespace + '_tabs ' + tabs_class + '" />'),
visible = { 'position': 'relative', 'float': 'left' }, visible = { 'position': 'relative', 'float': 'left' },
hidden = { 'position': 'absolute', 'float': 'none' }; hidden = { 'position': 'absolute', 'float': 'none' };
@ -29,7 +31,7 @@
if ($this.find($slide).length > 1) { if ($this.find($slide).length > 1) {
$slide.each(function (i) { $slide.each(function (i) {
this.id = slideClassPrefix + i; this.id = slide_class_prefix + i;
}); });
$slide.css({ $slide.css({
@ -46,6 +48,7 @@
'overflow': 'hidden', 'overflow': 'hidden',
'position': 'relative' 'position': 'relative'
}) })
.addClass(namespace_i_class)
.find(':first-child').css(visible).end() .find(':first-child').css(visible).end()
.find($slide + ':gt(0)').hide(); .find($slide + ':gt(0)').hide();
@ -66,32 +69,34 @@
var n = i + 1; var n = i + 1;
t += t +=
'<li>' + '<li>' +
'<a href="#' + slideClassPrefix + n + '"' + '<a href="#"' +
'class="' + slideClassPrefix + n + '">' + n + '</a>' + 'class="' + slide_class_prefix + n + '">' + n + '</a>' +
'</li>'; '</li>';
}); });
$pagination.append(t); $pagination.append(t);
$this.after($pagination).find(':first-child').addClass(visibleClass); $this.after($pagination).find(':first-child').addClass(visible_class);
$('.' + slideClassPrefix + '1').parent().addClass(activeClass); $('.' + slide_class_prefix + '1').parent().addClass(active_class);
$('.' + tabsClass + ' a').each(function (i) { $('.' + tabs_class + ' a').each(function (i) {
var $el = $(this); var $el = $(this);
$el.click(function (e) { $el.click(function (e) {
e.preventDefault(); e.preventDefault();
// Prevent clicking if animated // Prevent clicking if animated
if ($('.' + visibleClass + ':animated').length) { if ($('.' + visible_class + ':animated').length) {
return false; return false;
} }
if (!($el.parent().hasClass(activeClass))) {
$('.' + tabsClass + ' li').removeClass(activeClass); if (!($el.parent().hasClass(active_class))) {
$('.' + visibleClass).stop().fadeOut(fadetime, function () { $('.' + tabs_class + ' li').removeClass(active_class);
$(this).removeClass(visibleClass).css(hidden); $('.' + visible_class).stop().fadeOut(fadetime, function () {
$(this).removeClass(visible_class).css(hidden);
}).end(); }).end();
$('#' + slideClassPrefix + i).stop().fadeIn(fadetime, function () { $('#' + slide_class_prefix + i).stop().fadeIn(fadetime, function () {
$(this).addClass(visibleClass).css(visible); $(this).addClass(visible_class).css(visible);
}).end(); }).end();
$el.parent().addClass(activeClass); $el.parent().addClass(active_class);
} }
}); });
}); });

8
responsiveslides.min.js vendored

@ -1,5 +1,5 @@
/*! ResponsiveSlides.js v1.05. (c) 2011-2012 Viljami Salminen. MIT License. http://responsive-slides.viljamis.com */ /*! ResponsiveSlides.js v1.05. (c) 2011-2012 Viljami Salminen. MIT License. http://responsive-slides.viljamis.com */
(function(a,o,n){a.fn.responsiveSlides=function(e){var f=a.extend({speed:4E3,fade:1E3,auto:!0,maxwidth:"none"},e);return this.each(function(){n++;var b=a(this),g=function(){var a=parseFloat(f.maxwidth);e&&e.maxwidth&&"undefined"===typeof document.body.style.maxHeight&&b.each(function(){b.css("width","100%");b.width()>a?b.css("width",a):b.width()<a&&b.css("width","100%")})};(function(){var d=b.find("img"),c="rslides"+n,j=c+"_here",h=c+"_on",i=c+"_s",e=c+"_tabs",c=a('<ul class="'+e+'" />'),k=parseFloat(f.fade), (function(a,o,n){a.fn.responsiveSlides=function(e){var f=a.extend({speed:4E3,fade:1E3,auto:!0,maxwidth:"none"},e);return this.each(function(){n++;var b=a(this),g=function(){var a=parseFloat(f.maxwidth);e&&e.maxwidth&&"undefined"===typeof document.body.style.maxHeight&&b.each(function(){b.css("width","100%");b.width()>a?b.css("width",a):b.width()<a&&b.css("width","100%")})};(function(){var d=b.find("img"),c="rslides"+n,e="rslides "+c,h=c+"_on",i=c+"_s",k=c+"_tabs",j=parseFloat(f.fade),c=a('<ul class="rslides_tabs '+
l={position:"relative","float":"left"},g={position:"absolute","float":"none"};if(1<b.find(d).length)if(d.each(function(a){this.id=i+a}),d.css({top:0,left:0,width:"100%",height:"inherit",position:"absolute"}),b.css({"max-width":parseFloat(f.maxwidth),width:"100%",overflow:"hidden",position:"relative"}).find(":first-child").css(l).end().find(d+":gt(0)").hide(),!0===f.auto)setInterval(function(){b.find(":first-child").fadeOut(k,function(){a(this).css(g)}).next(d).fadeIn(k,function(){a(this).css(l)}).end().appendTo(b)}, k+'" />'),l={position:"relative","float":"left"},g={position:"absolute","float":"none"};if(1<b.find(d).length)if(d.each(function(a){this.id=i+a}),d.css({top:0,left:0,width:"100%",height:"inherit",position:"absolute"}),b.css({"max-width":parseFloat(f.maxwidth),width:"100%",overflow:"hidden",position:"relative"}).addClass(e).find(":first-child").css(l).end().find(d+":gt(0)").hide(),!0===f.auto)setInterval(function(){b.find(":first-child").fadeOut(j,function(){a(this).css(g)}).next(d).fadeIn(j,function(){a(this).css(l)}).end().appendTo(b)},
parseFloat(f.speed));else{var m="";d.each(function(a){a+=1;m+='<li><a href="#'+i+a+'"class="'+i+a+'">'+a+"</a></li>"});c.append(m);b.after(c).find(":first-child").addClass(h);a("."+i+"1").parent().addClass(j);a("."+e+" a").each(function(b){var c=a(this);c.click(function(d){d.preventDefault();if(a("."+h+":animated").length)return!1;c.parent().hasClass(j)||(a("."+e+" li").removeClass(j),a("."+h).stop().fadeOut(k,function(){a(this).removeClass(h).css(g)}).end(),a("#"+i+b).stop().fadeIn(k,function(){a(this).addClass(h).css(l)}).end(), parseFloat(f.speed));else{var m="";d.each(function(a){a+=1;m+='<li><a href="#"class="'+i+a+'">'+a+"</a></li>"});c.append(m);b.after(c).find(":first-child").addClass(h);a("."+i+"1").parent().addClass("rslides_here");a("."+k+" a").each(function(b){var c=a(this);c.click(function(d){d.preventDefault();if(a("."+h+":animated").length)return!1;c.parent().hasClass("rslides_here")||(a("."+k+" li").removeClass("rslides_here"),a("."+h).stop().fadeOut(j,function(){a(this).removeClass(h).css(g)}).end(),a("#"+
c.parent().addClass(j))})})}})();g();a(o).resize(function(){g()})})}})(jQuery,this,0); i+b).stop().fadeIn(j,function(){a(this).addClass(h).css(l)}).end(),c.parent().addClass("rslides_here"))})})}})();g();a(o).resize(function(){g()})})}})(jQuery,this,0);
Loading…
Cancel
Save