playground
/
ResponsiveSlides.js
mirror of https://github.com/viljamis/ResponsiveSlides.js
1
0
Fork 0
Code Issues Releases Activity
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
aa19c50f39
commit
faf1bd2309
5 changed files with 40 additions and 35 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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.
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

2
example/index.html
Unescape View File

@ -5,7 +5,7 @@
<title>ResponsiveSlides.js &middot; Responsive jQuery Slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<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>
jQuery(function() {

16
example/styles.css
Unescape View File

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

47
responsiveslides.js
Unescape View File

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

8
responsiveslides.min.js vendored
Unescape View File

@ -1,5 +1,5 @@
/*! 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),
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)},
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(),
c.parent().addClass(j))})})}})();g();a(o).resize(function(){g()})})}})(jQuery,this,0);
(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 '+
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="#"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("#"+
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);
Write Preview
Loading…
Cancel
Save