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

New plugin name.

pull/2/merge
Viljami S 13 years ago
parent
25e9ebc7e2
commit
14236a4882
5 changed files with 17 additions and 17 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. 8
      README.md
  2. 2
      adaptiveslides.pack.js
  3. 16
      example/index.html
  4. 6
      responsiveslides.js
  5. 2
      responsiveslides.pack.js

8
README.md
Unescape View File

@ -1,15 +1,15 @@
# AdaptiveSlides.js
# ResponsiveSlides.js
### Responsive slideshow plugin that weights just ~1kb
[AdaptiveSlides.js](http://adaptiveslides.viljamis.com/) is a tiny jQuery plugin that creates a responsive slideshow using images inside a single container. It work 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 work 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 (~1kb minified and gzipped) + that this one doesn't try to do everything. AdaptiveSlides.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 (~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 to navigate/fade between slides.
Usage Instructions and demo
======
For instructions and demo go to [http://adaptiveslides.viljamis.com](http://adaptiveslides.viljamis.com/)
For instructions and demo go to [http://responsive-slides.viljamis.com](http://responsive-slides.viljamis.com/)
License

2
adaptiveslides.pack.js
Unescape View File

@ -1,2 +0,0 @@
/*! AdaptiveSlides.js v1.0. (c) 2011 Viljami Salminen. MIT License. http://adaptiveslides.viljamis.com */
(function(a){a.fn.adaptiveSlides=function(b){var c={speed:4e3,fade:1e3,auto:true,maxwidth:"none",namespace:"adaptiveSlides"};return this.each(function(){var d=a(this);if(b){a.extend(c,b)}if(d.find("img").length<=1){return}var e=function(){var b=d.find("img");b.each(function(b){var d=a(this);d.attr({id:c.namespace+"_slide"+b})});b.css({top:0,left:0,width:"100%",height:"inherit",position:"absolute"});d.find(":first-child").addClass(c.namespace+"_visible");d.css({"max-width":parseFloat(c.maxwidth),width:"100%",overflow:"hidden",position:"relative"});heightFix=["<style>","."+c.namespace+"_visible {","position: relative !important;","float: left !important;","}","</style>"].join("");a("head").append(heightFix);if(c.auto===true){d.find("img:gt(0)").hide();setInterval(function(){d.find(":first-child").fadeOut(parseFloat(c.fade)).next("img").fadeIn(parseFloat(c.fade)).addClass(c.namespace+"_visible").end().appendTo(d).removeClass(c.namespace+"_visible")},parseFloat(c.speed))}else{var e=a('<ul class="'+c.namespace+'_tabs" />');d.find("img:gt(0)").hide();b.each(function(a){var b=a+1;tabMarkup=["<li>",'<a href="#'+c.namespace+"_slide"+b+'"','class="'+c.namespace+"_slide"+b+'">'+b+"</a>","</li>"].join("");e.append(tabMarkup)});d.after(e);a("."+c.namespace+"_slide1").parent().addClass("active");a("."+c.namespace+"_tabs a").each(function(b){var d=a(this);d.click(function(e){e.preventDefault();if(a("."+c.namespace+"_visible:animated").length){return false}if(!d.parent().hasClass("active")){a("."+c.namespace+"_tabs li").removeClass("active");a("."+c.namespace+"_visible").stop().fadeOut(parseFloat(c.fade),function(){a(this).removeClass(c.namespace+"_visible")}).end();a("#"+c.namespace+"_slide"+b).stop().fadeIn(parseFloat(c.fade),function(){a(this).addClass(c.namespace+"_visible")}).end();d.parent().addClass("active")}})})}};var f=function(){if(b.maxwidth){if(typeof document.body.style.maxHeight!=="undefined"&&typeof document.body.style.minHeight!=="undefined"){return false}else{d.each(function(){d.css("width","100%");if(d.width()>parseFloat(c.maxwidth)){d.css("width",parseFloat(c.maxwidth))}else if(d.width()<parseFloat(c.maxwidth)){d.css("width","100%")}})}}};e();f();a(window).resize(function(){f()})})}})(jQuery)

16
example/index.html
Unescape View File

@ -2,27 +2,27 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>AdaptiveSlides.js &middot; Adaptive 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;" />
<link rel="stylesheet" href="styles.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="../adaptiveslides.pack.js"></script>
<script src="../responsiveslides.pack.js"></script>
<script>
jQuery(function() {
// Slideshow 1
$("#slides").adaptiveSlides({ maxwidth:800 });
$("#slides").responsiveSlides({ maxwidth:800 });
// Slideshow 2
$("#slides2").adaptiveSlides({ fade:300, auto:false, maxwidth:540, namespace: 'anotherslideshow' });
$("#slides2").responsiveSlides({ fade:300, auto:false, maxwidth:540, namespace: 'anotherslideshow' });
});
</script>
</head>
<body>
<div id="wrapper">
<h1>AdaptiveSlides.js</h1>
<h2>Adaptive jQuery Slideshow plugin that weights just ~1kb</h2>
<h1>ResponsiveSlides.js</h1>
<h2>Responsive jQuery Slideshow plugin that weights just ~1kb</h2>
<!-- Slideshow 1 -->
<div id="slides">
@ -38,8 +38,8 @@
<img src="3.jpg" alt="" />
</div>
<a href="http://adaptiveslides.viljamis.com/" id="download">See the documentation</a>
<p class="footer">AdaptiveSlides.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/AdaptiveSlides.js">GitHub project page</a>.</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>

6
adaptiveslides.js → responsiveslides.js
Unescape View File

@ -1,6 +1,6 @@
/*! AdaptiveSlides.js v1.0. (c) 2011 Viljami Salminen. MIT License. http://adaptiveslides.viljamis.com */
/*! ResponsiveSlides.js v1.0. (c) 2011 Viljami Salminen. MIT License. http://responsive-slides.viljamis.com */
(function ($) {
$.fn.adaptiveSlides = function (options) {
$.fn.responsiveSlides = function (options) {
// Settings
var settings = {
@ -8,7 +8,7 @@
'fade' : 1000,
'auto' : true,
'maxwidth' : 'none',
'namespace' : 'adaptiveSlides'
'namespace' : 'responsiveSlides'
};
return this.each(function () {

2
responsiveslides.pack.js
Unescape View File

@ -0,0 +1,2 @@
/*! ResponsiveSlides.js v1.0. (c) 2011 Viljami Salminen. MIT License. http://responsive-slides.viljamis.com */
(function(a){a.fn.responsiveSlides=function(b){var c={speed:4e3,fade:1e3,auto:true,maxwidth:"none",namespace:"responsiveSlides"};return this.each(function(){var d=a(this);if(b){a.extend(c,b)}if(d.find("img").length<=1){return}var e=function(){var b=d.find("img");b.each(function(b){var d=a(this);d.attr({id:c.namespace+"_slide"+b})});b.css({top:0,left:0,width:"100%",height:"inherit",position:"absolute"});d.find(":first-child").addClass(c.namespace+"_visible");d.css({"max-width":parseFloat(c.maxwidth),width:"100%",overflow:"hidden",position:"relative"});heightFix=["<style>","."+c.namespace+"_visible {","position: relative !important;","float: left !important;","}","</style>"].join("");a("head").append(heightFix);if(c.auto===true){d.find("img:gt(0)").hide();setInterval(function(){d.find(":first-child").fadeOut(parseFloat(c.fade)).next("img").fadeIn(parseFloat(c.fade)).addClass(c.namespace+"_visible").end().appendTo(d).removeClass(c.namespace+"_visible")},parseFloat(c.speed))}else{var e=a('<ul class="'+c.namespace+'_tabs" />');d.find("img:gt(0)").hide();b.each(function(a){var b=a+1;tabMarkup=["<li>",'<a href="#'+c.namespace+"_slide"+b+'"','class="'+c.namespace+"_slide"+b+'">'+b+"</a>","</li>"].join("");e.append(tabMarkup)});d.after(e);a("."+c.namespace+"_slide1").parent().addClass("active");a("."+c.namespace+"_tabs a").each(function(b){var d=a(this);d.click(function(e){e.preventDefault();if(a("."+c.namespace+"_visible:animated").length){return false}if(!d.parent().hasClass("active")){a("."+c.namespace+"_tabs li").removeClass("active");a("."+c.namespace+"_visible").stop().fadeOut(parseFloat(c.fade),function(){a(this).removeClass(c.namespace+"_visible")}).end();a("#"+c.namespace+"_slide"+b).stop().fadeIn(parseFloat(c.fade),function(){a(this).addClass(c.namespace+"_visible")}).end();d.parent().addClass("active")}})})}};var f=function(){if(b.maxwidth){if(typeof document.body.style.maxHeight!=="undefined"&&typeof document.body.style.minHeight!=="undefined"){return false}else{d.each(function(){d.css("width","100%");if(d.width()>parseFloat(c.maxwidth)){d.css("width",parseFloat(c.maxwidth))}else if(d.width()<parseFloat(c.maxwidth)){d.css("width","100%")}})}}};e();f();a(window).resize(function(){f()})})}})(jQuery)
Write Preview
Loading…
Cancel
Save