Viljami S
13 years ago
4 changed files with 353 additions and 123 deletions
@ -1,79 +1 @@
|
||||
# ResponsiveSlides.js v1.3 |
||||
### Simple & lightweight responsive slider plugin (in 1kb) |
||||
|
||||
|
||||
|
||||
[ResponsiveSlides.js](http://responsiveslides.com/) is a tiny jQuery plugin that creates a responsive slider using list items inside <ul>. 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/) (1.4 and up supported) and that all the images are same size. |
||||
|
||||
Biggest difference to other responsive slider plugins is the file size (1kb 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 and/or navigation to fade between slides. |
||||
|
||||
#### Features: |
||||
* Fully responsive |
||||
* 1kb minified and gzipped |
||||
* Simple markup using unordered list |
||||
* Settings for transition and timeout durations |
||||
* Multiple slideshows supported |
||||
* Automatic and manual fade |
||||
* Works in all major desktop and mobile browsers |
||||
* Captions and other html-elements supported inside slides |
||||
* Separate pagination and next/prev controls |
||||
* Possibility to choose where the controls append to |
||||
* Possibility to randomize the order of the slides |
||||
* Can be paused while hovering slideshow and/or controls |
||||
* Images can be wrapped inside links |
||||
* Optional 'before' and 'after' callbacks |
||||
|
||||
|
||||
|
||||
Usage Instructions and demo |
||||
====== |
||||
|
||||
For instructions and demo go to [http://responsiveslides.com/](http://responsiveslides.com/), or [download this repository as a zip file](https://github.com/viljamis/ResponsiveSlides.js/zipball/master) and and open "index.html" from the "example" folder. There's also a file called "themes.html" inside the "themes" folder which has [more examples about the usage](http://viljamis.com/responsive-slides/themes/). |
||||
|
||||
Currently jQuery 1.4 and up is supported. |
||||
|
||||
|
||||
|
||||
License |
||||
====== |
||||
|
||||
Licensed under the MIT license. |
||||
|
||||
Copyright (c) 2011-2012 Viljami Salminen, http://viljamis.com/ |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
||||
|
||||
|
||||
|
||||
Changelog |
||||
====== |
||||
|
||||
v1.3 (2012-04-26) - Three new options: "random", "pause", "pauseControls" + small bug fixes. |
||||
|
||||
v1.25 (2012-04-19) - No more flashing of unstyled slideshow before JS has loaded. Adds also better support for cases when JavaScript isn't available. |
||||
|
||||
v1.24 (2012-04-12) - Changes the way slideshow works if there's only one slide. Now all classes and max-width for the container are added, but we don't show the next and prev buttons anymore as they don't make much sense in that case. This version also fixes a bug which made the 'previous' button always go to the next slide. |
||||
|
||||
v1.23 (2012-03-31) - Adds new option called "controls", which allows to choose where the controls should be appended to. Includes also code optimization, bug fixes, better option names and better jQuery support (jQuery 1.4 and up is now supported). |
||||
|
||||
v1.22 (2012-03-27) - Adds callback events which are similar as in [@Wilto](https://github.com/Wilto)'s [Dynamic Carousel](https://github.com/Wilto/Dynamic-Carousel/). The possibility to change the 'namespace' is also back + next/prev buttons have now classes which make more sense. |
||||
|
||||
v1.21 (2012-03-23) - Added two new options: 'nextText' and 'prevText'. |
||||
|
||||
v1.20 (2012-03-21) - New option called 'nav', which enables next and previous buttons. Can be used with 'pagination' and 'auto' options. Adds also new [themes folder](http://viljamis.com/responsive-slides/themes/) with three different ways to use the new next and previous buttons. |
||||
|
||||
v1.10 (2012-03-12) - Refactoring, New markup style, CSS is now separated from the plugin, you can have links around images and other elements inside slides (not just images, but also captions etc.) + New option called "pagination", which enables to choose both "pagination" and "auto" at the same time. Shout outs for the help to [@bgutschke](https://github.com/bgutschke) |
||||
|
||||
v1.05 (2012-03-05) - No more need to change the namespace if you have more than one slideshow on the same page. |
||||
|
||||
v1.04 (2011-12-19) - Fixes problems when ResponsiveSlides.js is used with other plugins |
||||
|
||||
v1.03 (2011-12-12) - Code refactoring, smaller size, better performance |
||||
|
||||
v1.01 (2011-12-11) - Better usage of styles and the namespace |
||||
|
||||
v1.00 (2011-12-04) - Release |
||||
# Do not use this, not a working version yet! |
||||
@ -0,0 +1,341 @@
|
||||
/*! ResponsiveSlides.js v2XX |
||||
* http://responsiveslides.com
|
||||
* http://viljamis.com
|
||||
* |
||||
* Copyright (c) 2011-2012 @viljamis |
||||
* Available under the MIT license |
||||
* |
||||
* Do not use this, not a working version yet! |
||||
*/ |
||||
|
||||
/*jslint browser: true, sloppy: true, vars: true, plusplus: true, indent: 2 */ |
||||
|
||||
;(function ($, window) { |
||||
|
||||
var selectTab, startCycle, restartCycle, rotate, $tabs; |
||||
var instance = 0; |
||||
var index = 0; |
||||
|
||||
var visibleStyles = {"float": "left", "position": "relative"}, |
||||
hiddenStyles = {"float": "none", "position": "absolute"}; |
||||
|
||||
// Plugin constructor
|
||||
var ResponsiveSlides = function (element, options) { |
||||
instance++; |
||||
this.el = element; |
||||
this.$el = $(element); |
||||
this.options = options; |
||||
}; |
||||
|
||||
// Plugin prototype
|
||||
ResponsiveSlides.prototype = { |
||||
|
||||
defaults : { |
||||
auto: true, // Boolean: Animate automatically, true or false
|
||||
speed: 1000, // Integer: Speed of the transition, in milliseconds
|
||||
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
|
||||
pager: false, // Boolean: Show pager, true or false
|
||||
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
|
||||
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
|
||||
controls: "", // Selector: Where controls should be appended to, default is after the <ul>
|
||||
namespace: "rslides", // String: Change the default namespace used
|
||||
before: function () {}, // Function: Before callback
|
||||
after: function () {} // Function: After callback
|
||||
}, |
||||
|
||||
_init : function () { |
||||
this.config = $.extend({}, this.defaults, this.options); |
||||
this._create(); |
||||
this._widthSupport(); |
||||
return this; |
||||
}, |
||||
|
||||
_create : function () { |
||||
var slider = this, |
||||
config = this.config, |
||||
$slide = this.$el.children(), |
||||
namespaceIdx = config.namespace + instance, |
||||
$pager = $("<ul class='" + config.namespace + "_tabs' />"); |
||||
|
||||
// Random order
|
||||
if (config.random) { |
||||
$slide.sort(function () { |
||||
return (Math.round(Math.random()) - 0.5); |
||||
}); |
||||
this.$el |
||||
.empty() |
||||
.append($slide); |
||||
} |
||||
|
||||
// Add ID's to each slide
|
||||
$slide.each(function (i) { |
||||
this.id = config.namespace + "_s" + i; |
||||
}); |
||||
|
||||
// Add max-width and classes
|
||||
this.$el.addClass(config.namespace + " " + namespaceIdx); |
||||
if (config.maxwidth) { |
||||
this.$el.css("max-width", config.maxwidth); |
||||
} |
||||
|
||||
// Hide all slides, then show first one
|
||||
$slide |
||||
.hide() |
||||
.eq(0) |
||||
.addClass(namespaceIdx + "_on") |
||||
.css(visibleStyles) |
||||
.show(); |
||||
|
||||
// Only run if there's more than one slide
|
||||
// and if timeout is at least 100ms longer than the fade
|
||||
if( $slide.length <= 1 || config.timeout < config.speed + 100) { |
||||
return; |
||||
} |
||||
|
||||
// Pager
|
||||
if (config.pager) { |
||||
var tabMarkup = []; |
||||
$slide.each(function (i) { |
||||
var n = i + 1; |
||||
tabMarkup += |
||||
"<li>" + |
||||
"<a href='#' class='" + config.namespace + "_s" + n + "'>" + n + "</a>" + |
||||
"</li>"; |
||||
}); |
||||
$pager.append(tabMarkup); |
||||
|
||||
$tabs = $pager.find("a"); |
||||
|
||||
// Inject pager
|
||||
if (config.controls) { |
||||
$(config.controls).append($pager); |
||||
} else { |
||||
this.$el.after($pager); |
||||
} |
||||
} |
||||
|
||||
// Auto cycle
|
||||
if (config.auto) { |
||||
this.startCycle(); |
||||
} |
||||
|
||||
// Restarting cycle
|
||||
restartCycle = function () { |
||||
if (config.auto) { |
||||
// Stop
|
||||
clearInterval(rotate); |
||||
// Restart
|
||||
slider.startCycle(); |
||||
} |
||||
}; |
||||
|
||||
// Pause on hover
|
||||
if (config.pause) { |
||||
this.$el.hover(function () { |
||||
clearInterval(rotate); |
||||
}, function () { |
||||
restartCycle(); |
||||
}); |
||||
} |
||||
|
||||
// Pager click event handler
|
||||
if (config.pager) { |
||||
$tabs.bind("click", function (e) { |
||||
e.preventDefault(); |
||||
|
||||
if (!config.pauseControls) { |
||||
restartCycle(); |
||||
} |
||||
|
||||
// Get index of clicked tab
|
||||
var idx = $tabs.index(this); |
||||
|
||||
// Break if element is already active or currently animated
|
||||
if (index === idx || $("." + namespaceIdx + "_on:animated").length) { |
||||
return; |
||||
} |
||||
|
||||
// Remove active state from old tab and set new one
|
||||
slider.selectTab(idx); |
||||
|
||||
// Do the animation
|
||||
slider.slideTo(idx); |
||||
}) |
||||
.eq(0) |
||||
.closest("li") |
||||
.addClass(config.namespace + "_here"); |
||||
|
||||
// Pause when hovering pager
|
||||
if (config.pauseControls) { |
||||
$tabs.hover(function () { |
||||
clearInterval(rotate); |
||||
}, function () { |
||||
restartCycle(); |
||||
}); |
||||
} |
||||
} |
||||
|
||||
// Navigation
|
||||
if (config.nav) { |
||||
var navMarkup = |
||||
"<a href='#' class='" + config.namespace + "_nav prev'>" + config.prevText + "</a>" + |
||||
"<a href='#' class='" + config.namespace + "_nav next'>" + config.nextText + "</a>"; |
||||
|
||||
// Inject navigation
|
||||
if (config.controls) { |
||||
$(config.controls).append(navMarkup); |
||||
} else { |
||||
this.$el.after(navMarkup); |
||||
} |
||||
|
||||
var $trigger = $("." + config.namespace + "_nav"), |
||||
$prev = $("." + config.namespace + "_nav.prev"); |
||||
|
||||
// Click event handler
|
||||
$trigger.bind("click", function (e) { |
||||
e.preventDefault(); |
||||
|
||||
// Prevent clicking if currently animated
|
||||
if ($("." + namespaceIdx + "_on:animated").length) { |
||||
return; |
||||
} |
||||
|
||||
// Go to slide
|
||||
if ($(this).hasClass("prev")) { |
||||
slider.prevSlide(); |
||||
} else { |
||||
slider.nextSlide(); |
||||
} |
||||
|
||||
if (config.pager) { |
||||
var idx = $slide.index($("." + namespaceIdx + "_on")), |
||||
nextIdx = idx + 1 < $slide.size() ? index + 1 : 0; |
||||
prevIdx = idx - 1; |
||||
|
||||
slider.selectTab($(this)[0] === $prev[0] ? prevIdx : nextIdx); |
||||
} |
||||
|
||||
if (!config.pauseControls) { |
||||
restartCycle(); |
||||
} |
||||
}); |
||||
|
||||
// Pause when hovering navigation
|
||||
if (config.pauseControls) { |
||||
$trigger.hover(function () { |
||||
clearInterval(rotate); |
||||
}, function () { |
||||
restartCycle(); |
||||
}); |
||||
} |
||||
} |
||||
}, |
||||
|
||||
_widthSupport : function () { |
||||
var config = this.config, |
||||
$this = this.$el; |
||||
|
||||
if (typeof document.body.style.maxWidth === "undefined" && config.maxwidth) { |
||||
var widthSupport = function () { |
||||
$this.css("width", "100%"); |
||||
if ($this.width() > config.maxwidth) { |
||||
$this.css("width", config.maxwidth); |
||||
} |
||||
}; |
||||
|
||||
// Init fallback
|
||||
widthSupport(); |
||||
$(window).bind("resize", function () { |
||||
widthSupport(); |
||||
}); |
||||
} |
||||
}, |
||||
|
||||
startCycle : function () { |
||||
var slider = this, |
||||
config = this.config, |
||||
$slide = this.$el.children(); |
||||
|
||||
rotate = setInterval(function () { |
||||
var idx = index + 1 < $slide.size() ? index + 1 : 0; |
||||
|
||||
// Remove active state and set new if pager is set
|
||||
if (config.pager) { |
||||
slider.selectTab(idx); |
||||
} |
||||
|
||||
slider.slideTo(idx); |
||||
}, config.timeout); |
||||
}, |
||||
|
||||
slideTo : function (idx) { |
||||
var config = this.config, |
||||
namespaceIdx = config.namespace + instance; |
||||
|
||||
config.before(); |
||||
this.$el.children() |
||||
.stop() |
||||
.fadeOut(config.speed, function () { |
||||
$(this) |
||||
.removeClass(namespaceIdx + "_on") |
||||
.css(hiddenStyles); |
||||
}) |
||||
.eq(idx) |
||||
.fadeIn(config.speed, function () { |
||||
$(this) |
||||
.addClass(namespaceIdx + "_on") |
||||
.css(visibleStyles); |
||||
config.after(); |
||||
index = idx; |
||||
}); |
||||
}, |
||||
|
||||
selectTab : function (idx) { |
||||
$tabs |
||||
.closest("li") |
||||
.removeClass(this.config.namespace + "_here") |
||||
.eq(idx) |
||||
.addClass(this.config.namespace + "_here"); |
||||
}, |
||||
|
||||
nextSlide : function () { |
||||
var $slide = this.$el.children(), |
||||
idx = $slide.index($("." + this.config.namespace + instance + "_on")), |
||||
nextIdx = idx + 1 < $slide.size() ? index + 1 : 0; |
||||
this.slideTo(nextIdx); |
||||
}, |
||||
|
||||
prevSlide : function () { |
||||
var idx = this.$el.children().index($("." + this.config.namespace + instance + "_on")), |
||||
prevIdx = idx - 1; |
||||
this.slideTo(prevIdx); |
||||
}, |
||||
|
||||
alert : function () { |
||||
alert("alert"); |
||||
} |
||||
|
||||
}; |
||||
|
||||
ResponsiveSlides.defaults = ResponsiveSlides.prototype.defaults; |
||||
|
||||
$.fn.responsiveSlides = function (options) { |
||||
// Method calling logic
|
||||
if (typeof options === "string") { |
||||
var args = Array.prototype.slice.call(arguments, 1); |
||||
return this.each(function () { |
||||
return ResponsiveSlides.prototype[options].apply(this, args); |
||||
}); |
||||
} else { |
||||
return this.each(function () { |
||||
new ResponsiveSlides(this, options)._init(); |
||||
}); |
||||
} |
||||
}; |
||||
|
||||
})(jQuery, window); |
||||
Loading…
Reference in new issue