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
Split 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>
<html lang="en">
<head>
<meta charset="utf-8" />
<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.1/jquery.min.js"></script>
<script src="../responsiveslides.min.js"></script>
<script>
jQuery(function() {
// Slideshow 1
$("#slides").responsiveSlides({
maxwidth: 800
});
// Slideshow 2
$("#slides2").responsiveSlides({
fade: 300,
auto: false,
maxwidth: 540
});
});
</script>
<meta charset="utf-8" />
<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" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../responsiveslides.js"></script>
<script>
jQuery(function() {
// Slideshow 1
$("#slides1").responsiveSlides({
maxwidth: 800
});
// Slideshow 2
$("#slides2").responsiveSlides({
maxwidth: 800
});
// Slideshow 3
$("#slides3").responsiveSlides({
auto: false,
fade: 300,
maxwidth: 540
});
// Slideshow 4
$("#slides4").responsiveSlides({
auto: false,
fade: 300,
maxwidth: 540
});
});
</script>
</head>
<body>
<div id="wrapper">
<h1>ResponsiveSlides.js</h1>
<h2>Responsive jQuery Slideshow plugin that weights under 1kb</h2>
<!-- Slideshow 1 -->
<div id="slides">
<img src="1.jpg" alt="" />
<img src="2.jpg" alt="" />
<img src="3.jpg" alt="" />
</div>
<!-- Slideshow 2 -->
<div id="slides2">
<img src="1.jpg" alt="" />
<img src="2.jpg" alt="" />
<img src="3.jpg" alt="" />
</div>
<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>
<div id="wrapper">
<h1>ResponsiveSlides.js</h1>
<h2>Responsive jQuery Slideshow plugin that weights under 1kb</h2>
<!-- Slideshow 1 -->
<ul id="slides1" class="slides">
<li><img src="1.jpg" alt="" /></li>
<li><img src="2.jpg" alt="" /></li>
<li><img src="3.jpg" alt="" /></li>
</ul>
<!-- Slideshow 2 -->
<ul id="slides2" class="slides">
<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>
<!-- Slideshow 3 -->
<ul id="slides3" class="slides pagination">
<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>
</html>

277
example/styles.css
Unescape View File

