playground
/
ResponsiveSlides.js
mirror of https://github.com/viljamis/ResponsiveSlides.js
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Next version

pull/21/head
Viljami S 13 years ago
parent
4dbfb67547
commit
c279d41a91
3 changed files with 403 additions and 287 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 116
      example/index.html
  2. 277
      example/styles.css
  3. 297
      responsiveslides.js

116
example/index.html
Unescape View File

@ -1,51 +1,79 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<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" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/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.js"></script>
<script> <script>
jQuery(function() { jQuery(function() {
// Slideshow 1
// Slideshow 1 $("#slides1").responsiveSlides({
$("#slides").responsiveSlides({ maxwidth: 800
maxwidth: 800 });
});
// Slideshow 2
// Slideshow 2 $("#slides2").responsiveSlides({
$("#slides2").responsiveSlides({ maxwidth: 800
fade: 300, });
auto: false,
maxwidth: 540 // Slideshow 3
}); $("#slides3").responsiveSlides({
auto: false,
}); fade: 300,
</script> maxwidth: 540
});
// Slideshow 4
$("#slides4").responsiveSlides({
auto: false,
fade: 300,
maxwidth: 540
});
});
</script>
</head> </head>
<body> <body>
<div id="wrapper"> <div id="wrapper">
<h1>ResponsiveSlides.js</h1> <h1>ResponsiveSlides.js</h1>
<h2>Responsive jQuery Slideshow plugin that weights under 1kb</h2> <h2>Responsive jQuery Slideshow plugin that weights under 1kb</h2>
<!-- Slideshow 1 --> <!-- Slideshow 1 -->
<div id="slides"> <ul id="slides1" class="slides">
<img src="1.jpg" alt="" /> <li><img src="1.jpg" alt="" /></li>
<img src="2.jpg" alt="" /> <li><img src="2.jpg" alt="" /></li>
<img src="3.jpg" alt="" /> <li><img src="3.jpg" alt="" /></li>
</div> </ul>
<!-- Slideshow 2 --> <!-- Slideshow 2 -->
<div id="slides2"> <ul id="slides2" class="slides">
<img src="1.jpg" alt="" /> <li><a href=""><img src="1.jpg" alt="" /></a></li>
<img src="2.jpg" alt="" /> <li><a href=""><img src="2.jpg" alt="" /></a></li>
<img src="3.jpg" alt="" /> <li><a href=""><img src="3.jpg" alt="" /></a></li>
</div> </ul>
<a href="http://responsive-slides.viljamis.com/" id="download">See the documentation</a> <!-- Slideshow 3 -->
<p class="footer">ResponsiveSlides.js is created by <a href="http://viljamis.com">@viljamis</a>. It's released under the MIT license. If you have any questions or feedback you can use the <a href="https://github.com/viljami/ResponsiveSlides.js">GitHub project page</a>.</p> <ul id="slides3" class="slides pagination">
</div> <li><img src="1.jpg" alt="" /></li>
<li><img src="2.jpg" alt="" /></li>
<li><img src="3.jpg" alt="" /></li>
</ul>
<!-- Slideshow 4 -->
<ul id="slides4" class="slides pagination">
<li><a href=""><img src="1.jpg" alt="" /></a></li>
<li><a href=""><img src="2.jpg" alt="" /></a></li>
<li><a href=""><img src="3.jpg" alt="" /></a></li>
</ul>
<p class="test">
mopmop
</p>
<a href="http://responsive-slides.viljamis.com/" id="download">See the documentation</a>
<p class="footer">ResponsiveSlides.js is created by <a href="http://viljamis.com">@viljamis</a>. It's released under the MIT license. If you have any questions or feedback you can use the <a href="https://github.com/viljami/ResponsiveSlides.js">GitHub project page</a>.</p>
</div>
</body> </body>
</html> </html>

277
example/styles.css
Unescape View File

@ -1,124 +1,195 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
html { html {
background: #222 url("bg.png") repeat; background: #222 url("bg.png") repeat;
} }
body { body {
-webkit-font-smoothing: antialiased; _width: 70%;
font: 14px/20px Helvetica, Arial, sans-serif; color: #888;
text-shadow: 0 -2px 1px #000; font: 14px/20px Helvetica, Arial, sans-serif;
color: #888; margin: 20px auto 0;
text-align: center; max-width: 800px;
_width: 70%; text-align: center;
max-width: 800px; text-shadow: 0 -2px 1px #000;
margin: 20px auto 0; -webkit-font-smoothing: antialiased;
} }
#wrapper { #wrapper {
padding: 20px; padding: 20px;
} }
.rslides1 { .slides {
-webkit-box-shadow: 0 0 20px #000; 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; -webkit-box-shadow: 0 0 20px #000;
margin-bottom: 40px; margin: 0 auto 40px !important;
} }
.rslides2 {
margin: 0 auto;
}
p {
text-align: left;
max-width: 500px;
margin: 0 auto 20px;
}
h1 {
font: 36px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
font-weight: 200;
}
h2 {
font: 16px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-bottom: 40px;
}
a {
text-decoration: none; /* moved these from js file to here */
color: #fff; .slides {
} overflow: hidden;
position: relative;
.rslides_tabs { width: 100%;
font-size: 18px;
margin: 0 auto 50px;
padding: 10px 0;
list-style: none; list-style: none;
padding: 0;
margin: 0;
}
.slides li {
height: inherit;
left: 0;
position: absolute;
top: 0;
width: 100%; width: 100%;
max-width: 540px; }
text-align: center; .slides img {
background: rgba(0,0,0,.25); display: block;
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0); width: 100%;
-moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0); height: auto;
box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0); }
} /* moving ends */
.rslides_tabs li {
display: inline;
}
.pagination {
.rslides_tabs li:first-child { margin-bottom: 0 !important;
margin-left: 0; }
}
p {
.rslides_tabs a { margin: 0 auto 20px;
-webkit-tap-highlight-color: rgba(0,0,0,.01); max-width: 500px;
padding: 8px 20px; text-align: left;
color: #666; }
}
h1 {
.rslides_tabs .rslides_here a { color: #fff;
color: #fff; font: 36px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
background: rgba(255,255,255,.1); font-weight: 200;
font-weight: bold; }
}
h2 {
font: 16px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-bottom: 40px;
}
a {
color: #fff;
text-decoration: none;
}
a img {
border: none;
}
.rslides3_tabs {
background: rgba(0,0,0,.25);
box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
font-size: 18px;
list-style: none;
margin: 0 auto 50px;
max-width: 540px;
padding: 10px 0;
text-align: center;
width: 100%;
}
.rslides3_tabs li {
display: inline;
}
.rslides3_tabs li:first-child {
margin-left: 0;
}
.rslides3_tabs a {
color: #666;
padding: 8px 20px;
-webkit-tap-highlight-color: rgba(0,0,0,.01);
}
.rslides3_tabs .rslides3_here a {
background: rgba(255,255,255,.1);
color: #fff;
font-weight: bold;
}
.rslides4_tabs {
background: rgba(0,0,0,.25);
box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
font-size: 18px;
list-style: none;
margin: 0 auto 50px;
max-width: 540px;
padding: 10px 0;
text-align: center;
width: 100%;
}
.rslides4_tabs li {
display: inline;
}
.rslides4_tabs li:first-child {
margin-left: 0;
}
.rslides4_tabs a {
color: #666;
padding: 8px 20px;
-webkit-tap-highlight-color: rgba(0,0,0,.01);
}
.rslides4_tabs a:focus,
.rslides4_tabs a:active {
outline: none;
-webkit-tap-highlight-color: rgba(0,0,0,.01);
}
.rslides4_tabs .rslides4_here a {
background: rgba(255,255,255,.1);
color: #fff;
font-weight: bold;
}
#download { #download {
-webkit-box-shadow: 0 0 10px #000; background: #333;
-moz-box-shadow: 0 0 10px #000; background: rgba(255,255,255,.1);
box-shadow: 0 0 10px #000; border: 1px solid rgba(255,255,255,.1);
background: #333; border-radius: 5px;
background: rgba(255,255,255,.1); -moz-border-radius: 5px;
border: 1px solid rgba(255,255,255,.1); -webkit-border-radius: 5px;
-webkit-border-radius: 5px; box-shadow: 0 0 10px #000;
-moz-border-radius: 5px; -moz-box-shadow: 0 0 10px #000;
border-radius: 5px; -webkit-box-shadow: 0 0 10px #000;
font-size: 20px; display: block;
font-weight: bold; font-size: 20px;
margin: 60px auto; font-weight: bold;
display: block; margin: 60px auto;
max-width: 500px; max-width: 500px;
padding: 20px; padding: 20px;
} }
#download:hover { #download:hover {
background: rgba(255,255,255,.15); background: rgba(255,255,255,.15);
} }
.footer { .footer {
font-size: 11px; font-size: 11px;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
h1 {
h1 { font: 30px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
font: 30px/50px "Helvetica Neue", Helvetica, Arial, sans-serif; }
} }
}

297
responsiveslides.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save