@ -1,124 +1,195 @@
* {
margin: 0;
padding: 0;
}
margin: 0;
padding: 0;
}
html {
background: #222 url("bg.png") repeat;
}
background: #222 url("bg.png") repeat;
}
body {
-webkit-font-smoothing: antialiased;
font: 14px/20px Helvetica, Arial, sans-serif;
text-shadow: 0 -2px 1px #000;
color: #888;
text-align: center;
_width: 70%;
max-width: 800px;
margin: 20px auto 0;
}
_width: 70%;
color: #888;
font: 14px/20px Helvetica, Arial, sans-serif;
margin: 20px auto 0;
max-width: 800px;
text-align: center;
text-shadow: 0 -2px 1px #000;
-webkit-font-smoothing: antialiased;
}
#wrapper {
padding: 20px;
}
padding: 20px;
}
.rslides1 {
-webkit-box-shadow: 0 0 20px #000;
-moz-box-shadow: 0 0 20px #000;
box-shadow: 0 0 20px #000;
margin-bottom: 40px;
}
.slides {
box-shadow: 0 0 20px #000;
-moz-box-shadow: 0 0 20px #000;
-webkit-box-shadow: 0 0 20px #000;
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;
color: #fff;
}
.rslides_tabs {
font-size: 18px;
margin: 0 auto 50px;
padding: 10px 0;
/* moved these from js file to here */
.slides {
overflow: hidden;
position: relative;
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
.slides li {
height: inherit;
left: 0;
position: absolute;
top: 0;
width: 100%;
max-width: 540px;
text-align: center;
background: rgba(0,0,0,.25);
-webkit-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);
box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
}
.rslides_tabs li {
display: inline;
}
.rslides_tabs li:first-child {
margin-left: 0;
}
.rslides_tabs a {
-webkit-tap-highlight-color: rgba(0,0,0,.01);
padding: 8px 20px;
color: #666;
}
.rslides_tabs .rslides_here a {
color: #fff;
background: rgba(255,255,255,.1);
font-weight: bold;
}
}
.slides img {
display: block;
width: 100%;
height: auto;
}
/* moving ends */
.pagination {
margin-bottom: 0 !important;
}
p {
margin: 0 auto 20px;
max-width: 500px;
text-align: left;
}
h1 {
color: #fff;
font: 36px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 200;
}
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 {
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
background: #333;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.1);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 20px;
font-weight: bold;
margin: 60px auto;
display: block;
max-width: 500px;
padding: 20px;
}
background: #333;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.1);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
display: block;
font-size: 20px;
font-weight: bold;
margin: 60px auto;
max-width: 500px;
padding: 20px;
}
#download:hover {
background: rgba(255,255,255,.15);
}
background: rgba(255,255,255,.15);
}
.footer {
font-size: 11px;
}
font-size: 11px;
}
@media screen and (max-width: 600px) {
h1 {
font: 30px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
}
h1 {
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 */
(function ($, window, i) {
$.fn.responsiveSlides = function (options) {
// Settings
var settings = $.extend({
'speed' : 4000,
'fade' : 1000,
'auto' : true,
'maxwidth' : 'none'
}, options);
return this.each(function () {
i++;
var $this = $(this);
var slideshow = function () {
var $slide = $this.find('img'),
hasTouch = 'ontouchstart' in window,
startEvent = hasTouch ? 'touchstart' : 'mousedown',
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' };
// Only run if there's more than one slide
if ($this.find($slide).length > 1) {
$slide.each(function (i) {
this.id = slide_class_prefix + i;
});
$slide.css({
'top': 0,
'left': 0,
'width': '100%',
'height': 'inherit',
'position': 'absolute'
});
$this.css({
'max-width': parseFloat(settings.maxwidth),
'width': '100%',
'overflow': 'hidden',
'position': 'relative'
})
.addClass(namespace_i_class)
.find(':first-child').css(visible).end()
.find($slide + ':gt(0)').hide();
// Auto: true
if (settings.auto === true) {
setInterval(function () {
$this.find(':first-child').fadeOut(fadetime, function () {
$(this).css(hidden);
}).next($slide).fadeIn(fadetime, function () {
$(this).css(visible);
}).end().appendTo($this);
}, parseFloat(settings.speed));
// Auto: false
} else {
var t = '';
$slide.each(function (i) {
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) {
var $el = $(this);
$el.bind('click', function (e) {
e.preventDefault();
});
$el.bind(startEvent, function () {
// Prevent clicking if animated
if ($('.' + visible_class + ':animated').length) {
return false;
}
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();
$('#' + slide_class_prefix + i).stop().fadeIn(fadetime, function () {
$(this).addClass(visible_class).css(visible);
}).end();
$el.parent().addClass(active_class);
}
});
});
}
}
};
// Fallback to make IE6 support CSS max-width
var widthSupport = function () {
var maxwidth = parseFloat(settings.maxwidth);
if (options && options.maxwidth) {
if (typeof document.body.style.maxHeight === 'undefined') {
$this.each(function () {
$this.css('width', '100%');
if ($this.width() > maxwidth) {
$this.css('width', maxwidth);
} else if ($this.width() < maxwidth) {
$this.css('width', '100%');
}
});
}
}
};
// Call once
slideshow();
widthSupport();
// Call on resize
$(window).resize(function () {
widthSupport();
});
});
};
})(jQuery, this, 0);
/*! ResponsiveSlides.js v1.07. (c) 2011 Viljami Salminen. MIT License. http://responsive-slides.viljamis.com */
(function($, window, i) {
$.fn.responsiveSlides = function( options ) {
// Merge default settings with optional arguments
var settings = $.extend({
"auto": true,
"fade": 1000,
"maxwidth": "none",
"speed": 4000
}, options);
return this.each( function () {
// increment i, which is used for namespacing
i++;
// save handle for the slideshow
var $this = $( this );
var $slide = $this.children(),
$img = $( "img", this ),
namespace = "rslides" + i,
activeClass = namespace + "_here",
slideClassPrefix = namespace + "_s",
tabsClass = namespace + "_tabs",
$pagination = $( "<ul class=\"" + tabsClass + "\" />" ),
visible = {"float": "left", "position": "relative"},
hidden = {"float": "none", "position": "absolute"},
// 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
if ( $slide.size() > 1 ) {
// add ids to each slide
$slide.each( function ( i ) {
this.id = slideClassPrefix + i;
});
// add css to the slideshow
$this.css({
"max-width": settings.maxwidth
});
// hide all slides, then show first one
$slide
.hide()
.eq( 0 )
.css( visible )
.show();
// Auto: true
if ( settings.auto === true ) {
// rotate slides automatically
setInterval( function () {
var idx = index + 1 < length ? index + 1 : 0;
slideTo( idx );
}, settings.speed );
}
// Auto: false
else {
// build pagination
var tabMarkup = [];
$slide.each( function( i ) {
var n = i + 1;
tabMarkup.push( "<li>" );
tabMarkup.push( "<a href=\"#" + slideClassPrefix + n + "\" " );
tabMarkup.push( "class=\"" + slideClassPrefix + n + "\">" + n + "</a>" );
tabMarkup.push( "</li>" );
});
$pagination.append( tabMarkup.join("") );
var $tabs = $pagination.find( "a" );
// add click/touch event handler and set first tab active
$tabs.on( "ontouchstart" in window ? "touchstart" : "click", function( e ) {
e.preventDefault();
// get index of clicked tab
var idx = $tabs.index( this );
// break here if element is already active
if( index === idx ) {
return;
}
// remove active state from old tab and set new one
$tabs
.closest( "li" )
.removeClass( activeClass )
.eq( idx )
.addClass( activeClass );
// do the animation
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
var widthSupport = function() {
$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