From 7cd17bad37685d5ac70c72fa4beba1ad5cd9d4ae Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Mon, 5 Mar 2012 16:06:16 +0000 Subject: [PATCH 001/109] Added the autoplay functionality. --- unslider.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/unslider.js b/unslider.js index 8e183ae..338033f 100644 --- a/unslider.js +++ b/unslider.js @@ -132,6 +132,10 @@ $('.unslider-arrows .' + keys[key]).click(); } }); + } else { // No arrows, just autoplay + setTimeout(function() { + $('.unslider-arrows .next').click(); + }, o.delay); } } From 2ed122e67f4ffe5174a783d80bdce80b0381df1f Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Mon, 5 Mar 2012 16:07:29 +0000 Subject: [PATCH 002/109] Removing an unneccessary variable, .replace() call, and giving myself a kick in the balls for doing so previously. --- unslider.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/unslider.js b/unslider.js index 338033f..bda0724 100644 --- a/unslider.js +++ b/unslider.js @@ -117,10 +117,9 @@ $('

').appendTo(me.parent()).find('.arrow').each(function() { var me = $(this), dir = me.attr('class').split(' ')[1], - msg = 'Click to show the ? slide'.replace('?', dir), arrows = {previous: '«', next: '»'}; - me.attr('title', msg).html(arrows[dir]); + me.attr('title', 'Click to show the ' + dir + ' slide').html(arrows[dir]); }).click(go); From cfb0f5e4ff8ae2ac2e575ee6d468fb31b466eefd Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Mon, 5 Mar 2012 17:24:29 +0000 Subject: [PATCH 003/109] Added better defaults, and added an autoplay option. --- readme.md | 7 ++++--- unslider.js | 25 ++++++++++++++++++------- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/readme.md b/readme.md index cd75ce5..ff54c60 100644 --- a/readme.md +++ b/readme.md @@ -34,16 +34,17 @@ $('#slider').unslider({ ``` ## Options -It's also got a few options: +It's also got a few options. Here are the defaults: ```javascript { - activeClass: 'active', - arrows: true, // If false, just autoplay + activeClass: 'active', // The class of the active slide + arrows: true, // Choose whether to show the arrows in the markup or not // Speeds + timing speed: 250, delay: 2000, + autoplay: true // Should the slider autoplay? // Callbacks afterSlide: function() {} // Called after a slide has occured. diff --git a/unslider.js b/unslider.js index bda0724..b6076c8 100644 --- a/unslider.js +++ b/unslider.js @@ -35,11 +35,12 @@ // Set the options var o = $.extend({ activeClass: 'active', - arrows: true, // If false, just autoplay + arrows: true, + autoplay: true, // Speeds + timing - speed: 250, - delay: 2000, + speed: 500, + delay: 3000, // Callbacks afterSlide: function() {} @@ -131,12 +132,22 @@ $('.unslider-arrows .' + keys[key]).click(); } }); - } else { // No arrows, just autoplay - setTimeout(function() { - $('.unslider-arrows .next').click(); - }, o.delay); } + // Autoplay + if(o.autoplay) { + var cont = function() { + return $('.unslider-arrows .next').click(); + }, + auto = setInterval(cont, o.delay); + + // Turn off (and back on) on hover. + me.hover(function() { + clearInterval(auto); + }, function() { + auto = setInterval(cont, o.delay); + }); + } } }); }; From 53e6451f0da91cf4a87cffa32d2d3f3c74102d0b Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Tue, 6 Mar 2012 13:49:43 +0000 Subject: [PATCH 004/109] whoops, I'm an idiot. --- unslider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/unslider.js b/unslider.js index b6076c8..fea5a96 100644 --- a/unslider.js +++ b/unslider.js @@ -36,7 +36,7 @@ var o = $.extend({ activeClass: 'active', arrows: true, - autoplay: true, + autoplay: false, // Speeds + timing speed: 500, @@ -104,7 +104,7 @@ }; // Check we have two or more items (the itemCount adds two) - if(itemCount > 4) { + if(itemCount >= 4) { // Append the first and last items first.addClass(o.activeClass).clone().attr('class', 'cloned').appendTo(list); From bc1cab1efb34aea959eb8f72014eca9ed9978ea9 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Tue, 6 Mar 2012 14:53:24 +0000 Subject: [PATCH 005/109] Fixing the animations. --- unslider.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/unslider.js b/unslider.js index fea5a96..39044ec 100644 --- a/unslider.js +++ b/unslider.js @@ -27,7 +27,15 @@ * Move the Unslider */ $.fn.moveUnslider = function(pos, speed, callback) { - return this.stop().animate({marginLeft: parseFloat(pos)}, speed, callback); + + var me = this, + anim = this.is(':animated'); + + if(!anim) { + me.stop().animate({marginLeft: parseFloat(pos)}, speed, callback); + } + + return anim; }; $.fn.unslider = function(options) { From 6bdf9b4150c41a14992cb178a8028c4e444f62c0 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Tue, 6 Mar 2012 16:10:40 +0000 Subject: [PATCH 006/109] Fixing that crazy back button shizzle. --- unslider.js | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/unslider.js b/unslider.js index 39044ec..4246a5a 100644 --- a/unslider.js +++ b/unslider.js @@ -82,11 +82,25 @@ prev.addClass(o.activeClass).siblings().removeClass(o.activeClass); - if(!first) { - list.moveUnslider(margin + width, o.speed, o.afterSlide); - } else { - list.moveUnslider(-(width * (itemCount - 3)), o.speed, o.afterSlide); + if(parseFloat(list.css('margin-left')) >= 0) { + setTimeout(function() { + + }, o.speed); } + + return list.moveUnslider(margin + width, o.speed, function() { + + if(parseFloat(list.css('margin-left')) >= 0) { + list.css('margin-left', -(width * (itemCount - 2))); + + // Reset the margin so we can recalculate properly + margin = parseFloat(list.css('margin-left')); + } + + if($.isFunction(o.afterSlide)) { + o.afterSlide.call(this); + } + }); }, next: function() { @@ -97,7 +111,7 @@ if(last) { setTimeout(function() { - list.moveUnslider(-width, 0); + list.css('margin-left', -width); }, o.speed); } From 7762f725d151854f56f1c7e38da2d5a2462c792a Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Tue, 6 Mar 2012 16:56:32 +0000 Subject: [PATCH 007/109] Fixed me being an utter twonk. --- unslider.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/unslider.js b/unslider.js index 4246a5a..4953972 100644 --- a/unslider.js +++ b/unslider.js @@ -109,13 +109,16 @@ next.addClass(o.activeClass).siblings().removeClass(o.activeClass); - if(last) { - setTimeout(function() { + return list.moveUnslider(margin - width, o.speed, function() { + + if(last) { list.css('margin-left', -width); - }, o.speed); - } - - return list.moveUnslider(margin - width, o.speed, o.afterSlide); + } + + if($.isFunction(o.afterSlide)) { + o.afterSlide.call(this); + } + }); } }; From 8bccfb36ad1e3e125576e29ed310b5b9028249c8 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Tue, 6 Mar 2012 17:03:43 +0000 Subject: [PATCH 008/109] Added easing support. --- readme.md | 3 ++- unslider.js | 10 ++++++---- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/readme.md b/readme.md index ff54c60..c55424b 100644 --- a/readme.md +++ b/readme.md @@ -44,7 +44,8 @@ It's also got a few options. Here are the defaults: // Speeds + timing speed: 250, delay: 2000, - autoplay: true // Should the slider autoplay? + autoplay: true, // Should the slider autoplay? + easing: 'swing', // A jQuery easing string (see the Easing plugin for more: http://gsgd.co.uk/sandbox/jquery/easing/) // Callbacks afterSlide: function() {} // Called after a slide has occured. diff --git a/unslider.js b/unslider.js index 4953972..ab29c2f 100644 --- a/unslider.js +++ b/unslider.js @@ -26,13 +26,13 @@ /** * Move the Unslider */ - $.fn.moveUnslider = function(pos, speed, callback) { + $.fn.moveUnslider = function(pos, speed, easing, callback) { var me = this, anim = this.is(':animated'); if(!anim) { - me.stop().animate({marginLeft: parseFloat(pos)}, speed, callback); + me.stop().animate({marginLeft: parseFloat(pos)}, speed, easing, callback); } return anim; @@ -50,6 +50,8 @@ speed: 500, delay: 3000, + easing: 'swing', + // Callbacks afterSlide: function() {} }, options); @@ -88,7 +90,7 @@ }, o.speed); } - return list.moveUnslider(margin + width, o.speed, function() { + return list.moveUnslider(margin + width, o.speed, o.easing, function() { if(parseFloat(list.css('margin-left')) >= 0) { list.css('margin-left', -(width * (itemCount - 2))); @@ -109,7 +111,7 @@ next.addClass(o.activeClass).siblings().removeClass(o.activeClass); - return list.moveUnslider(margin - width, o.speed, function() { + return list.moveUnslider(margin - width, o.speed, o.easing, function() { if(last) { list.css('margin-left', -width); From b71d3575f6b9cebff34c0bdb82475a3de07e0965 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Tue, 6 Mar 2012 17:04:05 +0000 Subject: [PATCH 009/109] Bumped the version number. --- unslider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/unslider.js b/unslider.js index ab29c2f..f5180bc 100644 --- a/unslider.js +++ b/unslider.js @@ -1,5 +1,5 @@ /** - * Unslider 0.1 + * Unslider 0.2 * by @visualidiot * * Licensed under the WTFPL, as always. From 2dfd28ece34357e8efb1c9e7b404173e1e81a5eb Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Tue, 6 Mar 2012 17:10:44 +0000 Subject: [PATCH 010/109] Using "left" instead of "margin-left" for performance reasons. Yay, performance! --- unslider.css | 1 + unslider.js | 16 ++++++++-------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/unslider.css b/unslider.css index 9179d4a..2bdb2d4 100644 --- a/unslider.css +++ b/unslider.css @@ -1,2 +1,3 @@ .unslider { overflow: hidden; } + .unslider ul { position: relative; } .unslider li { float: left; } \ No newline at end of file diff --git a/unslider.js b/unslider.js index f5180bc..60997d1 100644 --- a/unslider.js +++ b/unslider.js @@ -32,7 +32,7 @@ anim = this.is(':animated'); if(!anim) { - me.stop().animate({marginLeft: parseFloat(pos)}, speed, easing, callback); + me.stop().animate({left: parseFloat(pos)}, speed, easing, callback); } return anim; @@ -74,7 +74,7 @@ dir = me.attr('class').split(' ')[1], current = items.filter('.' + o.activeClass), - margin = parseFloat(list.css('margin-left')), + margin = parseFloat(list.css('left')), actions = { previous: function() { @@ -84,7 +84,7 @@ prev.addClass(o.activeClass).siblings().removeClass(o.activeClass); - if(parseFloat(list.css('margin-left')) >= 0) { + if(parseFloat(list.css('left')) >= 0) { setTimeout(function() { }, o.speed); @@ -92,11 +92,11 @@ return list.moveUnslider(margin + width, o.speed, o.easing, function() { - if(parseFloat(list.css('margin-left')) >= 0) { - list.css('margin-left', -(width * (itemCount - 2))); + if(parseFloat(list.css('left')) >= 0) { + list.css('left', -(width * (itemCount - 2))); // Reset the margin so we can recalculate properly - margin = parseFloat(list.css('margin-left')); + margin = parseFloat(list.css('left')); } if($.isFunction(o.afterSlide)) { @@ -114,7 +114,7 @@ return list.moveUnslider(margin - width, o.speed, o.easing, function() { if(last) { - list.css('margin-left', -width); + list.css('left', -width); } if($.isFunction(o.afterSlide)) { @@ -138,7 +138,7 @@ items.filter(':last').clone().addClass('cloned').prependTo(list); // Set the width to stop wrapping, and since we have a clone, position it offscreen - list.css({width: width * itemCount, marginLeft: -width}); + list.css({width: width * itemCount, left: -width}); // Get the arrows, if they want 'em. if(o.arrows) { From a7a634206c8d3ad92451ff7100a2d561ff4eb884 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Tue, 6 Mar 2012 17:19:18 +0000 Subject: [PATCH 011/109] Added a minified version for shits and giggles. --- unslider.min.js | 1 + 1 file changed, 1 insertion(+) create mode 100644 unslider.min.js diff --git a/unslider.min.js b/unslider.min.js new file mode 100644 index 0000000..e74a47a --- /dev/null +++ b/unslider.min.js @@ -0,0 +1 @@ +/*unslider by @visualidiot*/(function(a,b){a.fn.moveUnslider=function(a,b,c,d){var e=this,f=this.is(":animated");if(!f){e.stop().animate({left:parseFloat(a)},b,c,d)}return f};a.fn.unslider=function(c){var e=a.extend({activeClass:"active",arrows:true,autoplay:false,speed:500,delay:3e3,easing:"swing",afterSlide:function(){}},c);return this.each(function(){var c=a(this).addClass("unslider"),f=c.children("ul"),g=f.children("li"),h=g.filter(":first"),i=g.length+2,j=c.width(),k=h.height(),l=function(){var b=a(this),c=b.attr("class").split(" ")[1],d=g.filter("."+e.activeClass),h=parseFloat(f.css("left")),k={previous:function(){var b=d.prev().hasClass("cloned"),c=b?g.eq(-1):d.prev();c.addClass(e.activeClass).siblings().removeClass(e.activeClass);if(parseFloat(f.css("left"))>=0){setTimeout(function(){},e.speed)}return f.moveUnslider(h+j,e.speed,e.easing,function(){if(parseFloat(f.css("left"))>=0){f.css("left",-(j*(i-2)));h=parseFloat(f.css("left"))}if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})},next:function(){var b=d.next().hasClass("cloned"),c=b?g.eq(0):d.next();c.addClass(e.activeClass).siblings().removeClass(e.activeClass);return f.moveUnslider(h-j,e.speed,e.easing,function(){if(b){f.css("left",-j)}if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})}};if(k[c]){k[c]()}};if(i>=4){h.addClass(e.activeClass).clone().attr("class","cloned").appendTo(f);g.filter(":last").clone().addClass("cloned").prependTo(f);f.css({width:j*i,left:-j});if(e.arrows){a('

').appendTo(c.parent()).find(".arrow").each(function(){var b=a(this),c=b.attr("class").split(" ")[1],d={previous:"«",next:"»"};b.attr("title","Click to show the "+c+" slide").html(d[c])}).click(l);a(b).keyup(function(b){var c=b.which,d={37:"previous",39:"next"};if(d[c]){a(".unslider-arrows ."+d[c]).click()}})}if(e.autoplay){var m=function(){return a(".unslider-arrows .next").click()},n=setInterval(m,e.delay);c.hover(function(){clearInterval(n)},function(){n=setInterval(m,e.delay)})}}})}})(jQuery,document) \ No newline at end of file From 5e39e2e2a1d1a8c32d3ae6cac34f20e3d3028081 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Wed, 7 Mar 2012 09:59:35 +0000 Subject: [PATCH 012/109] Fixed a whole buncha random crap. --- unslider.js | 118 ++++++++++++++++++++++++---------------------------- 1 file changed, 54 insertions(+), 64 deletions(-) diff --git a/unslider.js b/unslider.js index 60997d1..3502d38 100644 --- a/unslider.js +++ b/unslider.js @@ -66,69 +66,7 @@ itemCount = items.length + 2, // Don't forget our clones! width = me.width(), - height = first.height(), - - go = function() { - - var me = $(this), - dir = me.attr('class').split(' ')[1], - - current = items.filter('.' + o.activeClass), - margin = parseFloat(list.css('left')), - - actions = { - previous: function() { - - var first = current.prev().hasClass('cloned'), - prev = first ? items.eq(-1) : current.prev(); - - prev.addClass(o.activeClass).siblings().removeClass(o.activeClass); - - if(parseFloat(list.css('left')) >= 0) { - setTimeout(function() { - - }, o.speed); - } - - return list.moveUnslider(margin + width, o.speed, o.easing, function() { - - if(parseFloat(list.css('left')) >= 0) { - list.css('left', -(width * (itemCount - 2))); - - // Reset the margin so we can recalculate properly - margin = parseFloat(list.css('left')); - } - - if($.isFunction(o.afterSlide)) { - o.afterSlide.call(this); - } - }); - }, - next: function() { - - var last = current.next().hasClass('cloned'), - next = last ? items.eq(0) : current.next(); - - next.addClass(o.activeClass).siblings().removeClass(o.activeClass); - - return list.moveUnslider(margin - width, o.speed, o.easing, function() { - - if(last) { - list.css('left', -width); - } - - if($.isFunction(o.afterSlide)) { - o.afterSlide.call(this); - } - }); - } - }; - - // Run the action, based on the class of the link. Genius. - if(actions[dir]) { - actions[dir](); - } - }; + height = first.height(); // Check we have two or more items (the itemCount adds two) if(itemCount >= 4) { @@ -149,7 +87,59 @@ me.attr('title', 'Click to show the ' + dir + ' slide').html(arrows[dir]); - }).click(go); + }).click(function() { + + var me = $(this), + dir = me.attr('class').split(' ')[1], + + current = items.filter('.' + o.activeClass), + margin = parseFloat(list.css('left')), + + actions = { + previous: function() { + + var first = current.prev().hasClass('cloned'), + prev = first ? items.eq(-1) : current.prev(); + + prev.addClass(o.activeClass).siblings().removeClass(o.activeClass); + + return list.moveUnslider(margin + width, o.speed, o.easing, function() { + + if(parseFloat(list.css('left')) >= 0) { + list.css('left', -(width * (itemCount - 2))); + + // Reset the margin so we can recalculate properly + margin = parseFloat(list.css('left')); + } + + if($.isFunction(o.afterSlide)) { + o.afterSlide.call(this); + } + }); + }, + next: function() { + + var last = current.next().hasClass('cloned'), + next = last ? items.eq(0) : current.next(); + + next.addClass(o.activeClass).siblings().removeClass(o.activeClass); + + return list.moveUnslider(margin - width, o.speed, o.easing, function() { + + last && list.css('left', -width); + + if($.isFunction(o.afterSlide)) { + o.afterSlide.call(this); + } + }); + } + }; + + // Run the action, based on the class of the link. Genius. + if(actions[dir]) { + actions[dir](); + } + }); $(d).keyup(function(e) { var key = e.which, From ed393f022f234d79f1eac41abf46304f7431ca86 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Wed, 7 Mar 2012 10:01:39 +0000 Subject: [PATCH 013/109] Improved performance and added the minified version. --- unslider.js | 4 ++-- unslider.min.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/unslider.js b/unslider.js index 3502d38..447ad2c 100644 --- a/unslider.js +++ b/unslider.js @@ -61,7 +61,7 @@ var me = $(this).addClass('unslider'), list = me.children('ul'), items = list.children('li'), - first = items.filter(':first'), + first = items.first(), itemCount = items.length + 2, // Don't forget our clones! @@ -73,7 +73,7 @@ // Append the first and last items first.addClass(o.activeClass).clone().attr('class', 'cloned').appendTo(list); - items.filter(':last').clone().addClass('cloned').prependTo(list); + items.last().clone().addClass('cloned').prependTo(list); // Set the width to stop wrapping, and since we have a clone, position it offscreen list.css({width: width * itemCount, left: -width}); diff --git a/unslider.min.js b/unslider.min.js index e74a47a..a4c55ec 100644 --- a/unslider.min.js +++ b/unslider.min.js @@ -1 +1 @@ -/*unslider by @visualidiot*/(function(a,b){a.fn.moveUnslider=function(a,b,c,d){var e=this,f=this.is(":animated");if(!f){e.stop().animate({left:parseFloat(a)},b,c,d)}return f};a.fn.unslider=function(c){var e=a.extend({activeClass:"active",arrows:true,autoplay:false,speed:500,delay:3e3,easing:"swing",afterSlide:function(){}},c);return this.each(function(){var c=a(this).addClass("unslider"),f=c.children("ul"),g=f.children("li"),h=g.filter(":first"),i=g.length+2,j=c.width(),k=h.height(),l=function(){var b=a(this),c=b.attr("class").split(" ")[1],d=g.filter("."+e.activeClass),h=parseFloat(f.css("left")),k={previous:function(){var b=d.prev().hasClass("cloned"),c=b?g.eq(-1):d.prev();c.addClass(e.activeClass).siblings().removeClass(e.activeClass);if(parseFloat(f.css("left"))>=0){setTimeout(function(){},e.speed)}return f.moveUnslider(h+j,e.speed,e.easing,function(){if(parseFloat(f.css("left"))>=0){f.css("left",-(j*(i-2)));h=parseFloat(f.css("left"))}if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})},next:function(){var b=d.next().hasClass("cloned"),c=b?g.eq(0):d.next();c.addClass(e.activeClass).siblings().removeClass(e.activeClass);return f.moveUnslider(h-j,e.speed,e.easing,function(){if(b){f.css("left",-j)}if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})}};if(k[c]){k[c]()}};if(i>=4){h.addClass(e.activeClass).clone().attr("class","cloned").appendTo(f);g.filter(":last").clone().addClass("cloned").prependTo(f);f.css({width:j*i,left:-j});if(e.arrows){a('

').appendTo(c.parent()).find(".arrow").each(function(){var b=a(this),c=b.attr("class").split(" ")[1],d={previous:"«",next:"»"};b.attr("title","Click to show the "+c+" slide").html(d[c])}).click(l);a(b).keyup(function(b){var c=b.which,d={37:"previous",39:"next"};if(d[c]){a(".unslider-arrows ."+d[c]).click()}})}if(e.autoplay){var m=function(){return a(".unslider-arrows .next").click()},n=setInterval(m,e.delay);c.hover(function(){clearInterval(n)},function(){n=setInterval(m,e.delay)})}}})}})(jQuery,document) \ No newline at end of file +/*unslider by @visualidiot*/(function(a,b){a.fn.moveUnslider=function(a,b,c,d){var e=this,f=this.is(":animated");if(!f){e.stop().animate({left:parseFloat(a)},b,c,d)}return f};a.fn.unslider=function(c){var e=a.extend({activeClass:"active",arrows:true,autoplay:false,speed:500,delay:3e3,easing:"swing",afterSlide:function(){}},c);return this.each(function(){var c=a(this).addClass("unslider"),f=c.children("ul"),g=f.children("li"),h=g.first(),i=g.length+2,j=c.width(),k=h.height();if(i>=4){h.addClass(e.activeClass).clone().attr("class","cloned").appendTo(f);g.last().clone().addClass("cloned").prependTo(f);f.css({width:j*i,left:-j});if(e.arrows){a('

').appendTo(c.parent()).find(".arrow").each(function(){var b=a(this),c=b.attr("class").split(" ")[1],d={previous:"«",next:"»"};b.attr("title","Click to show the "+c+" slide").html(d[c])}).click(function(){var b=a(this),c=b.attr("class").split(" ")[1],d=g.filter("."+e.activeClass),h=parseFloat(f.css("left")),k={previous:function(){var b=d.prev().hasClass("cloned"),c=b?g.eq(-1):d.prev();c.addClass(e.activeClass).siblings().removeClass(e.activeClass);return f.moveUnslider(h+j,e.speed,e.easing,function(){if(parseFloat(f.css("left"))>=0){f.css("left",-(j*(i-2)));h=parseFloat(f.css("left"))}if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})},next:function(){var b=d.next().hasClass("cloned"),c=b?g.eq(0):d.next();c.addClass(e.activeClass).siblings().removeClass(e.activeClass);return f.moveUnslider(h-j,e.speed,e.easing,function(){b&&f.css("left",-j);if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})}};if(k[c]){k[c]()}});a(b).keyup(function(b){var c=b.which,d={37:"previous",39:"next"};if(d[c]){a(".unslider-arrows ."+d[c]).click()}})}if(e.autoplay){var l=function(){return a(".unslider-arrows .next").click()},m=setInterval(l,e.delay);c.hover(function(){clearInterval(m)},function(){m=setInterval(l,e.delay)})}}})}})(jQuery,document) \ No newline at end of file From 5633529bb715ce70806682bc3eca6760e09243b0 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Wed, 7 Mar 2012 11:19:21 +0000 Subject: [PATCH 014/109] Bumped version number again. --- unslider.js | 4 ++-- unslider.min.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/unslider.js b/unslider.js index 447ad2c..35b68b3 100644 --- a/unslider.js +++ b/unslider.js @@ -1,5 +1,5 @@ /** - * Unslider 0.2 + * Unslider 0.3 * by @visualidiot * * Licensed under the WTFPL, as always. @@ -83,7 +83,7 @@ $('

').appendTo(me.parent()).find('.arrow').each(function() { var me = $(this), dir = me.attr('class').split(' ')[1], - arrows = {previous: '«', next: '»'}; + arrows = {previous: '←', next: '→'}; me.attr('title', 'Click to show the ' + dir + ' slide').html(arrows[dir]); diff --git a/unslider.min.js b/unslider.min.js index a4c55ec..92d3ede 100644 --- a/unslider.min.js +++ b/unslider.min.js @@ -1 +1 @@ -/*unslider by @visualidiot*/(function(a,b){a.fn.moveUnslider=function(a,b,c,d){var e=this,f=this.is(":animated");if(!f){e.stop().animate({left:parseFloat(a)},b,c,d)}return f};a.fn.unslider=function(c){var e=a.extend({activeClass:"active",arrows:true,autoplay:false,speed:500,delay:3e3,easing:"swing",afterSlide:function(){}},c);return this.each(function(){var c=a(this).addClass("unslider"),f=c.children("ul"),g=f.children("li"),h=g.first(),i=g.length+2,j=c.width(),k=h.height();if(i>=4){h.addClass(e.activeClass).clone().attr("class","cloned").appendTo(f);g.last().clone().addClass("cloned").prependTo(f);f.css({width:j*i,left:-j});if(e.arrows){a('

').appendTo(c.parent()).find(".arrow").each(function(){var b=a(this),c=b.attr("class").split(" ")[1],d={previous:"«",next:"»"};b.attr("title","Click to show the "+c+" slide").html(d[c])}).click(function(){var b=a(this),c=b.attr("class").split(" ")[1],d=g.filter("."+e.activeClass),h=parseFloat(f.css("left")),k={previous:function(){var b=d.prev().hasClass("cloned"),c=b?g.eq(-1):d.prev();c.addClass(e.activeClass).siblings().removeClass(e.activeClass);return f.moveUnslider(h+j,e.speed,e.easing,function(){if(parseFloat(f.css("left"))>=0){f.css("left",-(j*(i-2)));h=parseFloat(f.css("left"))}if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})},next:function(){var b=d.next().hasClass("cloned"),c=b?g.eq(0):d.next();c.addClass(e.activeClass).siblings().removeClass(e.activeClass);return f.moveUnslider(h-j,e.speed,e.easing,function(){b&&f.css("left",-j);if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})}};if(k[c]){k[c]()}});a(b).keyup(function(b){var c=b.which,d={37:"previous",39:"next"};if(d[c]){a(".unslider-arrows ."+d[c]).click()}})}if(e.autoplay){var l=function(){return a(".unslider-arrows .next").click()},m=setInterval(l,e.delay);c.hover(function(){clearInterval(m)},function(){m=setInterval(l,e.delay)})}}})}})(jQuery,document) \ No newline at end of file +/*unslider by @visualidiot*/(function(a,b){a.fn.moveUnslider=function(a,b,c,d){var e=this,f=this.is(":animated");if(!f){e.stop().animate({left:parseFloat(a)},b,c,d)}return f};a.fn.unslider=function(c){var e=a.extend({activeClass:"active",arrows:true,autoplay:false,speed:500,delay:3e3,easing:"swing",afterSlide:function(){}},c);return this.each(function(){var c=a(this).addClass("unslider"),f=c.children("ul"),g=f.children("li"),h=g.first(),i=g.length+2,j=c.width(),k=h.height();if(i>=4){h.addClass(e.activeClass).clone().attr("class","cloned").appendTo(f);g.last().clone().addClass("cloned").prependTo(f);f.css({width:j*i,left:-j});if(e.arrows){a('

').appendTo(c.parent()).find(".arrow").each(function(){var b=a(this),c=b.attr("class").split(" ")[1],d={previous:"←",next:"→"};b.attr("title","Click to show the "+c+" slide").html(d[c])}).click(function(){var b=a(this),c=b.attr("class").split(" ")[1],d=g.filter("."+e.activeClass),h=parseFloat(f.css("left")),k={previous:function(){var b=d.prev().hasClass("cloned"),c=b?g.eq(-1):d.prev();c.addClass(e.activeClass).siblings().removeClass(e.activeClass);return f.moveUnslider(h+j,e.speed,e.easing,function(){if(parseFloat(f.css("left"))>=0){f.css("left",-(j*(i-2)));h=parseFloat(f.css("left"))}if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})},next:function(){var b=d.next().hasClass("cloned"),c=b?g.eq(0):d.next();c.addClass(e.activeClass).siblings().removeClass(e.activeClass);return f.moveUnslider(h-j,e.speed,e.easing,function(){b&&f.css("left",-j);if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})}};if(k[c]){k[c]()}});a(b).keyup(function(b){var c=b.which,d={37:"previous",39:"next"};if(d[c]){a(".unslider-arrows ."+d[c]).click()}})}if(e.autoplay){var l=function(){return a(".unslider-arrows .next").click()},m=setInterval(l,e.delay);c.hover(function(){clearInterval(m)},function(){m=setInterval(l,e.delay)})}}})}})(jQuery,document) \ No newline at end of file From 16cb208c695f2399267d497bf691982db2c9127a Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Wed, 7 Mar 2012 11:20:46 +0000 Subject: [PATCH 015/109] Updated docs. --- readme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/readme.md b/readme.md index c55424b..312f7e9 100644 --- a/readme.md +++ b/readme.md @@ -16,6 +16,7 @@ To begin using Unslider, just include the files, and create a `div` with an unor Pretty straightforward, and nice and semantic. Lovely. Now, we need a touch of CSS as well: ```css .unslider { overflow: hidden; } + .unslider ul { position: relative; } .unslider li { float: left; } ``` From 904d16c94032ccb119921224593ea0dab4c3ba2b Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Wed, 7 Mar 2012 12:46:10 +0000 Subject: [PATCH 016/109] Optimisifying. --- unslider.js | 43 ++++++++++++++++++------------------------- unslider.min.js | 2 +- 2 files changed, 19 insertions(+), 26 deletions(-) diff --git a/unslider.js b/unslider.js index 35b68b3..8c7b496 100644 --- a/unslider.js +++ b/unslider.js @@ -27,15 +27,7 @@ * Move the Unslider */ $.fn.moveUnslider = function(pos, speed, easing, callback) { - - var me = this, - anim = this.is(':animated'); - - if(!anim) { - me.stop().animate({left: parseFloat(pos)}, speed, easing, callback); - } - - return anim; + return this.is(':animated') || this.stop().animate({left: parseFloat(pos)}, speed, easing, callback); }; $.fn.unslider = function(options) { @@ -54,7 +46,9 @@ // Callbacks afterSlide: function() {} - }, options); + }, options), + c = 'cloned', + a = 'unslider-arrows'; // And loop every instance of the Unslider return this.each(function() { @@ -66,21 +60,23 @@ itemCount = items.length + 2, // Don't forget our clones! width = me.width(), - height = first.height(); + height = first.height(), + + setActive = function(el) { el.addClass(o.activeClass).siblings().removeClass(o.activeClass); }; // Check we have two or more items (the itemCount adds two) if(itemCount >= 4) { // Append the first and last items - first.addClass(o.activeClass).clone().attr('class', 'cloned').appendTo(list); - items.last().clone().addClass('cloned').prependTo(list); + first.addClass(o.activeClass).clone().attr('class', c).appendTo(list); + items.last().clone().addClass(c).prependTo(list); // Set the width to stop wrapping, and since we have a clone, position it offscreen list.css({width: width * itemCount, left: -width}); // Get the arrows, if they want 'em. if(o.arrows) { - $('

').appendTo(me.parent()).find('.arrow').each(function() { + $('

').appendTo(me.parent()).find('.arrow').each(function() { var me = $(this), dir = me.attr('class').split(' ')[1], arrows = {previous: '←', next: '→'}; @@ -98,10 +94,10 @@ actions = { previous: function() { - var first = current.prev().hasClass('cloned'), + var first = current.prev().hasClass(c), prev = first ? items.eq(-1) : current.prev(); - prev.addClass(o.activeClass).siblings().removeClass(o.activeClass); + setActive(prev); return list.moveUnslider(margin + width, o.speed, o.easing, function() { @@ -119,10 +115,10 @@ }, next: function() { - var last = current.next().hasClass('cloned'), + var last = current.next().hasClass(c), next = last ? items.eq(0) : current.next(); - next.addClass(o.activeClass).siblings().removeClass(o.activeClass); + setActive(next); return list.moveUnslider(margin - width, o.speed, o.easing, function() { @@ -142,20 +138,17 @@ }); $(d).keyup(function(e) { - var key = e.which, - keys = {37: 'previous', 39: 'next'}; + var keys = {37: 'previous', 39: 'next'}; - if(keys[key]) { - $('.unslider-arrows .' + keys[key]).click(); + if(keys[e.which]) { + $('.' + a + ' .' + keys[e.which]).click(); } }); } // Autoplay if(o.autoplay) { - var cont = function() { - return $('.unslider-arrows .next').click(); - }, + var cont = function() { $('.' + a + ' .next').click(); }, auto = setInterval(cont, o.delay); // Turn off (and back on) on hover. diff --git a/unslider.min.js b/unslider.min.js index 92d3ede..9f02dd7 100644 --- a/unslider.min.js +++ b/unslider.min.js @@ -1 +1 @@ -/*unslider by @visualidiot*/(function(a,b){a.fn.moveUnslider=function(a,b,c,d){var e=this,f=this.is(":animated");if(!f){e.stop().animate({left:parseFloat(a)},b,c,d)}return f};a.fn.unslider=function(c){var e=a.extend({activeClass:"active",arrows:true,autoplay:false,speed:500,delay:3e3,easing:"swing",afterSlide:function(){}},c);return this.each(function(){var c=a(this).addClass("unslider"),f=c.children("ul"),g=f.children("li"),h=g.first(),i=g.length+2,j=c.width(),k=h.height();if(i>=4){h.addClass(e.activeClass).clone().attr("class","cloned").appendTo(f);g.last().clone().addClass("cloned").prependTo(f);f.css({width:j*i,left:-j});if(e.arrows){a('

').appendTo(c.parent()).find(".arrow").each(function(){var b=a(this),c=b.attr("class").split(" ")[1],d={previous:"←",next:"→"};b.attr("title","Click to show the "+c+" slide").html(d[c])}).click(function(){var b=a(this),c=b.attr("class").split(" ")[1],d=g.filter("."+e.activeClass),h=parseFloat(f.css("left")),k={previous:function(){var b=d.prev().hasClass("cloned"),c=b?g.eq(-1):d.prev();c.addClass(e.activeClass).siblings().removeClass(e.activeClass);return f.moveUnslider(h+j,e.speed,e.easing,function(){if(parseFloat(f.css("left"))>=0){f.css("left",-(j*(i-2)));h=parseFloat(f.css("left"))}if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})},next:function(){var b=d.next().hasClass("cloned"),c=b?g.eq(0):d.next();c.addClass(e.activeClass).siblings().removeClass(e.activeClass);return f.moveUnslider(h-j,e.speed,e.easing,function(){b&&f.css("left",-j);if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})}};if(k[c]){k[c]()}});a(b).keyup(function(b){var c=b.which,d={37:"previous",39:"next"};if(d[c]){a(".unslider-arrows ."+d[c]).click()}})}if(e.autoplay){var l=function(){return a(".unslider-arrows .next").click()},m=setInterval(l,e.delay);c.hover(function(){clearInterval(m)},function(){m=setInterval(l,e.delay)})}}})}})(jQuery,document) \ No newline at end of file +/*unslider by @visualidiot*/(function(a,b){a.fn.moveUnslider=function(a,b,c,d){return this.is(":animated")||this.stop().animate({left:parseFloat(a)},b,c,d)};a.fn.unslider=function(c){var e=a.extend({activeClass:"active",arrows:true,autoplay:false,speed:500,delay:3e3,easing:"swing",afterSlide:function(){}},c),f="cloned",g="unslider-arrows";return this.each(function(){var c=a(this).addClass("unslider"),h=c.children("ul"),i=h.children("li"),j=i.first(),k=i.length+2,l=c.width(),m=j.height(),n=function(a){a.addClass(e.activeClass).siblings().removeClass(e.activeClass)};if(k>=4){j.addClass(e.activeClass).clone().attr("class",f).appendTo(h);i.last().clone().addClass(f).prependTo(h);h.css({width:l*k,left:-l});if(e.arrows){a('

').appendTo(c.parent()).find(".arrow").each(function(){var b=a(this),c=b.attr("class").split(" ")[1],d={previous:"←",next:"→"};b.attr("title","Click to show the "+c+" slide").html(d[c])}).click(function(){var b=a(this),c=b.attr("class").split(" ")[1],d=i.filter("."+e.activeClass),g=parseFloat(h.css("left")),j={previous:function(){var b=d.prev().hasClass(f),c=b?i.eq(-1):d.prev();n(c);return h.moveUnslider(g+l,e.speed,e.easing,function(){if(parseFloat(h.css("left"))>=0){h.css("left",-(l*(k-2)));g=parseFloat(h.css("left"))}if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})},next:function(){var b=d.next().hasClass(f),c=b?i.eq(0):d.next();n(c);return h.moveUnslider(g-l,e.speed,e.easing,function(){b&&h.css("left",-l);if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})}};if(j[c]){j[c]()}});a(b).keyup(function(b){var c={37:"previous",39:"next"};if(c[b.which]){a("."+g+" ."+c[b.which]).click()}})}if(e.autoplay){var p=function(){a("."+g+" .next").click()},q=setInterval(p,e.delay);c.hover(function(){clearInterval(q)},function(){q=setInterval(p,e.delay)})}}})}})(jQuery,document) \ No newline at end of file From aee8fa8ecbefe550e45183d1e55154b49e94b52c Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Wed, 7 Mar 2012 16:14:54 +0000 Subject: [PATCH 017/109] =?UTF-8?q?Updatin=E2=80=99=20the=20readme.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- readme.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/readme.md b/readme.md index 312f7e9..8056edf 100644 --- a/readme.md +++ b/readme.md @@ -1,7 +1,7 @@ # Unslider ### A jQuery slider that just slides. -If you want to have a quick, lightweight slider, with just the arrows and no fancy effects, then you'll love Unslider. Weighing in at 3kb uncompressed, and 1.6kb compressed, it's an incredibly lightweight solution. +If you want to have a quick, lightweight slider, with just the arrows and no fancy effects, then you'll love Unslider. Weighing in at 4kb uncompressed, and 1.9kb compressed, it's an incredibly lightweight solution. ## Features * Slides a list @@ -15,9 +15,15 @@ To begin using Unslider, just include the files, and create a `div` with an unor Pretty straightforward, and nice and semantic. Lovely. Now, we need a touch of CSS as well: ```css -.unslider { overflow: hidden; } - .unslider ul { position: relative; } - .unslider li { float: left; } +.unslider { + overflow: hidden; +} + .unslider ul { + position: relative; + } + .unslider li { + float: left; + } ``` _This is the same as the contents for unslider.css, so if you're including that file, don't add this CSS._ From f87f18b3333d1a70650a6f192f50ffdbdb829bf5 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Thu, 8 Mar 2012 11:46:55 +0000 Subject: [PATCH 018/109] Added jQswipe support. --- unslider.js | 10 ++++++++-- unslider.min.js | 2 +- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/unslider.js b/unslider.js index 8c7b496..9e5296d 100644 --- a/unslider.js +++ b/unslider.js @@ -48,10 +48,11 @@ afterSlide: function() {} }, options), c = 'cloned', - a = 'unslider-arrows'; + a = 'unslider-arrows', + s = this; // And loop every instance of the Unslider - return this.each(function() { + return s.each(function() { var me = $(this).addClass('unslider'), list = me.children('ul'), items = list.children('li'), @@ -146,6 +147,11 @@ }); } + // Add touch support + if($.jQswipe) { + s.bind('swipe', function() { $('.' + a + ' .next').click(); }); + } + // Autoplay if(o.autoplay) { var cont = function() { $('.' + a + ' .next').click(); }, diff --git a/unslider.min.js b/unslider.min.js index 9f02dd7..f6f6a14 100644 --- a/unslider.min.js +++ b/unslider.min.js @@ -1 +1 @@ -/*unslider by @visualidiot*/(function(a,b){a.fn.moveUnslider=function(a,b,c,d){return this.is(":animated")||this.stop().animate({left:parseFloat(a)},b,c,d)};a.fn.unslider=function(c){var e=a.extend({activeClass:"active",arrows:true,autoplay:false,speed:500,delay:3e3,easing:"swing",afterSlide:function(){}},c),f="cloned",g="unslider-arrows";return this.each(function(){var c=a(this).addClass("unslider"),h=c.children("ul"),i=h.children("li"),j=i.first(),k=i.length+2,l=c.width(),m=j.height(),n=function(a){a.addClass(e.activeClass).siblings().removeClass(e.activeClass)};if(k>=4){j.addClass(e.activeClass).clone().attr("class",f).appendTo(h);i.last().clone().addClass(f).prependTo(h);h.css({width:l*k,left:-l});if(e.arrows){a('

').appendTo(c.parent()).find(".arrow").each(function(){var b=a(this),c=b.attr("class").split(" ")[1],d={previous:"←",next:"→"};b.attr("title","Click to show the "+c+" slide").html(d[c])}).click(function(){var b=a(this),c=b.attr("class").split(" ")[1],d=i.filter("."+e.activeClass),g=parseFloat(h.css("left")),j={previous:function(){var b=d.prev().hasClass(f),c=b?i.eq(-1):d.prev();n(c);return h.moveUnslider(g+l,e.speed,e.easing,function(){if(parseFloat(h.css("left"))>=0){h.css("left",-(l*(k-2)));g=parseFloat(h.css("left"))}if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})},next:function(){var b=d.next().hasClass(f),c=b?i.eq(0):d.next();n(c);return h.moveUnslider(g-l,e.speed,e.easing,function(){b&&h.css("left",-l);if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})}};if(j[c]){j[c]()}});a(b).keyup(function(b){var c={37:"previous",39:"next"};if(c[b.which]){a("."+g+" ."+c[b.which]).click()}})}if(e.autoplay){var p=function(){a("."+g+" .next").click()},q=setInterval(p,e.delay);c.hover(function(){clearInterval(q)},function(){q=setInterval(p,e.delay)})}}})}})(jQuery,document) \ No newline at end of file +/*unslider by @visualidiot*/(function(a,b){a.fn.moveUnslider=function(a,b,c,d){return this.is(":animated")||this.stop().animate({left:parseFloat(a)},b,c,d)};a.fn.unslider=function(c){var e=a.extend({activeClass:"active",arrows:true,autoplay:false,speed:500,delay:3e3,easing:"swing",afterSlide:function(){}},c),f="cloned",g="unslider-arrows",h=this;return h.each(function(){var c=a(this).addClass("unslider"),i=c.children("ul"),j=i.children("li"),k=j.first(),l=j.length+2,m=c.width(),n=k.height(),p=function(a){a.addClass(e.activeClass).siblings().removeClass(e.activeClass)};if(l>=4){k.addClass(e.activeClass).clone().attr("class",f).appendTo(i);j.last().clone().addClass(f).prependTo(i);i.css({width:m*l,left:-m});if(e.arrows){a('

').appendTo(c.parent()).find(".arrow").each(function(){var b=a(this),c=b.attr("class").split(" ")[1],d={previous:"←",next:"→"};b.attr("title","Click to show the "+c+" slide").html(d[c])}).click(function(){var b=a(this),c=b.attr("class").split(" ")[1],d=j.filter("."+e.activeClass),g=parseFloat(i.css("left")),h={previous:function(){var b=d.prev().hasClass(f),c=b?j.eq(-1):d.prev();p(c);return i.moveUnslider(g+m,e.speed,e.easing,function(){if(parseFloat(i.css("left"))>=0){i.css("left",-(m*(l-2)));g=parseFloat(i.css("left"))}if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})},next:function(){var b=d.next().hasClass(f),c=b?j.eq(0):d.next();p(c);return i.moveUnslider(g-m,e.speed,e.easing,function(){b&&i.css("left",-m);if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})}};if(h[c]){h[c]()}});a(b).keyup(function(b){var c={37:"previous",39:"next"};if(c[b.which]){a("."+g+" ."+c[b.which]).click()}})}if(a.jQswipe){h.bind("swipe",function(){a("."+g+" .next").click()})}if(e.autoplay){var q=function(){a("."+g+" .next").click()},r=setInterval(q,e.delay);c.hover(function(){clearInterval(r)},function(){r=setInterval(q,e.delay)})}}})}})(jQuery,document) \ No newline at end of file From 76b503e4a00baf103978cb481e9741b29f07b561 Mon Sep 17 00:00:00 2001 From: Vlad Alive Date: Fri, 30 Mar 2012 13:03:46 +0400 Subject: [PATCH 019/109] [fix] wrong width calculated from
    not from
  • --- unslider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/unslider.js b/unslider.js index 9e5296d..00773d8 100644 --- a/unslider.js +++ b/unslider.js @@ -60,7 +60,7 @@ itemCount = items.length + 2, // Don't forget our clones! - width = me.width(), + width = first.width(), height = first.height(), setActive = function(el) { el.addClass(o.activeClass).siblings().removeClass(o.activeClass); }; From 8168aac3bf53c65d47f5a21bb14221bf2c5eac02 Mon Sep 17 00:00:00 2001 From: Dan Eden Date: Wed, 23 May 2012 10:22:00 +0200 Subject: [PATCH 020/109] Append arrows to 'me' instead of 'me.parent()' --- unslider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/unslider.js b/unslider.js index 00773d8..672f1d8 100644 --- a/unslider.js +++ b/unslider.js @@ -77,7 +77,7 @@ // Get the arrows, if they want 'em. if(o.arrows) { - $('

    ').appendTo(me.parent()).find('.arrow').each(function() { + $('

    ').appendTo(me).find('.arrow').each(function() { var me = $(this), dir = me.attr('class').split(' ')[1], arrows = {previous: '←', next: '→'}; From 8cdc45eea8c6c3b5885281964ad0387fd989a563 Mon Sep 17 00:00:00 2001 From: Dan Eden Date: Wed, 23 May 2012 10:24:36 +0200 Subject: [PATCH 021/109] Append arrows to 'c' instead of 'c.parent()' --- unslider.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/unslider.min.js b/unslider.min.js index f6f6a14..ecb56af 100644 --- a/unslider.min.js +++ b/unslider.min.js @@ -1 +1 @@ -/*unslider by @visualidiot*/(function(a,b){a.fn.moveUnslider=function(a,b,c,d){return this.is(":animated")||this.stop().animate({left:parseFloat(a)},b,c,d)};a.fn.unslider=function(c){var e=a.extend({activeClass:"active",arrows:true,autoplay:false,speed:500,delay:3e3,easing:"swing",afterSlide:function(){}},c),f="cloned",g="unslider-arrows",h=this;return h.each(function(){var c=a(this).addClass("unslider"),i=c.children("ul"),j=i.children("li"),k=j.first(),l=j.length+2,m=c.width(),n=k.height(),p=function(a){a.addClass(e.activeClass).siblings().removeClass(e.activeClass)};if(l>=4){k.addClass(e.activeClass).clone().attr("class",f).appendTo(i);j.last().clone().addClass(f).prependTo(i);i.css({width:m*l,left:-m});if(e.arrows){a('

    ').appendTo(c.parent()).find(".arrow").each(function(){var b=a(this),c=b.attr("class").split(" ")[1],d={previous:"←",next:"→"};b.attr("title","Click to show the "+c+" slide").html(d[c])}).click(function(){var b=a(this),c=b.attr("class").split(" ")[1],d=j.filter("."+e.activeClass),g=parseFloat(i.css("left")),h={previous:function(){var b=d.prev().hasClass(f),c=b?j.eq(-1):d.prev();p(c);return i.moveUnslider(g+m,e.speed,e.easing,function(){if(parseFloat(i.css("left"))>=0){i.css("left",-(m*(l-2)));g=parseFloat(i.css("left"))}if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})},next:function(){var b=d.next().hasClass(f),c=b?j.eq(0):d.next();p(c);return i.moveUnslider(g-m,e.speed,e.easing,function(){b&&i.css("left",-m);if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})}};if(h[c]){h[c]()}});a(b).keyup(function(b){var c={37:"previous",39:"next"};if(c[b.which]){a("."+g+" ."+c[b.which]).click()}})}if(a.jQswipe){h.bind("swipe",function(){a("."+g+" .next").click()})}if(e.autoplay){var q=function(){a("."+g+" .next").click()},r=setInterval(q,e.delay);c.hover(function(){clearInterval(r)},function(){r=setInterval(q,e.delay)})}}})}})(jQuery,document) \ No newline at end of file +/*unslider by @visualidiot*/(function(a,b){a.fn.moveUnslider=function(a,b,c,d){return this.is(":animated")||this.stop().animate({left:parseFloat(a)},b,c,d)};a.fn.unslider=function(c){var e=a.extend({activeClass:"active",arrows:true,autoplay:false,speed:500,delay:3e3,easing:"swing",afterSlide:function(){}},c),f="cloned",g="unslider-arrows",h=this;return h.each(function(){var c=a(this).addClass("unslider"),i=c.children("ul"),j=i.children("li"),k=j.first(),l=j.length+2,m=c.width(),n=k.height(),p=function(a){a.addClass(e.activeClass).siblings().removeClass(e.activeClass)};if(l>=4){k.addClass(e.activeClass).clone().attr("class",f).appendTo(i);j.last().clone().addClass(f).prependTo(i);i.css({width:m*l,left:-m});if(e.arrows){a('

    ').appendTo(c).find(".arrow").each(function(){var b=a(this),c=b.attr("class").split(" ")[1],d={previous:"←",next:"→"};b.attr("title","Click to show the "+c+" slide").html(d[c])}).click(function(){var b=a(this),c=b.attr("class").split(" ")[1],d=j.filter("."+e.activeClass),g=parseFloat(i.css("left")),h={previous:function(){var b=d.prev().hasClass(f),c=b?j.eq(-1):d.prev();p(c);return i.moveUnslider(g+m,e.speed,e.easing,function(){if(parseFloat(i.css("left"))>=0){i.css("left",-(m*(l-2)));g=parseFloat(i.css("left"))}if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})},next:function(){var b=d.next().hasClass(f),c=b?j.eq(0):d.next();p(c);return i.moveUnslider(g-m,e.speed,e.easing,function(){b&&i.css("left",-m);if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})}};if(h[c]){h[c]()}});a(b).keyup(function(b){var c={37:"previous",39:"next"};if(c[b.which]){a("."+g+" ."+c[b.which]).click()}})}if(a.jQswipe){h.bind("swipe",function(){a("."+g+" .next").click()})}if(e.autoplay){var q=function(){a("."+g+" .next").click()},r=setInterval(q,e.delay);c.hover(function(){clearInterval(r)},function(){r=setInterval(q,e.delay)})}}})}})(jQuery,document) \ No newline at end of file From 693e377cfcdc6a76b35715b7359f461be3995b2a Mon Sep 17 00:00:00 2001 From: Dan Eden Date: Wed, 23 May 2012 10:36:57 +0200 Subject: [PATCH 022/109] List styles? Where we're going, we don't need list styles. --- unslider.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/unslider.css b/unslider.css index 2bdb2d4..a922b64 100644 --- a/unslider.css +++ b/unslider.css @@ -1,3 +1,3 @@ .unslider { overflow: hidden; } - .unslider ul { position: relative; } + .unslider ul { position: relative; list-style: none; } .unslider li { float: left; } \ No newline at end of file From 158e3a0ad3e5efc52a4d96282ffac0cdc2e03b25 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Fri, 1 Feb 2013 14:26:34 +0000 Subject: [PATCH 023/109] remove ALL the files --- readme.md | 61 +--------------- unslider.js | 181 ++++-------------------------------------------- unslider.min.js | 1 - 3 files changed, 16 insertions(+), 227 deletions(-) delete mode 100644 unslider.min.js diff --git a/readme.md b/readme.md index 8056edf..52acc16 100644 --- a/readme.md +++ b/readme.md @@ -1,60 +1 @@ -# Unslider -### A jQuery slider that just slides. - -If you want to have a quick, lightweight slider, with just the arrows and no fancy effects, then you'll love Unslider. Weighing in at 4kb uncompressed, and 1.9kb compressed, it's an incredibly lightweight solution. - -## Features -* Slides a list -* Supports any HTML content (within a list item) -* Keyboard support - -That's it! - -## Quickstart -To begin using Unslider, just include the files, and create a `div` with an unordered list (`ul`) inside. - -Pretty straightforward, and nice and semantic. Lovely. Now, we need a touch of CSS as well: -```css -.unslider { - overflow: hidden; -} - .unslider ul { - position: relative; - } - .unslider li { - float: left; - } -``` - -_This is the same as the contents for unslider.css, so if you're including that file, don't add this CSS._ - -Now that it's all set up, you just need to call the `unslider` method, with any options. They're optional, though, so you don't need to - -```javascript -// Vanilla install -$('#slider').unslider(); - -// And any options -$('#slider').unslider({ - // Options go here. -}); -``` - -## Options -It's also got a few options. Here are the defaults: - -```javascript -{ - activeClass: 'active', // The class of the active slide - arrows: true, // Choose whether to show the arrows in the markup or not - - // Speeds + timing - speed: 250, - delay: 2000, - autoplay: true, // Should the slider autoplay? - easing: 'swing', // A jQuery easing string (see the Easing plugin for more: http://gsgd.co.uk/sandbox/jquery/easing/) - - // Callbacks - afterSlide: function() {} // Called after a slide has occured. -} -``` \ No newline at end of file +Visit the site. \ No newline at end of file diff --git a/unslider.js b/unslider.js index 672f1d8..318844b 100644 --- a/unslider.js +++ b/unslider.js @@ -1,171 +1,20 @@ /** - * Unslider 0.3 - * by @visualidiot - * - * Licensed under the WTFPL, as always. - * - ** - * The quickest way to set it up is like this. - ** - * - * HTML:
    - *
      - *
    • - *
    • - *
    • - *
    - *
    - * - * CSS: Provided in unslider.css - * - * JS: $('#slider').unslider(); + * Unslider by @idiot */ -(function($, d) { - - /** - * Move the Unslider - */ - $.fn.moveUnslider = function(pos, speed, easing, callback) { - return this.is(':animated') || this.stop().animate({left: parseFloat(pos)}, speed, easing, callback); - }; - - $.fn.unslider = function(options) { - - // Set the options - var o = $.extend({ - activeClass: 'active', - arrows: true, - autoplay: false, - - // Speeds + timing - speed: 500, - delay: 3000, - - easing: 'swing', - - // Callbacks - afterSlide: function() {} - }, options), - c = 'cloned', - a = 'unslider-arrows', - s = this; - - // And loop every instance of the Unslider - return s.each(function() { - var me = $(this).addClass('unslider'), - list = me.children('ul'), - items = list.children('li'), - first = items.first(), - - itemCount = items.length + 2, // Don't forget our clones! - - width = first.width(), - height = first.height(), - - setActive = function(el) { el.addClass(o.activeClass).siblings().removeClass(o.activeClass); }; - - // Check we have two or more items (the itemCount adds two) - if(itemCount >= 4) { +(function($, f) { + // If there's no jQuery, Unslider can't work, so kill the operation. + if(!$) return f; - // Append the first and last items - first.addClass(o.activeClass).clone().attr('class', c).appendTo(list); - items.last().clone().addClass(c).prependTo(list); - - // Set the width to stop wrapping, and since we have a clone, position it offscreen - list.css({width: width * itemCount, left: -width}); - - // Get the arrows, if they want 'em. - if(o.arrows) { - $('

    ').appendTo(me).find('.arrow').each(function() { - - var me = $(this), dir = me.attr('class').split(' ')[1], - arrows = {previous: '←', next: '→'}; - - me.attr('title', 'Click to show the ' + dir + ' slide').html(arrows[dir]); - - }).click(function() { - - var me = $(this), - dir = me.attr('class').split(' ')[1], - - current = items.filter('.' + o.activeClass), - margin = parseFloat(list.css('left')), - - actions = { - previous: function() { - - var first = current.prev().hasClass(c), - prev = first ? items.eq(-1) : current.prev(); - - setActive(prev); - - return list.moveUnslider(margin + width, o.speed, o.easing, function() { - - if(parseFloat(list.css('left')) >= 0) { - list.css('left', -(width * (itemCount - 2))); - - // Reset the margin so we can recalculate properly - margin = parseFloat(list.css('left')); - } - - if($.isFunction(o.afterSlide)) { - o.afterSlide.call(this); - } - }); - }, - next: function() { - - var last = current.next().hasClass(c), - next = last ? items.eq(0) : current.next(); - - setActive(next); - - return list.moveUnslider(margin - width, o.speed, o.easing, function() { - - last && list.css('left', -width); - - if($.isFunction(o.afterSlide)) { - o.afterSlide.call(this); - } - }); - } - }; - - // Run the action, based on the class of the link. Genius. - if(actions[dir]) { - actions[dir](); - } - }); - - $(d).keyup(function(e) { - var keys = {37: 'previous', 39: 'next'}; - - if(keys[e.which]) { - $('.' + a + ' .' + keys[e.which]).click(); - } - }); - } - - // Add touch support - if($.jQswipe) { - s.bind('swipe', function() { $('.' + a + ' .next').click(); }); - } - - // Autoplay - if(o.autoplay) { - var cont = function() { $('.' + a + ' .next').click(); }, - auto = setInterval(cont, o.delay); - - // Turn off (and back on) on hover. - me.hover(function() { - clearInterval(auto); - }, function() { - auto = setInterval(cont, o.delay); - }); - } - } - }); + var Unslider = { + // Set up the elements + el: f, + items: f, + + // Set up Unslider's element + init: function(el) { + this.el = el; + this.items = el.find('li'); + } }; - -})(jQuery, document); \ No newline at end of file +})(window.jQuery, false); \ No newline at end of file diff --git a/unslider.min.js b/unslider.min.js deleted file mode 100644 index ecb56af..0000000 --- a/unslider.min.js +++ /dev/null @@ -1 +0,0 @@ -/*unslider by @visualidiot*/(function(a,b){a.fn.moveUnslider=function(a,b,c,d){return this.is(":animated")||this.stop().animate({left:parseFloat(a)},b,c,d)};a.fn.unslider=function(c){var e=a.extend({activeClass:"active",arrows:true,autoplay:false,speed:500,delay:3e3,easing:"swing",afterSlide:function(){}},c),f="cloned",g="unslider-arrows",h=this;return h.each(function(){var c=a(this).addClass("unslider"),i=c.children("ul"),j=i.children("li"),k=j.first(),l=j.length+2,m=c.width(),n=k.height(),p=function(a){a.addClass(e.activeClass).siblings().removeClass(e.activeClass)};if(l>=4){k.addClass(e.activeClass).clone().attr("class",f).appendTo(i);j.last().clone().addClass(f).prependTo(i);i.css({width:m*l,left:-m});if(e.arrows){a('

    ').appendTo(c).find(".arrow").each(function(){var b=a(this),c=b.attr("class").split(" ")[1],d={previous:"←",next:"→"};b.attr("title","Click to show the "+c+" slide").html(d[c])}).click(function(){var b=a(this),c=b.attr("class").split(" ")[1],d=j.filter("."+e.activeClass),g=parseFloat(i.css("left")),h={previous:function(){var b=d.prev().hasClass(f),c=b?j.eq(-1):d.prev();p(c);return i.moveUnslider(g+m,e.speed,e.easing,function(){if(parseFloat(i.css("left"))>=0){i.css("left",-(m*(l-2)));g=parseFloat(i.css("left"))}if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})},next:function(){var b=d.next().hasClass(f),c=b?j.eq(0):d.next();p(c);return i.moveUnslider(g-m,e.speed,e.easing,function(){b&&i.css("left",-m);if(a.isFunction(e.afterSlide)){e.afterSlide.call(this)}})}};if(h[c]){h[c]()}});a(b).keyup(function(b){var c={37:"previous",39:"next"};if(c[b.which]){a("."+g+" ."+c[b.which]).click()}})}if(a.jQswipe){h.bind("swipe",function(){a("."+g+" .next").click()})}if(e.autoplay){var q=function(){a("."+g+" .next").click()},r=setInterval(q,e.delay);c.hover(function(){clearInterval(r)},function(){r=setInterval(q,e.delay)})}}})}})(jQuery,document) \ No newline at end of file From b22b21737c83fe24bf9c83a93177a2812068147a Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Fri, 1 Feb 2013 17:15:53 +0000 Subject: [PATCH 024/109] building the framework --- unslider.js | 34 ++++++++++++++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/unslider.js b/unslider.js index 318844b..d7f285c 100644 --- a/unslider.js +++ b/unslider.js @@ -10,11 +10,41 @@ // Set up the elements el: f, items: f, + sizes: [], + + // Default options + opts: ['auto', 'keys', 'arrows', 'thumbs'], // Set up Unslider's element - init: function(el) { + init: function(el, opts) { this.el = el; - this.items = el.find('li'); + this.items = el.find('li').each(this.calculate); + + // Check whether we're passing any options in to Unslider + if(opts && $.isArray(opts)) { + this.opts = opts; + } + + return this; + }, + + // Get the width for an element + // Pass a jQuery element as the context with .call(), and the index as a parameter: Unslider.calculate.call($('li:first'), 0) + calculate: function(index) { + // Add it to the sizes list + Unslider.sizes[index] = [this.outerWidth(), this.outerheight()]; } }; + + // Create a jQuery plugin + $.fn.unslider = function(o) { + // Enable multiple-slider support + return this.each(function() { + // Cache a copy of $(this), so it + var me = $(this); + + // Invoke an Unslider instance + me.data('unslider', new Unslider(me, o)); + }); + }; })(window.jQuery, false); \ No newline at end of file From 7f843a4ec6ad447949df11f6619f29149cfd7f0a Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Fri, 1 Feb 2013 18:29:27 +0000 Subject: [PATCH 025/109] testing --- test.html | 12 ++++++++++++ unslider.css | 3 --- unslider.js | 7 ++++++- 3 files changed, 18 insertions(+), 4 deletions(-) create mode 100644 test.html delete mode 100644 unslider.css diff --git a/test.html b/test.html new file mode 100644 index 0000000..61d33ed --- /dev/null +++ b/test.html @@ -0,0 +1,12 @@ + + + + + Unslider test + + +
      + +
    + + \ No newline at end of file diff --git a/unslider.css b/unslider.css deleted file mode 100644 index a922b64..0000000 --- a/unslider.css +++ /dev/null @@ -1,3 +0,0 @@ -.unslider { overflow: hidden; } - .unslider ul { position: relative; list-style: none; } - .unslider li { float: left; } \ No newline at end of file diff --git a/unslider.js b/unslider.js index d7f285c..c35ac24 100644 --- a/unslider.js +++ b/unslider.js @@ -32,7 +32,12 @@ // Pass a jQuery element as the context with .call(), and the index as a parameter: Unslider.calculate.call($('li:first'), 0) calculate: function(index) { // Add it to the sizes list - Unslider.sizes[index] = [this.outerWidth(), this.outerheight()]; + Unslider.sizes[index] = [this.outerWidth(), this.outerHeight()]; + }, + + // Move Unslider to a slide index + move: function(index) { + this.el.is(':animated') || this.el.animate({left: '-' + index + '%'}); } }; From c9dda4684afc712de44b2eab2dd11535e7859e6b Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Fri, 1 Feb 2013 19:17:31 +0000 Subject: [PATCH 026/109] got it working but the slides aren't working separately wtf --- test.html | 52 ++++++++++++++++++++++++- unslider.js | 107 ++++++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 137 insertions(+), 22 deletions(-) diff --git a/test.html b/test.html index 61d33ed..f108bd5 100644 --- a/test.html +++ b/test.html @@ -3,10 +3,58 @@ Unslider test + + -
      +
      +
        +
      • slide 1
        • +
      • slide 2
        taller one
        • +
      • slide 3
        • +
      • slide 4
        • +
      • slide 5
        • +
      +
      + +
      +
        +
      • slide a
        • +
      • slide b
        • +
      • slide c
        • +
      • slide d
        • +
      • slide e
        • +
      +
      -
    + + + \ No newline at end of file diff --git a/unslider.js b/unslider.js index c35ac24..a11ce36 100644 --- a/unslider.js +++ b/unslider.js @@ -6,50 +6,117 @@ // If there's no jQuery, Unslider can't work, so kill the operation. if(!$) return f; - var Unslider = { - // Set up the elements - el: f, - items: f, - sizes: [], + var Unslider = function() { + // Set up our elements + this.el = f; + this.items = f; - // Default options - opts: ['auto', 'keys', 'arrows', 'thumbs'], + this.sizes = []; + this.max = [0,0]; - // Set up Unslider's element - init: function(el, opts) { + this.current = 0; + + this.interval = false; + + // Set some options + this.opts = { + speed: 500, + delay: 3000, // false for no autoplay + complete: false // when a slide's finished + }; + + // Create a deep clone for methods where context changes + var _ = this; + + this.init = function(el, opts) { this.el = el; + this.ul = el.children('ul'); + this.max = [el.outerWidth(), el.outerHeight()]; this.items = el.find('li').each(this.calculate); // Check whether we're passing any options in to Unslider - if(opts && $.isArray(opts)) { - this.opts = opts; + if(opts) { + this.opts = $.extend(opts); } + // Set up the Unslider + this.setup(); + return this; - }, + }; // Get the width for an element // Pass a jQuery element as the context with .call(), and the index as a parameter: Unslider.calculate.call($('li:first'), 0) - calculate: function(index) { + this.calculate = function(index) { + var me = $(this), + width = me.outerWidth(), height = me.outerHeight(); + // Add it to the sizes list - Unslider.sizes[index] = [this.outerWidth(), this.outerHeight()]; - }, + _.sizes[index] = [width, height]; + + // Set the max values + if(width > _.max[0]) _.max[0] = width; + if(height > _.max[1]) _.max[1] = height; + }; + + // Work out what methods need calling + this.setup = function() { + // Set the main element + this.el.css({ + overflow: 'hidden', + width: _.max[0], + height: 'auto' + }); + + // Set the relative widths + this.ul.css({width: (this.items.length * 100) + '%', position: 'relative'}); + this.items.css('width', (100 / this.items.length) + '%'); + + this.move(this.current, true); + + if(this.opts.delay !== false) { + this.start(); + } + }; // Move Unslider to a slide index - move: function(index) { - this.el.is(':animated') || this.el.animate({left: '-' + index + '%'}); - } + this.move = function(index, cb) { + // If it's out of bounds, go to the first slide + if(!this.items.eq(index).length) { + index = 0; + } + + var target = this.items.eq(index); + var obj = {height: target.outerHeight()}; + + if(!this.ul.is(':animated')) { + this.el.animate(obj) && this.ul.animate($.extend({left: '-' + index + '00%'}, obj), function(data) { + _.current = index; + $.isFunction(_.opts.complete) && !cb && _.opts.complete(_.el); + }); + } + }; + + this.start = function() { + this.interval = setInterval(function() { + _.move(_.current + 1); + }, this.opts.delay); + }; }; // Create a jQuery plugin $.fn.unslider = function(o) { + var len = this.length; + // Enable multiple-slider support - return this.each(function() { + return this.each(function(index) { // Cache a copy of $(this), so it var me = $(this); + console.log(me, index + 1); + // Invoke an Unslider instance - me.data('unslider', new Unslider(me, o)); + me.data('unslider' + (len > 1 ? '-' + (index + 1) : ''), (new Unslider).init(me, o)); }); }; })(window.jQuery, false); \ No newline at end of file From 37cc62733e6d435e98696d286c25413e8c6d4d9e Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Fri, 1 Feb 2013 19:20:15 +0000 Subject: [PATCH 027/109] there we go multiple slides bitch --- test.html | 13 ++++++++----- unslider.js | 14 ++++++++++---- 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/test.html b/test.html index f108bd5..c33de7a 100644 --- a/test.html +++ b/test.html @@ -11,7 +11,7 @@ font: 13px "Helvetica Neue", sans-serif; } - .unslider-test { + .unslider { width: 700px; height: 150px; margin: 40px auto; @@ -20,16 +20,16 @@ background: #0f0; } - .unslider-test ul { + .unslider ul { list-style: none; } - .unslider-test li { + .unslider li { float: left; } -
    +
    • slide 1
    • slide 2
      taller one
      • @@ -39,7 +39,7 @@
    -
    +
    • slide a
    • slide b
      • @@ -54,6 +54,9 @@ diff --git a/unslider.js b/unslider.js index a11ce36..dc9c2b6 100644 --- a/unslider.js +++ b/unslider.js @@ -22,7 +22,8 @@ this.opts = { speed: 500, delay: 3000, // false for no autoplay - complete: false // when a slide's finished + complete: false, // when a slide's finished + keys: true }; // Create a deep clone for methods where context changes @@ -97,11 +98,17 @@ } }; + // Autoplay functionality this.start = function() { this.interval = setInterval(function() { _.move(_.current + 1); }, this.opts.delay); }; + + // Stop autoplay + this.stop = function() { + this.interval = clearInterval(this.interval); + }; }; // Create a jQuery plugin @@ -112,11 +119,10 @@ return this.each(function(index) { // Cache a copy of $(this), so it var me = $(this); - - console.log(me, index + 1); + var instance = (new Unslider).init(me, o); // Invoke an Unslider instance - me.data('unslider' + (len > 1 ? '-' + (index + 1) : ''), (new Unslider).init(me, o)); + me.data('unslider' + (len > 1 ? '-' + (index + 1) : ''), instance); }); }; })(window.jQuery, false); \ No newline at end of file From fa09f8f3dca573e36f9fa1285d4c0a88f8b14f0c Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Fri, 1 Feb 2013 19:22:17 +0000 Subject: [PATCH 028/109] and it works with responsive, i fucking rule --- test.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/test.html b/test.html index c33de7a..a128b19 100644 --- a/test.html +++ b/test.html @@ -26,6 +26,13 @@ .unslider li { float: left; } + + @media screen and (max-width: 800px) { + .unslider { + width: 80% !important; + background: #f0f; + } + } From dbe7a2eda8fc91a526433670f54523bbb2881258 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Fri, 1 Feb 2013 19:30:13 +0000 Subject: [PATCH 029/109] autostopstartbitch --- unslider.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/unslider.js b/unslider.js index dc9c2b6..6f97830 100644 --- a/unslider.js +++ b/unslider.js @@ -77,6 +77,7 @@ if(this.opts.delay !== false) { this.start(); + this.el.hover(this.stop, this.start); } }; @@ -100,14 +101,15 @@ // Autoplay functionality this.start = function() { - this.interval = setInterval(function() { + _.interval = setInterval(function() { _.move(_.current + 1); - }, this.opts.delay); + }, _.opts.delay); }; // Stop autoplay this.stop = function() { - this.interval = clearInterval(this.interval); + console.log('plz no moar'); + _.interval = clearInterval(_.interval); }; }; From 4527356bcbf9d1d719fc5021a2a39fd0310daf76 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Fri, 1 Feb 2013 19:30:24 +0000 Subject: [PATCH 030/109] whostolemyspacebar --- unslider.js | 1 - 1 file changed, 1 deletion(-) diff --git a/unslider.js b/unslider.js index 6f97830..6e96de3 100644 --- a/unslider.js +++ b/unslider.js @@ -108,7 +108,6 @@ // Stop autoplay this.stop = function() { - console.log('plz no moar'); _.interval = clearInterval(_.interval); }; }; From 329008656a19241c76dc6ccc0373515c7c6fe9ed Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Fri, 1 Feb 2013 19:52:30 +0000 Subject: [PATCH 031/109] works with padding as long as you have border-box on --- test.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/test.html b/test.html index a128b19..fb98fe7 100644 --- a/test.html +++ b/test.html @@ -19,12 +19,16 @@ overflow: auto; background: #0f0; + border-radius: 5px; } .unslider ul { list-style: none; } .unslider li { float: left; + padding: 20px 25px; + + -webkit-box-sizing: border-box; } @media screen and (max-width: 800px) { From d5191554cc806183642c3d29738fd321243ecb3d Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Fri, 1 Feb 2013 19:57:58 +0000 Subject: [PATCH 032/109] keyboard support --- unslider.js | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/unslider.js b/unslider.js index 6e96de3..e7a2a72 100644 --- a/unslider.js +++ b/unslider.js @@ -79,12 +79,16 @@ this.start(); this.el.hover(this.stop, this.start); } + + if(this.opts.keys) { + $(document).keydown(this.keys); + } }; // Move Unslider to a slide index this.move = function(index, cb) { // If it's out of bounds, go to the first slide - if(!this.items.eq(index).length) { + if(!this.items.eq(index).length || index < 0) { index = 0; } @@ -109,6 +113,26 @@ // Stop autoplay this.stop = function() { _.interval = clearInterval(_.interval); + return _; + }; + + // Keypresses + this.keys = function(e) { + var key = e.which; + var map = { + // Prev/next + 37: function() { _.stop().move(_.current - 1) }, + 39: function() { _.stop().move(_.current + 1) }, + + // Esc + 27: _.stop + }; + + console.log(map[key]); + + if($.isFunction(map[key])) { + map[key](); + } }; }; From 7c5efa7f30ba7e424994ba198802a769219bb98d Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Fri, 1 Feb 2013 20:15:41 +0000 Subject: [PATCH 033/109] so lets get percentage widths working on the container eh? --- test.html | 36 ++++++++++++++++++++++++++++++------ unslider.js | 30 +++++++++++++++++++++++------- 2 files changed, 53 insertions(+), 13 deletions(-) diff --git a/test.html b/test.html index fb98fe7..14396e0 100644 --- a/test.html +++ b/test.html @@ -12,7 +12,8 @@ font: 13px "Helvetica Neue", sans-serif; } .unslider { - width: 700px; + position: relative; + width: 100%; height: 150px; margin: 40px auto; @@ -24,12 +25,35 @@ .unslider ul { list-style: none; } - .unslider li { - float: left; - padding: 20px 25px; - - -webkit-box-sizing: border-box; + .unslider ul li { + float: left; + padding: 20px 25px; + + -webkit-box-sizing: border-box; + } + .unslider.has-dots { + padding-bottom: 40px; } + .unslider ol.unslider-dots { + position: absolute; + left: 0; + right: 0; + text-align: center; + } + .unslider ol li { + position: relative; + top: 0; + display: inline-block; + height: 40px; + width: 20px; + padding: 0 15px; + + line-height: 40px; + color: #666; + } + .unslider ol li.active { + color: #fff; + } @media screen and (max-width: 800px) { .unslider { diff --git a/unslider.js b/unslider.js index e7a2a72..27f163e 100644 --- a/unslider.js +++ b/unslider.js @@ -23,7 +23,8 @@ speed: 500, delay: 3000, // false for no autoplay complete: false, // when a slide's finished - keys: true + keys: true, + dots: true }; // Create a deep clone for methods where context changes @@ -33,7 +34,7 @@ this.el = el; this.ul = el.children('ul'); this.max = [el.outerWidth(), el.outerHeight()]; - this.items = el.find('li').each(this.calculate); + this.items = this.ul.children('li').each(this.calculate); // Check whether we're passing any options in to Unslider if(opts) { @@ -80,9 +81,11 @@ this.el.hover(this.stop, this.start); } - if(this.opts.keys) { - $(document).keydown(this.keys); - } + // Custom keyboard support + this.opts.keys && $(document).keydown(this.keys); + + // Dot pagination + this.opts.dots && this.dots(); }; // Move Unslider to a slide index @@ -101,6 +104,9 @@ $.isFunction(_.opts.complete) && !cb && _.opts.complete(_.el); }); } + + // Handle those pesky dots + this.el.find('.unslider-dot:eq(' + index + ')').addClass('active').siblings().removeClass('active'); }; // Autoplay functionality @@ -128,12 +134,22 @@ 27: _.stop }; - console.log(map[key]); - if($.isFunction(map[key])) { map[key](); } }; + + this.dots = function() { + // Create the HTML + var html = '
        '; + $.each(this.items, function(index) { html += '
      1. ' + index + '
        2. '; }); + html += '
      '; + + // Add it to the Unslider + this.el.addClass('has-dots').append(html).find('.unslider-dot').click(function() { + _.move($(this).index()); + }); + }; }; // Create a jQuery plugin From 112e08c9896f298470e6fadc3014b3b540661d7b Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Fri, 1 Feb 2013 20:25:53 +0000 Subject: [PATCH 034/109] I AM THE GREETEST --- unslider.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/unslider.js b/unslider.js index 27f163e..94a3d2a 100644 --- a/unslider.js +++ b/unslider.js @@ -23,8 +23,10 @@ speed: 500, delay: 3000, // false for no autoplay complete: false, // when a slide's finished - keys: true, - dots: true + keys: true, // keyboard shortcuts - disable if it breaks things + dots: false, // display ••••o• pagination + + fluid: false // is it a percentage width? }; // Create a deep clone for methods where context changes @@ -86,6 +88,11 @@ // Dot pagination this.opts.dots && this.dots(); + + // Little patch for fluid-width sliders. Screw those guys. + this.opts.fluid && $(window).resize(function() { + _.el.css('width', (_.el.outerWidth() / _.el.parent().outerWidth()) * 100 + '%'); + }); }; // Move Unslider to a slide index From e467e1274459521f86e6ff8194d2067931652265 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Fri, 1 Feb 2013 22:46:46 +0000 Subject: [PATCH 035/109] TO INFINITY AND BEYOND --- test.html | 2 +- unslider.js | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/test.html b/test.html index 14396e0..44bd67d 100644 --- a/test.html +++ b/test.html @@ -13,7 +13,7 @@ } .unslider { position: relative; - width: 100%; + width: 700px; height: 150px; margin: 40px auto; diff --git a/unslider.js b/unslider.js index 94a3d2a..1f03dc3 100644 --- a/unslider.js +++ b/unslider.js @@ -98,9 +98,8 @@ // Move Unslider to a slide index this.move = function(index, cb) { // If it's out of bounds, go to the first slide - if(!this.items.eq(index).length || index < 0) { - index = 0; - } + if(!this.items.eq(index).length) index = 0; + if(index < 0) index = (this.items.length - 1); var target = this.items.eq(index); var obj = {height: target.outerHeight()}; From d6e20512471dc34ea67ae38c0f705c4b815b9d43 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Fri, 1 Feb 2013 23:06:42 +0000 Subject: [PATCH 036/109] fixin stuff --- test.html | 1 - unslider.js | 27 ++++++++++++++------------- unslider.min.js | 2 ++ 3 files changed, 16 insertions(+), 14 deletions(-) create mode 100644 unslider.min.js diff --git a/test.html b/test.html index 44bd67d..ef81750 100644 --- a/test.html +++ b/test.html @@ -14,7 +14,6 @@ .unslider { position: relative; width: 700px; - height: 150px; margin: 40px auto; overflow: auto; diff --git a/unslider.js b/unslider.js index 1f03dc3..b3f25b5 100644 --- a/unslider.js +++ b/unslider.js @@ -11,22 +11,24 @@ this.el = f; this.items = f; + // Dimensions this.sizes = []; this.max = [0,0]; + // Current inded this.current = 0; - this.interval = false; + // Start/stop timer + this.interval = f; // Set some options this.opts = { speed: 500, - delay: 3000, // false for no autoplay - complete: false, // when a slide's finished - keys: true, // keyboard shortcuts - disable if it breaks things - dots: false, // display ••••o• pagination - - fluid: false // is it a percentage width? + delay: 3000, // f for no autoplay + complete: f, // when a slide's finished + keys: !f, // keyboard shortcuts - disable if it breaks things + dots: f, // display ••••o• pagination + fluid: f // is it a percentage width? }; // Create a deep clone for methods where context changes @@ -40,7 +42,7 @@ // Check whether we're passing any options in to Unslider if(opts) { - this.opts = $.extend(opts); + this.opts = $.extend(this.opts, opts); } // Set up the Unslider @@ -69,16 +71,14 @@ this.el.css({ overflow: 'hidden', width: _.max[0], - height: 'auto' + height: this.items.first().outerHeight() }); // Set the relative widths this.ul.css({width: (this.items.length * 100) + '%', position: 'relative'}); this.items.css('width', (100 / this.items.length) + '%'); - this.move(this.current, true); - - if(this.opts.delay !== false) { + if(this.opts.delay !== f) { this.start(); this.el.hover(this.stop, this.start); } @@ -103,9 +103,10 @@ var target = this.items.eq(index); var obj = {height: target.outerHeight()}; + var speed = cb ? 5 : this.opts.speed; if(!this.ul.is(':animated')) { - this.el.animate(obj) && this.ul.animate($.extend({left: '-' + index + '00%'}, obj), function(data) { + this.el.animate(obj, speed) && this.ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, function(data) { _.current = index; $.isFunction(_.opts.complete) && !cb && _.opts.complete(_.el); }); diff --git a/unslider.min.js b/unslider.min.js new file mode 100644 index 0000000..e0d44df --- /dev/null +++ b/unslider.min.js @@ -0,0 +1,2 @@ +/*unslider.com*/ +(function(e,t){if(!e)return t;var n=function(){this.el=t;this.items=t;this.sizes=[];this.max=[0,0];this.current=0;this.interval=t;this.opts={speed:500,delay:3e3,complete:t,keys:!t,dots:t,fluid:t};var n=this;this.init=function(t,n){this.el=t;this.ul=t.children("ul");this.max=[t.outerWidth(),t.outerHeight()];this.items=this.ul.children("li").each(this.calculate);if(n){this.opts=e.extend(this.opts,n)}this.setup();return this};this.calculate=function(t){var r=e(this),i=r.outerWidth(),s=r.outerHeight();n.sizes[t]=[i,s];if(i>n.max[0])n.max[0]=i;if(s>n.max[1])n.max[1]=s};this.setup=function(){this.el.css({overflow:"hidden",width:n.max[0],height:this.items.first().outerHeight()});this.ul.css({width:this.items.length*100+"%",position:"relative"});this.items.css("width",100/this.items.length+"%");if(this.opts.delay!==t){this.start();this.el.hover(this.stop,this.start)}this.opts.keys&&e(document).keydown(this.keys);this.opts.dots&&this.dots();this.opts.fluid&&e(window).resize(function(){n.el.css("width",n.el.outerWidth()/n.el.parent().outerWidth()*100+"%")})};this.move=function(t,r){if(!this.items.eq(t).length)t=0;if(t<0)t=this.items.length-1;var i=this.items.eq(t);var s={height:i.outerHeight()};var o=r?5:this.opts.speed;if(!this.ul.is(":animated")){this.el.animate(s,o)&&this.ul.animate(e.extend({left:"-"+t+"00%"},s),o,function(i){n.current=t;e.isFunction(n.opts.complete)&&!r&&n.opts.complete(n.el)})}this.el.find(".unslider-dot:eq("+t+")").addClass("active").siblings().removeClass("active")};this.start=function(){n.interval=setInterval(function(){n.move(n.current+1)},n.opts.delay)};this.stop=function(){n.interval=clearInterval(n.interval);return n};this.keys=function(t){var r=t.which;var i={37:function(){n.stop().move(n.current-1)},39:function(){n.stop().move(n.current+1)},27:n.stop};if(e.isFunction(i[r])){i[r]()}};this.dots=function(){var t='
        ';e.each(this.items,function(e){t+='
      1. '+e+"
        2. "});t+="
      ";this.el.addClass("has-dots").append(t).find(".unslider-dot").click(function(){n.move(e(this).index())})}};e.fn.unslider=function(t){var r=this.length;return this.each(function(i){var s=e(this);var u=(new n).init(s,t);s.data("unslider"+(r>1?"-"+(i+1):""),u)})}})(window.jQuery,false) \ No newline at end of file From dc06952edc202586ad1f18d1d5caced482bdfa3f Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Fri, 1 Feb 2013 23:45:23 +0000 Subject: [PATCH 037/109] added arrows --- test.html | 3 ++- unslider.js | 26 +++++++++++++++++++------- 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/test.html b/test.html index ef81750..446fa2b 100644 --- a/test.html +++ b/test.html @@ -89,7 +89,8 @@ $(function() { $('.unslider-test').unslider(); $('.unslider-testing').unslider({ - delay: 1500 + delay: 1500, + arrows: false }); }); diff --git a/unslider.js b/unslider.js index b3f25b5..4208e78 100644 --- a/unslider.js +++ b/unslider.js @@ -28,7 +28,8 @@ complete: f, // when a slide's finished keys: !f, // keyboard shortcuts - disable if it breaks things dots: f, // display ••••o• pagination - fluid: f // is it a percentage width? + fluid: f, // is it a percentage width?, + arrows: !f }; // Create a deep clone for methods where context changes @@ -93,6 +94,13 @@ this.opts.fluid && $(window).resize(function() { _.el.css('width', (_.el.outerWidth() / _.el.parent().outerWidth()) * 100 + '%'); }); + + if(this.opts.arrows) { + this.el.parent().append('

      ←→

      ') + .find('.arrows span').click(function() { + $.isFunction(_[this.className]) && _[this.className](); + }); + }; }; // Move Unslider to a slide index @@ -113,7 +121,7 @@ } // Handle those pesky dots - this.el.find('.unslider-dot:eq(' + index + ')').addClass('active').siblings().removeClass('active'); + this.el.find('.dot:eq(' + index + ')').addClass('active').siblings().removeClass('active'); }; // Autoplay functionality @@ -134,8 +142,8 @@ var key = e.which; var map = { // Prev/next - 37: function() { _.stop().move(_.current - 1) }, - 39: function() { _.stop().move(_.current + 1) }, + 37: _.prev, + 39: _.next, // Esc 27: _.stop @@ -146,14 +154,18 @@ } }; + // Arrow navigation + this.next = function() { return this.stop().move(_.current + 1) }; + this.prev = function() { return this.stop().move(_.current - 1) }; + this.dots = function() { // Create the HTML - var html = '
        '; - $.each(this.items, function(index) { html += '
      1. ' + index + '
        2. '; }); + var html = '
          '; + $.each(this.items, function(index) { html += '
        1. ' + index + '
          2. '; }); html += '
        '; // Add it to the Unslider - this.el.addClass('has-dots').append(html).find('.unslider-dot').click(function() { + this.el.addClass('has-dots').append(html).find('.dot').click(function() { _.move($(this).index()); }); }; From f6b7d92593f57931ebff2e772d266803d613c5c2 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Sat, 2 Feb 2013 12:50:50 +0000 Subject: [PATCH 038/109] there we go --- unslider.js | 2 +- unslider.min.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/unslider.js b/unslider.js index 4208e78..432a9fa 100644 --- a/unslider.js +++ b/unslider.js @@ -29,7 +29,7 @@ keys: !f, // keyboard shortcuts - disable if it breaks things dots: f, // display ••••o• pagination fluid: f, // is it a percentage width?, - arrows: !f + arrows: f }; // Create a deep clone for methods where context changes diff --git a/unslider.min.js b/unslider.min.js index e0d44df..9db90d5 100644 --- a/unslider.min.js +++ b/unslider.min.js @@ -1,2 +1,2 @@ /*unslider.com*/ -(function(e,t){if(!e)return t;var n=function(){this.el=t;this.items=t;this.sizes=[];this.max=[0,0];this.current=0;this.interval=t;this.opts={speed:500,delay:3e3,complete:t,keys:!t,dots:t,fluid:t};var n=this;this.init=function(t,n){this.el=t;this.ul=t.children("ul");this.max=[t.outerWidth(),t.outerHeight()];this.items=this.ul.children("li").each(this.calculate);if(n){this.opts=e.extend(this.opts,n)}this.setup();return this};this.calculate=function(t){var r=e(this),i=r.outerWidth(),s=r.outerHeight();n.sizes[t]=[i,s];if(i>n.max[0])n.max[0]=i;if(s>n.max[1])n.max[1]=s};this.setup=function(){this.el.css({overflow:"hidden",width:n.max[0],height:this.items.first().outerHeight()});this.ul.css({width:this.items.length*100+"%",position:"relative"});this.items.css("width",100/this.items.length+"%");if(this.opts.delay!==t){this.start();this.el.hover(this.stop,this.start)}this.opts.keys&&e(document).keydown(this.keys);this.opts.dots&&this.dots();this.opts.fluid&&e(window).resize(function(){n.el.css("width",n.el.outerWidth()/n.el.parent().outerWidth()*100+"%")})};this.move=function(t,r){if(!this.items.eq(t).length)t=0;if(t<0)t=this.items.length-1;var i=this.items.eq(t);var s={height:i.outerHeight()};var o=r?5:this.opts.speed;if(!this.ul.is(":animated")){this.el.animate(s,o)&&this.ul.animate(e.extend({left:"-"+t+"00%"},s),o,function(i){n.current=t;e.isFunction(n.opts.complete)&&!r&&n.opts.complete(n.el)})}this.el.find(".unslider-dot:eq("+t+")").addClass("active").siblings().removeClass("active")};this.start=function(){n.interval=setInterval(function(){n.move(n.current+1)},n.opts.delay)};this.stop=function(){n.interval=clearInterval(n.interval);return n};this.keys=function(t){var r=t.which;var i={37:function(){n.stop().move(n.current-1)},39:function(){n.stop().move(n.current+1)},27:n.stop};if(e.isFunction(i[r])){i[r]()}};this.dots=function(){var t='
          ';e.each(this.items,function(e){t+='
        1. '+e+"
          2. "});t+="
        ";this.el.addClass("has-dots").append(t).find(".unslider-dot").click(function(){n.move(e(this).index())})}};e.fn.unslider=function(t){var r=this.length;return this.each(function(i){var s=e(this);var u=(new n).init(s,t);s.data("unslider"+(r>1?"-"+(i+1):""),u)})}})(window.jQuery,false) \ No newline at end of file +(function(e,t){if(!e)return t;var n=function(){this.el=t;this.items=t;this.sizes=[];this.max=[0,0];this.current=0;this.interval=t;this.opts={speed:500,delay:3e3,complete:t,keys:!t,dots:t,fluid:t,arrows:t};var n=this;this.init=function(t,n){this.el=t;this.ul=t.children("ul");this.max=[t.outerWidth(),t.outerHeight()];this.items=this.ul.children("li").each(this.calculate);if(n){this.opts=e.extend(this.opts,n)}this.setup();return this};this.calculate=function(t){var r=e(this),i=r.outerWidth(),s=r.outerHeight();n.sizes[t]=[i,s];if(i>n.max[0])n.max[0]=i;if(s>n.max[1])n.max[1]=s};this.setup=function(){this.el.css({overflow:"hidden",width:n.max[0],height:this.items.first().outerHeight()});this.ul.css({width:this.items.length*100+"%",position:"relative"});this.items.css("width",100/this.items.length+"%");if(this.opts.delay!==t){this.start();this.el.hover(this.stop,this.start)}this.opts.keys&&e(document).keydown(this.keys);this.opts.dots&&this.dots();this.opts.fluid&&e(window).resize(function(){n.el.css("width",n.el.outerWidth()/n.el.parent().outerWidth()*100+"%")});if(this.opts.arrows){this.el.parent().append('

        ←→

        ').find(".arrows span").click(function(){e.isFunction(n[this.className])&&n[this.className]()})}};this.move=function(t,r){if(!this.items.eq(t).length)t=0;if(t<0)t=this.items.length-1;var i=this.items.eq(t);var s={height:i.outerHeight()};var o=r?5:this.opts.speed;if(!this.ul.is(":animated")){this.el.animate(s,o)&&this.ul.animate(e.extend({left:"-"+t+"00%"},s),o,function(i){n.current=t;e.isFunction(n.opts.complete)&&!r&&n.opts.complete(n.el)})}this.el.find(".dot:eq("+t+")").addClass("active").siblings().removeClass("active")};this.start=function(){n.interval=setInterval(function(){n.move(n.current+1)},n.opts.delay)};this.stop=function(){n.interval=clearInterval(n.interval);return n};this.keys=function(t){var r=t.which;var i={37:n.prev,39:n.next,27:n.stop};if(e.isFunction(i[r])){i[r]()}};this.next=function(){return this.stop().move(n.current+1)};this.prev=function(){return this.stop().move(n.current-1)};this.dots=function(){var t='
          ';e.each(this.items,function(e){t+='
        1. '+e+"
          2. "});t+="
        ";this.el.addClass("has-dots").append(t).find(".dot").click(function(){n.move(e(this).index())})}};e.fn.unslider=function(t){var r=this.length;return this.each(function(i){var s=e(this);var u=(new n).init(s,t);s.data("unslider"+(r>1?"-"+(i+1):""),u)})}})(window.jQuery,!1) \ No newline at end of file From a6c7a3796c453472e2b68fcc1035e161b8730930 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Sat, 2 Feb 2013 15:30:59 +0000 Subject: [PATCH 039/109] /packer/ compresses better --- unslider.pack.js | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 unslider.pack.js diff --git a/unslider.pack.js b/unslider.pack.js new file mode 100644 index 0000000..ccaed6c --- /dev/null +++ b/unslider.pack.js @@ -0,0 +1,2 @@ +/*unslider.com*/ +eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(4($,f){h(!$)m f;6 g=4(){2.8=f;2.9=f;2.Q=[];2.j=[0,0];2.r=0;2.A=f;2.7={W:19,C:16,D:f,z:!f,l:f,O:f,y:f};6 3=2;2.R=4(a,b){2.8=a;2.k=a.P(\'k\');2.j=[a.B(),a.x()];2.9=2.k.P(\'L\').N(2.U);h(b){2.7=$.V(2.7,b)}2.15();m 2};2.U=4(a){6 b=$(2),i=b.B(),n=b.x();3.Q[a]=[i,n];h(i>3.j[0])3.j[0]=i;h(n>3.j[1])3.j[1]=n};2.15=4(){2.8.w({1c:\'1f\',i:3.j[0],n:2.9.1q().x()});2.k.w({i:(2.9.u*I)+\'%\',17:\'18\'});2.9.w(\'i\',(I/2.9.u)+\'%\');h(2.7.C!==f){2.J();2.8.1z(2.t,2.J)}2.7.z&&$(1g).1h(2.z);2.7.l&&2.l();2.7.O&&$(X).1u(4(){3.8.w(\'i\',(3.8.B()/3.8.Y().B())*I+\'%\')});h(2.7.y){2.8.Y().10(\'

        ←→

        \').G(\'.y s\').S(4(){$.H(3[2.T])&&3[2.T]()})}};2.q=4(b,c){h(!2.9.K(b).u)b=0;h(b<0)b=(2.9.u-1);6 d=2.9.K(b);6 e={n:d.x()};6 f=c?5:2.7.W;h(!2.k.1a(\':1b\')){2.8.Z(e,f)&&2.k.Z($.V({1d:\'-\'+b+\'1e%\'},e),f,4(a){3.r=b;$.H(3.7.D)&&!c&&3.7.D(3.8)})}2.8.G(\'.M:K(\'+b+\')\').11(\'12\').1i().1j(\'12\')};2.J=4(){3.A=1k(4(){3.q(3.r+1)},3.7.C)};2.t=4(){3.A=1l(3.A);m 3};2.z=4(e){6 a=e.1m;6 b={1n:3.E,1o:3.F,1p:3.t};h($.H(b[a])){b[a]()}};2.F=4(){m 2.t().q(3.r+1)};2.E=4(){m 2.t().q(3.r-1)};2.l=4(){6 b=\'<13 v="l">\';$.N(2.9,4(a){b+=\'\'+a+\'\'});b+=\'\';2.8.11(\'1r-l\').10(b).G(\'.M\').S(4(){3.q($(2).1s())})}};$.1t.14=4(o){6 d=2.u;m 2.N(4(a){6 b=$(2);6 c=(1w g).R(b,o);b.1x(\'14\'+(d>1?\'-\'+(a+1):\'\'),c)})}})(X.1y,1v);',62,98,'||this|_|function||var|opts|el|items||||||||if|width|max|ul|dots|return|height|||move|current|span|stop|length|class|css|outerHeight|arrows|keys|interval|outerWidth|delay|complete|prev|next|find|isFunction|100|start|eq|li|dot|each|fluid|children|sizes|init|click|className|calculate|extend|speed|window|parent|animate|append|addClass|active|ol|unslider|setup|3000|position|relative|500|is|animated|overflow|left|00|hidden|document|keydown|siblings|removeClass|setInterval|clearInterval|which|37|39|27|first|has|index|fn|resize|false|new|data|jQuery|hover'.split('|'),0,{})) \ No newline at end of file From 39dfe94d41768c675dd0dfe22c752a08ce119bf6 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Mon, 4 Feb 2013 10:06:31 +0000 Subject: [PATCH 040/109] fucking zepto, being all not jquery and shit --- test.html | 4 +- unslider.zepto.js | 186 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 188 insertions(+), 2 deletions(-) create mode 100644 unslider.zepto.js diff --git a/test.html b/test.html index 446fa2b..0adb31e 100644 --- a/test.html +++ b/test.html @@ -83,8 +83,8 @@
    - - + + + + + + \ No newline at end of file diff --git a/site/style.css b/site/style.css new file mode 100644 index 0000000..717759c --- /dev/null +++ b/site/style.css @@ -0,0 +1,104 @@ +* { + margin: 0; + padding: 0; + + -webkit-font-smoothing: antialiased; + + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +body { + color: #a48d66; + font: 14px/23px proxima-nova-alt, "Proxima Nova Alt", sans-serif; +} + +h1, h2, h3, h4 { + font-weight: 300; + font-family: bree-web, Bree, sans-serif; +} + +#logo { + position: absolute; + left: 80px; + top: 40px; + z-index: 2; + + margin-left: -17px; +} + +.banner { + position: relative; + width: 100%; + overflow: auto; + + font-size: 18px; + line-height: 24px; + text-align: center; + + color: rgba(255,255,255,.6); + text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3); + + background: #5b4d3d; + box-shadow: 0 1px 2px rgba(0,0,0,.25); +} + .banner ul { + list-style: none; + width: 300%; + } + .banner li { + display: block; + float: left; + width: 33%; + padding: 160px 0 110px; + + min-height: 350px; + + -webkit-background-size: 100% 100%; + -moz-background-size: 100% 100%; + -o-background-size: 100% 100%; + -ms-background-size: 100% 100%; + background-size: 100% 100%; + + box-shadow: inset 0 -3px 6px rgba(0,0,0,.1); + } + + .banner h1, .banner h2 { + font-size: 40px; + line-height: 52px; + + color: #fff; + } + + .banner .btn { + display: inline-block; + margin: 25px 0 0; + padding: 9px 22px 7px; + clear: both; + + color: #fff; + font-size: 12px; + font-weight: bold; + text-transform: uppercase; + text-decoration: none; + + border: 2px solid rgba(255,255,255,.4); + border-radius: 5px; + + -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); + -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); + -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); + -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); + filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); + } + .banner .btn:hover { + background: rgba(255,255,255,.05); + } + .banner .btn:active { + -webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); + -moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); + -ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); + -o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); + filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); + } \ No newline at end of file diff --git a/site/untitled.txt b/site/untitled.txt deleted file mode 100644 index e69de29..0000000 diff --git a/unslider.js b/unslider.js index f4097ea..7df4838 100755 --- a/unslider.js +++ b/unslider.js @@ -152,8 +152,8 @@ }; // Arrow navigation - this.next = function() { return this.stop().move(_.current + 1) }; - this.prev = function() { return this.stop().move(_.current - 1) }; + this.next = function() { return _.stop().move(_.current + 1) }; + this.prev = function() { return _.stop().move(_.current - 1) }; this.dots = function() { // Create the HTML From 33c672b902f71af4bcdb30a8828e0ef5b9ab58b8 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Tue, 12 Mar 2013 00:47:22 +0000 Subject: [PATCH 043/109] added mobile support --- site/index.html | 4 +++- unslider.js | 7 ++++++- unslider.min.js | 2 -- unslider.pack.js | 2 -- 4 files changed, 9 insertions(+), 6 deletions(-) delete mode 100755 unslider.min.js delete mode 100755 unslider.pack.js diff --git a/site/index.html b/site/index.html index 47f4c86..7752cb8 100644 --- a/site/index.html +++ b/site/index.html @@ -249,7 +249,9 @@

    The jQuery slider that just slides.

    + @@ -15,242 +18,139 @@

    The jQuery slider that just slides.

    No fancy effects or unneccessary markup, and it’s less than 3kb.

    - Download + Download
  • -

    The jQuery slider that just slides.

    -

    No fancy effects or unneccessary markup, and it’s less than 3kb.

    +

    Fluid, flexible, fantastically minimal.

    +

    Use any HTML in your slides, extend with CSS. You have full control.

    - Download + Download
    • -
  • - unslider slide 3 +
  • +

    Open-source.

    +

    Everything to do with Unslider is hosted on GitHub.

    + + Contribute +
    • + +
  • +

    Uh, that’s about it.

    +

    I just wanted to show you another slide.

    + + Download +
    • +
+ + +
+
    +
  • + Cross-browser happy +

    Unslider’s been tested in all the latest browsers, and it falls back magnificently for the not-so-latest ones.

    +
    • + +
  • + Keyboard support +

    If you want to, you can add keyboard arrow support. Try it: hit left and right arrow keys.

    +
    • + +
  • + Adjusts for height +

    Not all slides are created equal, and Unslider knows it. It’ll stylishly transition heights with no extra code.

    +
    • + +
  • + Yep, it’s responsive +

    You’ll be hard pressed to find a site that’s not responsive these days. Unslider’s got your back.

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+

How to use Unslider

+ +
    +
  1. +
    +

    Include jQuery and Unslider

    +

    To use Unslider, you’ll need to make sure both the Unslider and jQuery scripts are included. If you’ve already got jQuery (you can test by opening your JavaScript console and typing !!window.jQuery — if it says true, you have jQuery), you don’t need to add the first line.

    +
    + + 
    <script src="//code.jquery.com/jquery-latest.min.js"></script>
+<script src="//unslider.com/unslider.js"></script>
+
    +
    2. + +
  2. +
    +

    Ready your HTML

    +

    Unslider doesn’t need any really awkward markup. In fact, all you need is a div and an unordered list. An example of some Unslider-friendly HTML is on the right.

    +

    You can add as many slides as you want: the example on the right just has three for the sake of brevity, but Unslider won’t work properly with one slide (but then it’s just a box).

    +
    + + 
    <div class="banner">
+    <ul>
+        <li>This is a slide.</li>
+        <li>This is another slide.</li>
+        <li>This is a final slide.</li>
+    </ul>
+</div>
    +
    3. + +
  3. +
    +

    Make it pretty

    +

    You can change, add, and remove as much CSS per slide as you want, but there is a barebones style required by Unslider. It’s on the right (change the class name where .banner is the name of your slider).

    +
    + + 
    .banner { position: relative; overflow: auto; }
+    .banner ul { list-style: none; }
    +
    4. + +
  4. +
    +

    Plug it all together

    +

    We’ve been through so much together, and I’m pleased to say the finish line is near. Our journey is almost over, just one more thing left to do. The JavaScript is on the right (make sure to put it in a script tag, and change .banner to whatever your slider’s element is).

    +
    + + 
    $(function() {
+    $('.banner').unslider();
+});
    +
    5. +
+
+ +
+
+

Options

+

Although it’s lightweight, Unslider comes with a range of options to customise your slider. Here’s the default options provided. You can add, remove, or completely skip out the options object. It’s up to you.

+ + 
$('.banner').unslider({
+	speed: 500,               //  The speed to animate each slide (in milliseconds)
+	delay: 3000,              //  The delay between slide animations (in milliseconds)
+	complete: function() {},  //  A function that gets called after every slide animation
+	keys: true,               //  Enable keyboard (left, right) arrow shortcuts
+	dots: true,               //  Display dot navigation
+	fluid: false              //  Support responsive design. May break non-responsive designs
+});
+
+
- download bitch + - - + + + + \ No newline at end of file diff --git a/site/style.css b/site/style.css index 717759c..eff1266 100644 --- a/site/style.css +++ b/site/style.css @@ -9,15 +9,30 @@ box-sizing: border-box; } +::selection { + background: #bfa57c; + color: #fff; +} + body { color: #a48d66; font: 14px/23px proxima-nova-alt, "Proxima Nova Alt", sans-serif; } -h1, h2, h3, h4 { +h1, h2, h3, h4, b { font-weight: 300; font-family: bree-web, Bree, sans-serif; } + h2 { + font-size: 28px; + padding-bottom: 60px; + } + b { + font-weight: 500; + font-size: 16px; + + color: #c3522f; + } #logo { position: absolute; @@ -47,7 +62,7 @@ h1, h2, h3, h4 { list-style: none; width: 300%; } - .banner li { + .banner ul li { display: block; float: left; width: 33%; @@ -85,12 +100,6 @@ h1, h2, h3, h4 { border: 2px solid rgba(255,255,255,.4); border-radius: 5px; - - -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); - -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); - -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); - -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); - filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); } .banner .btn:hover { background: rgba(255,255,255,.05); @@ -101,4 +110,256 @@ h1, h2, h3, h4 { -ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); -o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); - } \ No newline at end of file + } + + .banner .btn, .banner .dot { + -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); + -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); + -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); + -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); + filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); + } + + .banner .dots { + position: absolute; + left: 0; + right: 0; + bottom: 20px; + } + .banner .dots li { + display: inline-block; + width: 10px; + height: 10px; + margin: 0 4px; + + text-indent: -999em; + + border: 2px solid #fff; + border-radius: 6px; + + cursor: pointer; + opacity: .4; + + -webkit-transition: background .2s, opacity .2s; + -moz-transition: background .2s, opacity .2s; + transition: background .2s, opacity .2s; + } + .banner .dots li.active { + background: #fff; + opacity: 1; + } + +.features { + overflow: hidden; + padding: 50px 0; + + background: #f7f7f6; + box-shadow: inset 0 -1px 3px rgba(0,0,0,.03); +} + .features li { + position: relative; + padding: 0 25px 0 40px; + list-style: none; + + width: 25%; + float: left; + } + .features li:before { + content: ''; + position: absolute; + left: 0; + top: 0; + + display: block; + width: 24px; + height: 22px; + + background: url('img/icons.png'); + } + .features li.browser:before { background-position: 0 -44px; } + .features li.height:before { background-position: 0 -22px; } + .features li.responsive:before { background-position: 0 -66px; } + .features b { + display: block; + padding-bottom: 6px; + } + +.how { + padding: 60px 0; +} + .how h2 { + color: #7c6853; + } + .how h3 { + padding-bottom: 8px; + + color: #7b6b53; + font-size: 20px; + line-height: 10px; + } + .how li { + position: relative; + width: 375px; + margin: 0 0 40px 15px; + padding-left: 10px; + } + .how pre { + position: absolute; + left: 450px; + top: 0; + + width: 495px; + padding: 20px 25px; + + background: #f8f5f0; + color: #8a785d; + + font-size: 12px; + line-height: 18px; + + border-radius: 5px; + box-shadow: inset 0 2px 2px rgba(180,157,125,.15), inset 0 0 1px rgba(0,0,0,.2); + } + .how p { + padding-bottom: 15px; + } + +.options { + padding: 60px 0; + + background: #39342d; + color: #7b7368; + + box-shadow: inset 0 2px 3px rgba(0,0,0,.2); + text-shadow: 0 1px 1px rgba(0,0,0,.2); +} + .options p { + font-size: 16px; + line-height: 25px; + + padding-bottom: 20px; + } + .options h2 { + color: #fff; + padding-bottom: 15px; + } + .options pre { + padding: 20px 25px; + + background: #342f29; + color: #988f81; + + font-size: 13px; + line-height: 19px; + + box-shadow: inset 0 2px 2px rgba(0,0,0,.15), inset 0 0 1px rgba(0,0,0,.1); + border-radius: 5px; + } + .options pre span { + color: #706657; + } + +.footer { + padding: 80px 0 60px; + text-align: center; +} + .footer .btn { + display: inline-block; + padding: 13px 24px 10px; + margin-bottom: 15px; + + background-color: #c4652d; + background-image: -webkit-gradient(linear, left top, left bottom, from(#d07936), to(#b95124)); + background-image: -webkit-linear-gradient(top, #d07936, #b95124); + background-image: -moz-linear-gradient(top, #d07936, #b95124); + background-image: -o-linear-gradient(top, #d07936, #b95124); + background-image: -ms-linear-gradient(top, #d07936, #b95124); + background-image: linear-gradient(top, #d07936, #b95124); + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#d07936', EndColorStr='#b95124'); + + border-radius: 5px; + box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), inset 0 -1px 2px rgba(0,0,0,.15), inset 0 2px 0 rgba(255,255,255,.2), 0 1px 1px rgba(0,0,0,.1); + + color: #fff; + text-shadow: 0 1px 2px rgba(0,0,0,.2); + + font-size: 12px; + line-height: 18px; + font-weight: bold; + text-transform: uppercase; + + border: none; + } + .footer .btn:hover { + opacity: .95; + color: #fff; + } + .footer .btn:active { + opacity: 1; + background-color: #bc5f29; + background-image: -webkit-gradient(linear, left top, left bottom, from(#b55625), to(#c3692d)); + background-image: -webkit-linear-gradient(top, #b55625, #c3692d); + background-image: -moz-linear-gradient(top, #b55625, #c3692d); + background-image: -o-linear-gradient(top, #b55625, #c3692d); + background-image: -ms-linear-gradient(top, #b55625, #c3692d); + background-image: linear-gradient(top, #b55625, #c3692d); + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#b55625', EndColorStr='#c3692d'); + + box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), inset 0 -1px 2px rgba(255,255,255,.1), inset 0 2px 2px rgba(0,0,0,.2), 0 1px 1px rgba(0,0,0,.1); + } + .footer a { + margin: 0 4px; + + color: #79654e; + text-decoration: none; + border-bottom: 1px solid #ddd2c6; + } + .footer a:hover { + color: #665139; + border-color: #d1bfa9; + } + +.wrap { + margin: 0 auto; + width: 960px; +} + +@media only screen and (min-device-width: 320px) and (max-device-width: 480px), (max-width: 900px) { + .wrap { + width: 90%; + } + #logo { + left: 50px; + top: 30px; + } + + .banner h1, .banner h2 { + font-size: 24px; + line-height: 30px; + } + .banner ul li { + padding-top: 100px; + padding-bottom: 50px; + height: 240px; + } + .banner p { + font-size: 15px; + width: 80%; + margin: 0 auto; + } + pre { + overflow: auto; + } + .features li { + width: 100%; + margin-left: 10px; + margin-bottom: 30px; + } + .how li { + width: 90%; + } + .how pre { + position: static; + width: 100%; + } +} \ No newline at end of file diff --git a/unslider.js b/src/unslider.js similarity index 98% rename from unslider.js rename to src/unslider.js index 237f9bf..c64ab66 100755 --- a/unslider.js +++ b/src/unslider.js @@ -100,7 +100,7 @@ }; // Swipe support - if($.events.swipe) { + if($.event.swipe) { this.el.on('swipeleft', _.prev).on('swiperight', _.next); } }; @@ -163,7 +163,7 @@ this.dots = function() { // Create the HTML var html = '
    '; - $.each(this.items, function(index) { html += '
  1. ' + index + '
    2. '; }); + $.each(this.items, function(index) { html += '
  2. ' + index + '
    3. '; }); html += '
'; // Add it to the Unslider diff --git a/test.html b/test.html deleted file mode 100755 index 0adb31e..0000000 --- a/test.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - Unslider test - - - - -
-
    -
  • slide 1
    • -
  • slide 2
    taller one
    • -
  • slide 3
    • -
  • slide 4
    • -
  • slide 5
    • -
-
- -
-
    -
  • slide a
    • -
  • slide b
    • -
  • slide c
    • -
  • slide d
    • -
  • slide e
    • -
-
- - - - - - \ No newline at end of file diff --git a/unslider.zepto.js b/unslider.zepto.js deleted file mode 100644 index bd2c622..0000000 --- a/unslider.zepto.js +++ /dev/null @@ -1,186 +0,0 @@ -/** - * Unslider by @idiot - */ - -(function($, f) { - // If there's no jQuery, Unslider can't work, so kill the operation. - if(!$) return f; - - var Unslider = function() { - // Set up our elements - this.el = f; - this.items = f; - - // Dimensions - this.sizes = []; - this.max = [0,0]; - - // Current inded - this.current = 0; - - // Start/stop timer - this.interval = f; - - // Set some options - this.opts = { - speed: 500, - delay: 3000, // f for no autoplay - complete: f, // when a slide's finished - keys: !f, // keyboard shortcuts - disable if it breaks things - dots: f, // display ••••o• pagination - fluid: f, // is it a percentage width?, - arrows: f - }; - - // Create a deep clone for methods where context changes - var _ = this; - - this.init = function(el, opts) { - this.el = el; - this.ul = el.children('ul'); - this.max = [el.width(), el.height()]; - this.items = this.ul.children('li').each(this.calculate); - - // Check whether we're passing any options in to Unslider - if(opts) { - this.opts = $.extend(this.opts, opts); - } - - // Set up the Unslider - this.setup(); - - return this; - }; - - // Get the width for an element - // Pass a jQuery element as the context with .call(), and the index as a parameter: Unslider.calculate.call($('li:first'), 0) - this.calculate = function(index) { - var me = $(this), - width = me.width(), height = me.height(); - - // Add it to the sizes list - _.sizes[index] = [width, height]; - - // Set the max values - if(width > _.max[0]) _.max[0] = width; - if(height > _.max[1]) _.max[1] = height; - }; - - // Work out what methods need calling - this.setup = function() { - // Set the main element - this.el.css({ - overflow: 'hidden', - width: _.max[0], - height: this.items.first().height() - }); - - // Set the relative widths - this.ul.css({width: (this.items.length * 100) + '%', position: 'relative'}); - this.items.css('width', (100 / this.items.length) + '%'); - - if(this.opts.delay !== f) { - this.start(); - this.el.bind('mouseover', this.stop); - this.el.bind('mouseout', this.start); - } - - // Custom keyboard support - this.opts.keys && $(document).keydown(this.keys); - - // Dot pagination - this.opts.dots && this.dots(); - - // Little patch for fluid-width sliders. Screw those guys. - this.opts.fluid && $(window).resize(function() { - _.el.css('width', (_.el.width() / _.el.parent().width()) * 100 + '%'); - }); - - if(this.opts.arrows) { - this.el.parent().append('

←→

') - .find('.arrows span').click(function() { - $.isFunction(_[this.className]) && _[this.className](); - }); - }; - }; - - // Move Unslider to a slide index - this.move = function(index, cb) { - // If it's out of bounds, go to the first slide - if(!this.items.eq(index).length) console.log('nope') && index = 0; - if(index < 0) index = (this.items.length - 1); - - var target = this.items.eq(index); - var obj = {height: target.height()}; - var speed = cb ? 5 : this.opts.speed; - - _.current = index; - - this.el.animate(obj, speed) && this.ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, _.opts.complete); - - // Handle those pesky dots - this.el.find('.dot').eq(index).addClass('active').siblings().removeClass('active'); - }; - - // Autoplay functionality - this.start = function() { - _.interval = setInterval(function() { - _.move(_.current + 1); - }, _.opts.delay); - }; - - // Stop autoplay - this.stop = function() { - _.interval = clearInterval(_.interval); - return _; - }; - - // Keypresses - this.keys = function(e) { - var key = e.which; - var map = { - // Prev/next - 37: _.prev, - 39: _.next, - - // Esc - 27: _.stop - }; - - if($.isFunction(map[key])) { - map[key](); - } - }; - - // Arrow navigation - this.next = function() { return _.stop().move(_.current + 1) }; - this.prev = function() { return _.stop().move(_.current - 1) }; - - this.dots = function() { - // Create the HTML - var html = '
    '; - $.each(this.items, function(index) { html += '
  1. ' + index + '
    2. '; }); - html += '
'; - - // Add it to the Unslider - this.el.addClass('has-dots').append(html).find('.dot').click(function() { - _.move($(this).index()); - }); - }; - }; - - // Create a jQuery plugin - $.fn.unslider = function(o) { - var len = this.length; - - // Enable multiple-slider support - return this.each(function(index) { - // Cache a copy of $(this), so it - var me = $(this); - var instance = (new Unslider).init(me, o); - - // Invoke an Unslider instance - me.data('unslider' + (len > 1 ? '-' + (index + 1) : ''), instance); - }); - }; -})(window.jQuery || window.Zepto, false); \ No newline at end of file From 40d659cf096adbd4d6cc2d9be0b506c8455d1669 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Sat, 16 Mar 2013 12:28:41 +0000 Subject: [PATCH 045/109] swipe support --- site/index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/site/index.html b/site/index.html index 2b9b5f6..b1f280a 100644 --- a/site/index.html +++ b/site/index.html @@ -146,6 +146,10 @@

Options

+ + + + - \ No newline at end of file + From f53efe962c7090d00b23e53326b65d40f37d02b8 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Sat, 16 Mar 2013 20:05:46 +0000 Subject: [PATCH 049/109] oops responsive --- site/index.html | 2 ++ site/style.css | 9 +++++++++ 2 files changed, 11 insertions(+) diff --git a/site/index.html b/site/index.html index 758f057..535cfb2 100644 --- a/site/index.html +++ b/site/index.html @@ -6,6 +6,8 @@ + + diff --git a/site/style.css b/site/style.css index 847a9cc..fc3131a 100644 --- a/site/style.css +++ b/site/style.css @@ -17,6 +17,8 @@ body { color: #a48d66; font: 14px/23px proxima-nova-alt, "Proxima Nova Alt", sans-serif; + + -webkit-transform: translateZ(0); } h1, h2, h3, h4, b { @@ -372,4 +374,11 @@ h1, h2, h3, h4, b { position: static; width: 100%; } +} + +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + .features li:before { + background: url('img/icons@2x.png'); + background-size: 100%; + } } \ No newline at end of file From 8d54b85f1d765ef17b18f95e8c8feb256d28e325 Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Sat, 16 Mar 2013 20:09:12 +0000 Subject: [PATCH 050/109] fixin' them dots --- src/unslider.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/unslider.js b/src/unslider.js index c64ab66..186a707 100755 --- a/src/unslider.js +++ b/src/unslider.js @@ -115,15 +115,15 @@ var obj = {height: target.outerHeight()}; var speed = cb ? 5 : this.opts.speed; - if(!this.ul.is(':animated')) { + if(!this.ul.is(':animated')) { this.el.animate(obj, speed) && this.ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, function(data) { + // Handle those pesky dots + _.el.find('.dot:eq(' + index + ')').addClass('active').siblings().removeClass('active'); + _.current = index; $.isFunction(_.opts.complete) && !cb && _.opts.complete(_.el); }); } - - // Handle those pesky dots - this.el.find('.dot:eq(' + index + ')').addClass('active').siblings().removeClass('active'); }; // Autoplay functionality From d765c1625c39600fbd56f17240a8bf404950391d Mon Sep 17 00:00:00 2001 From: Visual Idiot Date: Sun, 17 Mar 2013 13:59:49 +0000 Subject: [PATCH 051/109] bloody safari --- site/index.html | 7 ++++++- site/style.css | 12 +++++------- src/unslider.js | 6 +++--- 3 files changed, 14 insertions(+), 11 deletions(-) diff --git a/site/index.html b/site/index.html index 535cfb2..ed7f430 100644 --- a/site/index.html +++ b/site/index.html @@ -186,9 +186,14 @@

Accessing Unslider properties

- + - + - +
  • Cross-browser happy

    Unslider’s been tested in all the latest browsers, and it falls back magnificently for the not-so-latest ones.

    • - +
  • Keyboard support

    If you want to, you can add keyboard arrow support. Try it: hit left and right arrow keys.

    • - +
  • Adjusts for height

    Not all slides are created equal, and Unslider knows it. It’ll stylishly transition heights with no extra code.

    • - +
  • Yep, it’s responsive

    You’ll be hard pressed to find a site that’s not responsive these days. Unslider’s got your back.

- +

How to use Unslider

- +

  1. Include jQuery and Unslider

    To use Unslider, you’ll need to make sure both the Unslider and jQuery scripts are included. If you’ve already got jQuery (you can test by opening your JavaScript console and typing !!window.jQuery — if it says true, you have jQuery), you don’t need to add the first line.

    - + 
    <script src="//code.jquery.com/jquery-latest.min.js"></script>
-<script src="//unslider.com/unslider.min.js"></script>
+<script src="//unslider.com/unslider.js"></script>
    2. - +

  2. Ready your HTML

    Unslider doesn’t need any really awkward markup. In fact, all you need is a div and an unordered list. An example of some Unslider-friendly HTML is on the right.

    You can add as many slides as you want: the example on the right just has three for the sake of brevity, but Unslider won’t work properly with one slide (but then it’s just a box).

    - + 
    <div class="banner">
     <ul>
         <li>This is a slide.</li>
@@ -100,36 +108,36 @@ 
    Ready your HTML
    
     </ul>
 </div>
    3. - +

  3. Make it pretty

    You can change, add, and remove as much CSS per slide as you want, but there is a barebones style required by Unslider. It’s on the right (change the class name where .banner is the name of your slider).

    - + 
    .banner { position: relative; overflow: auto; }
     .banner li { list-style: none; }
         .banner ul li { float: left; }
    4. - +

  4. Plug it all together

    We’ve been through so much together, and I’m pleased to say the finish line is near. Our journey is almost over, just one more thing left to do. The JavaScript is on the right (make sure to put it in a script tag, and change .banner to whatever your slider’s element is).

    - + 
    $(function() {
     $('.banner').unslider();
 });
- +

Options

Although it’s lightweight, Unslider comes with a range of options to customise your slider. Here’s the default options provided. You can add, remove, or completely skip out the options object. It’s up to you.

- + 
$('.banner').unslider({
 	speed: 500,               //  The speed to animate each slide (in milliseconds)
 	delay: 3000,              //  The delay between slide animations (in milliseconds)
@@ -141,12 +149,12 @@ 
Options

 



 				
Touch support

 				
If you want to add mobile/touch/swipe/whatever support to Unslider, you’ll need to include the jQuery.event.swipe plugin, then it’ll work out the box. Easy!

-				
+
 



-				
+
 				
Adding previous/next links

 				
A feature that’s often requested in Unslider, but isn’t included in-the-box, is previous/next links. Luckily, they’re easy enough to add with a little script, which utilises Unslider’s methods.

-				
+
 				
<!-- The HTML -->
 <a href="#" class="unslider-arrow prev">Previous slide</a>
 <a href="#" class="unslider-arrow next">Next slide</a>
@@ -154,23 +162,23 @@ 
Adding previous/next links

 <!-- And the JavaScript -->
 <script>
     var unslider = $('.banner').unslider();
-    
+
     $('.unslider-arrow').click(function() {
         var fn = this.className.split(' ')[1];
-        
+
         //  Either do unslider.data('unslider').next() or .prev() depending on the className
-        unslider.data('unslider')[fn]();
+        unslider.data('unslider')[fn])();
     });
 </script>
 

-				
+
 



 				
Accessing Unslider properties

 				
Using jQuery’s wonderful data method, you can access and manually override any methods. Here’s a list of what you can do:

-				
+
 				
var slidey = $('.banner').unslider(),
     data = slidey.data('unslider');
-    
+
 //  Start Unslider
 data.start();
 
@@ -194,41 +202,41 @@ 
Accessing Unslider properties

 data.dots();
- + - - + + - + - - + + diff --git a/site/style.css b/site/style.css index e993ea4..8b43081 100644 --- a/site/style.css +++ b/site/style.css @@ -1,9 +1,9 @@ * { margin: 0; padding: 0; - + -webkit-font-smoothing: antialiased; - + -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -30,7 +30,7 @@ h1, h2, h3, h4, b { b { font-weight: 500; font-size: 16px; - + color: #c3522f; } @@ -39,7 +39,7 @@ h1, h2, h3, h4, b { left: 80px; top: 40px; z-index: 2; - + margin-left: -17px; } @@ -47,14 +47,14 @@ h1, h2, h3, h4, b { position: relative; width: 100%; overflow: auto; - + font-size: 18px; line-height: 24px; text-align: center; - + color: rgba(255,255,255,.6); text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3); - + background: #5b4d3d; box-shadow: 0 1px 2px rgba(0,0,0,.25); } @@ -66,38 +66,40 @@ h1, h2, h3, h4, b { display: block; float: left; width: 33%; - padding: 160px 0 110px; - min-height: 350px; - -/* -webkit-background-size: 100% 100%;*/ - -moz-background-size: 100% 100%; + -o-background-size: 100% 100%; -ms-background-size: 100% 100%; -/* background-size: 100% 100%;*/ - + -moz-background-size: 100% 100%; + -webkit-background-size: 100% 100%; + background-size: 100% 100%; + box-shadow: inset 0 -3px 6px rgba(0,0,0,.1); } - + + .banner .inner { + padding: 160px 0 110px; + } + .banner h1, .banner h2 { font-size: 40px; line-height: 52px; - + color: #fff; } - + .banner .btn { display: inline-block; margin: 25px 0 0; padding: 9px 22px 7px; clear: both; - + color: #fff; font-size: 12px; font-weight: bold; text-transform: uppercase; text-decoration: none; - + border: 2px solid rgba(255,255,255,.4); border-radius: 5px; } @@ -111,7 +113,7 @@ h1, h2, h3, h4, b { -o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); } - + .banner .btn, .banner .dot { -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); @@ -119,7 +121,7 @@ h1, h2, h3, h4, b { -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); } - + .banner .dots { position: absolute; left: 0; @@ -131,15 +133,15 @@ h1, h2, h3, h4, b { width: 10px; height: 10px; margin: 0 4px; - + text-indent: -999em; - + border: 2px solid #fff; border-radius: 6px; - + cursor: pointer; opacity: .4; - + -webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s; @@ -148,11 +150,11 @@ h1, h2, h3, h4, b { background: #fff; opacity: 1; } - + .features { overflow: hidden; padding: 50px 0; - + background: #f7f7f6; box-shadow: inset 0 -1px 3px rgba(0,0,0,.03); } @@ -160,7 +162,7 @@ h1, h2, h3, h4, b { position: relative; padding: 0 25px 0 40px; list-style: none; - + width: 25%; float: left; } @@ -169,11 +171,11 @@ h1, h2, h3, h4, b { position: absolute; left: 0; top: 0; - + display: block; width: 24px; height: 22px; - + background: url('img/icons.png'); } .features li.browser:before { background-position: 0 -44px; } @@ -183,7 +185,7 @@ h1, h2, h3, h4, b { display: block; padding-bottom: 6px; } - + .how { padding: 60px 0; } @@ -207,29 +209,29 @@ h1, h2, h3, h4, b { position: absolute; left: 450px; top: 0; - + width: 495px; padding: 20px 25px; - + background: #f8f5f0; color: #8a785d; - + font-size: 12px; line-height: 18px; - + border-radius: 5px; box-shadow: inset 0 2px 2px rgba(180,157,125,.15), inset 0 0 1px rgba(0,0,0,.2); } .how p { padding-bottom: 15px; } - + .options { padding: 60px 0; - + background: #39342d; color: #7b7368; - + box-shadow: inset 0 2px 3px rgba(0,0,0,.2); text-shadow: 0 1px 1px rgba(0,0,0,.2); } @@ -246,7 +248,7 @@ h1, h2, h3, h4, b { .options p { font-size: 16px; line-height: 25px; - + padding-bottom: 20px; } .options h2 { @@ -255,20 +257,20 @@ h1, h2, h3, h4, b { } .options pre { padding: 20px 25px; - + background: #342f29; color: #988f81; - + font-size: 13px; line-height: 19px; - + box-shadow: inset 0 2px 2px rgba(0,0,0,.15), inset 0 0 1px rgba(0,0,0,.1); border-radius: 5px; } .options pre span { color: #706657; } - + .footer { padding: 80px 0 60px; text-align: center; @@ -277,7 +279,7 @@ h1, h2, h3, h4, b { display: inline-block; padding: 13px 24px 10px; margin-bottom: 15px; - + background-color: #c4652d; background-image: -webkit-gradient(linear, left top, left bottom, from(#d07936), to(#b95124)); background-image: -webkit-linear-gradient(top, #d07936, #b95124); @@ -286,18 +288,18 @@ h1, h2, h3, h4, b { background-image: -ms-linear-gradient(top, #d07936, #b95124); background-image: linear-gradient(top, #d07936, #b95124); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#d07936', EndColorStr='#b95124'); - + border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), inset 0 -1px 2px rgba(0,0,0,.15), inset 0 2px 0 rgba(255,255,255,.2), 0 1px 1px rgba(0,0,0,.1); - + color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.2); - + font-size: 12px; line-height: 18px; font-weight: bold; text-transform: uppercase; - + border: none; } .footer .btn span { @@ -318,12 +320,12 @@ h1, h2, h3, h4, b { background-image: -ms-linear-gradient(top, #b55625, #c3692d); background-image: linear-gradient(top, #b55625, #c3692d); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#b55625', EndColorStr='#c3692d'); - + box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), inset 0 -1px 2px rgba(255,255,255,.1), inset 0 2px 2px rgba(0,0,0,.2), 0 1px 1px rgba(0,0,0,.1); } .footer a { margin: 0 4px; - + color: #79654e; text-decoration: none; border-bottom: 1px solid #ddd2c6; @@ -346,15 +348,17 @@ h1, h2, h3, h4, b { left: 50px; top: 30px; } - + .banner h1, .banner h2 { font-size: 24px; line-height: 30px; } .banner ul li { + height: 240px; + } + .banner .inner { padding-top: 100px; padding-bottom: 50px; - height: 240px; } .banner p { font-size: 15px; diff --git a/src/unslider.js b/src/unslider.js index 6d25571..14f18b6 100755 --- a/src/unslider.js +++ b/src/unslider.js @@ -1,26 +1,26 @@ /** * Unslider by @idiot */ - + (function($, f) { // If there's no jQuery, Unslider can't work, so kill the operation. if(!$) return f; - + var Unslider = function() { // Set up our elements this.el = f; this.items = f; - + // Dimensions this.sizes = []; this.max = [0,0]; - + // Current inded this.current = 0; - + // Start/stop timer this.interval = f; - + // Set some options this.opts = { speed: 500, @@ -28,122 +28,168 @@ complete: f, // when a slide's finished keys: !f, // keyboard shortcuts - disable if it breaks things dots: f, // display ••••o• pagination - fluid: f, // is it a percentage width?, + fluid: f // is it a percentage width?, }; - + // Create a deep clone for methods where context changes var _ = this; + // Check for CSS3 support + var css3 = (function(doc) { + var prop = { + OTransition: ['oTransitionEnd otransitionend', 'OTransform'], + msTransition: ['transitionend', 'msTransform'], + MozTransition: ['transitionend', 'MozTransform'], + WebkitTransition: ['webkitTransitionEnd', 'webkitTransform'], + transition: ['transitionend', 'transform'] + }; + + for (each in prop) + if (typeof doc.style[each] == 'string') return {name: each, callback: prop[each][0], accel: prop[each][1]}; + + return f; + })(document.body || document.documentElement); + this.init = function(el, opts) { this.el = el; this.ul = el.children('ul'); - this.max = [el.outerWidth(), el.outerHeight()]; + this.max = [el.outerWidth(), el.outerHeight()]; this.items = this.ul.children('li').each(this.calculate); - + // Check whether we're passing any options in to Unslider this.opts = $.extend(this.opts, opts); - + // Set up the Unslider this.setup(); - + return this; }; - + // Get the width for an element // Pass a jQuery element as the context with .call(), and the index as a parameter: Unslider.calculate.call($('li:first'), 0) this.calculate = function(index) { var me = $(this), width = me.outerWidth(), height = me.outerHeight(); - + // Add it to the sizes list _.sizes[index] = [width, height]; - + // Set the max values if(width > _.max[0]) _.max[0] = width; if(height > _.max[1]) _.max[1] = height; }; - + // Work out what methods need calling this.setup = function() { + var elCSS = {width: _.max[0], height: this.items.first().outerHeight(), overflow: 'hidden'}, + ulCSS = {position: 'relative', left: 0, width: (this.items.length * 100) + '%'}; + + if (css3) { + elCSS[css3.accel] = 'translateZ(0)'; + ulCSS[css3.accel] = 'translateZ(0)'; + } + // Set the main element - this.el.css({ - overflow: 'hidden', - width: _.max[0], - height: this.items.first().outerHeight() - }); - + this.el.css(elCSS); + // Set the relative widths - this.ul.css({width: (this.items.length * 100) + '%', position: 'relative'}); + this.ul.css(ulCSS); this.items.css('width', (100 / this.items.length) + '%'); - + if(this.opts.delay !== f) { this.start(); this.el.hover(this.stop, this.start); } - + // Custom keyboard support this.opts.keys && $(document).keydown(this.keys); - + // Dot pagination this.opts.dots && this.dots(); - + // Little patch for fluid-width sliders. Screw those guys. if(this.opts.fluid) { var resize = function() { _.el.css('width', Math.min(Math.round((_.el.outerWidth() / _.el.parent().outerWidth()) * 100), 100) + '%'); }; - + resize(); $(window).resize(resize); } - + if(this.opts.arrows) { - this.el.parent().append('

←→

') - .find('.arrows span').click(function() { + this.el.parent().append('

←→

').find('.arrows span').click(function() { $.isFunction(_[this.className]) && _[this.className](); }); }; - + // Swipe support if($.event.swipe) { this.el.on('swipeleft', _.prev).on('swiperight', _.next); } }; - + // Move Unslider to a slide index this.move = function(index, cb) { // If it's out of bounds, go to the first slide - if(!this.items.eq(index).length) index = 0; - if(index < 0) index = (this.items.length - 1); - - var target = this.items.eq(index); - var obj = {height: target.outerHeight()}; - var speed = cb ? 5 : this.opts.speed; - - if(!this.ul.is(':animated')) { - // Handle those pesky dots - _.el.find('.dot:eq(' + index + ')').addClass('active').siblings().removeClass('active'); - - this.el.animate(obj, speed) && this.ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, function(data) { - _.current = index; - $.isFunction(_.opts.complete) && !cb && _.opts.complete(_.el); + if (!this.items.eq(index).length) index = 0; + if (index < 0) index = (this.items.length - 1); + + var target = this.items.eq(index), + animH = target.outerHeight() + 'px', + animL = '-' + index + '00%', + anim = {height: animH}, + speed = cb ? 5 : this.opts.speed, + speedT = speed + 'ms ease-in-out', + styl = {el: this.el[0].style, ul: this.ul[0].style}; + + if (css3) { + var anim = 'height ' + speedT; + + _.moveBefore(index); + styl.el[css3.name] = anim; + styl.el['height'] = animH; + styl.ul[css3.name] = anim + ', left ' + speedT; + styl.ul['left'] = animL; + + this.ul.bind(css3.callback, function() { + $(this).unbind(css3.callback); + _.moveAfter(index); }); + } else { + if (!this.ul.is(':animated')) { + _.moveBefore(index); + + this.el.animate(anim, speed); + this.ul.animate($.extend({left: animL}, anim), speed, function() { + _.moveAfter(index); + }); + } } }; - + + this.moveBefore = function(index) { + _.el.find('.dot:eq(' + index + ')').addClass('active').siblings().removeClass('active'); + }; + + this.moveAfter = function(index) { + _.current = index; + $.isFunction(_.opts.complete) && !cb && _.opts.complete(_.el); + }; + // Autoplay functionality this.start = function() { _.interval = setInterval(function() { _.move(_.current + 1); }, _.opts.delay); }; - + // Stop autoplay this.stop = function() { _.interval = clearInterval(_.interval); return _; }; - + // Keypresses this.keys = function(e) { var key = e.which; @@ -151,43 +197,43 @@ // Prev/next 37: _.prev, 39: _.next, - + // Esc 27: _.stop }; - + if($.isFunction(map[key])) { map[key](); } }; - + // Arrow navigation this.next = function() { return _.stop().move(_.current + 1) }; this.prev = function() { return _.stop().move(_.current - 1) }; - + this.dots = function() { // Create the HTML var html = '
    '; $.each(this.items, function(index) { html += '
  1. ' + (index + 1) + '
    2. '; }); html += '
'; - + // Add it to the Unslider this.el.addClass('has-dots').append(html).find('.dot').click(function() { - _.move($(this).index()); + _.stop().move($(this).index()); }); }; }; - + // Create a jQuery plugin $.fn.unslider = function(o) { var len = this.length; - + // Enable multiple-slider support return this.each(function(index) { - // Cache a copy of $(this), so it + // Cache a copy of $(this), so it var me = $(this); var instance = (new Unslider).init(me, o); - + // Invoke an Unslider instance me.data('unslider' + (len > 1 ? '-' + (index + 1) : ''), instance); }); diff --git a/src/unslider.min.js b/src/unslider.min.js index 4298701..a3426c8 100644 --- a/src/unslider.min.js +++ b/src/unslider.min.js @@ -1 +1 @@ -(function(e,t){if(!e)return t;var n=function(){this.el=t;this.items=t;this.sizes=[];this.max=[0,0];this.current=0;this.interval=t;this.opts={speed:500,delay:3e3,complete:t,keys:!t,dots:t,fluid:t};var n=this;this.init=function(t,n){this.el=t;this.ul=t.children("ul");this.max=[t.outerWidth(),t.outerHeight()];this.items=this.ul.children("li").each(this.calculate);this.opts=e.extend(this.opts,n);this.setup();return this};this.calculate=function(t){var r=e(this),i=r.outerWidth(),s=r.outerHeight();n.sizes[t]=[i,s];if(i>n.max[0])n.max[0]=i;if(s>n.max[1])n.max[1]=s};this.setup=function(){this.el.css({overflow:"hidden",width:n.max[0],height:this.items.first().outerHeight()});this.ul.css({width:this.items.length*100+"%",position:"relative"});this.items.css("width",100/this.items.length+"%");if(this.opts.delay!==t){this.start();this.el.hover(this.stop,this.start)}this.opts.keys&&e(document).keydown(this.keys);this.opts.dots&&this.dots();if(this.opts.fluid){var r=function(){n.el.css("width",Math.min(Math.round(n.el.outerWidth()/n.el.parent().outerWidth()*100),100)+"%")};r();e(window).resize(r)}if(this.opts.arrows){this.el.parent().append('

←→

').find(".arrows span").click(function(){e.isFunction(n[this.className])&&n[this.className]()})}if(e.event.swipe){this.el.on("swipeleft",n.prev).on("swiperight",n.next)}};this.move=function(t,r){if(!this.items.eq(t).length)t=0;if(t<0)t=this.items.length-1;var i=this.items.eq(t);var s={height:i.outerHeight()};var o=r?5:this.opts.speed;if(!this.ul.is(":animated")){n.el.find(".dot:eq("+t+")").addClass("active").siblings().removeClass("active");this.el.animate(s,o)&&this.ul.animate(e.extend({left:"-"+t+"00%"},s),o,function(i){n.current=t;e.isFunction(n.opts.complete)&&!r&&n.opts.complete(n.el)})}};this.start=function(){n.interval=setInterval(function(){n.move(n.current+1)},n.opts.delay)};this.stop=function(){n.interval=clearInterval(n.interval);return n};this.keys=function(t){var r=t.which;var i={37:n.prev,39:n.next,27:n.stop};if(e.isFunction(i[r])){i[r]()}};this.next=function(){return n.stop().move(n.current+1)};this.prev=function(){return n.stop().move(n.current-1)};this.dots=function(){var t='
    ';e.each(this.items,function(e){t+='
  1. '+(e+1)+"
    2. "});t+="
";this.el.addClass("has-dots").append(t).find(".dot").click(function(){n.move(e(this).index())})}};e.fn.unslider=function(t){var r=this.length;return this.each(function(i){var s=e(this);var u=(new n).init(s,t);s.data("unslider"+(r>1?"-"+(i+1):""),u)})}})(window.jQuery,false) \ No newline at end of file +(function(e,f){if(!e)return f;var n=function(){this.items=this.el=f;this.sizes=[];this.max=[0,0];this.current=0;this.interval=f;this.opts={speed:500,delay:3E3,complete:f,keys:!f,dots:f,fluid:f};var a=this,c;a:{var g={OTransition:["oTransitionEnd otransitionend","OTransform"],msTransition:["transitionend","msTransform"],MozTransition:["transitionend","MozTransform"],WebkitTransition:["webkitTransitionEnd","webkitTransform"],transition:["transitionend","transform"]};for(each in g)if("string"==typeof(document.body||document.documentElement).style[each]){c={name:each,callback:g[each][0],accel:g[each][1]};break a}c=f}this.init=function(b,a){this.el=b;this.ul=b.children("ul");this.max=[b.outerWidth(),b.outerHeight()];this.items=this.ul.children("li").each(this.calculate);this.opts=e.extend(this.opts,a);this.setup();return this};this.calculate=function(b){var d=e(this),c=d.outerWidth(),d=d.outerHeight();a.sizes[b]=[c,d];c>a.max[0]&&(a.max[0]=c);d>a.max[1]&&(a.max[1]=d)};this.setup=function(){var b={width:a.max[0],height:this.items.first().outerHeight(),overflow:"hidden"},d={position:"relative",left:0,width:100*this.items.length+"%"};c&&(b[c.accel]="translateZ(0)",d[c.accel]="translateZ(0)");this.el.css(b);this.ul.css(d);this.items.css("width",100/this.items.length+"%");this.opts.delay!==f&&(this.start(),this.el.hover(this.stop,this.start));this.opts.keys&&e(document).keydown(this.keys);this.opts.dots&&this.dots();this.opts.fluid&&(b=function(){a.el.css("width",Math.min(Math.round(100*(a.el.outerWidth()/a.el.parent().outerWidth())),100)+"%")},b(),e(window).resize(b));this.opts.arrows&&this.el.parent().append('

\u2190\u2192

').find(".arrows span").click(function(){e.isFunction(a[this.className])&&a[this.className]()});if(e.event.swipe)this.el.on("swipeleft",a.prev).on("swiperight",a.next)};this.move=function(b,d){this.items.eq(b).length||(b=0);0>b&&(b=this.items.length-1);var f=this.items.eq(b).outerHeight()+"px",g="-"+b+"00%",h={height:f},j=d?5:this.opts.speed,k=j+"ms ease-in-out",l=this.el[0].style,m=this.ul[0].style;c?(h="height "+k,a.moveBefore(b),l[c.name]=h,l.height=f,m[c.name]=h+", left "+k,m.left=g,this.ul.bind(c.callback,function(){e(this).unbind(c.callback);a.moveAfter(b)})):this.ul.is(":animated")||(a.moveBefore(b),this.el.animate(h,j),this.ul.animate(e.extend({left:g},h),j,function(){a.moveAfter(b)}))};this.moveBefore=function(b){a.el.find(".dot:eq("+b+")").addClass("active").siblings().removeClass("active")};this.moveAfter=function(b){a.current=b;e.isFunction(a.opts.complete)&&!cb&&a.opts.complete(a.el)};this.start=function(){a.interval=setInterval(function(){a.move(a.current+1)},a.opts.delay)};this.stop=function(){a.interval=clearInterval(a.interval);return a};this.keys=function(b){b=b.which;var d={37:a.prev,39:a.next,27:a.stop};if(e.isFunction(d[b]))d[b]()};this.next=function(){return a.stop().move(a.current+1)};this.prev=function(){return a.stop().move(a.current-1)};this.dots=function(){var b='
    ';e.each(this.items,function(a){b+='
  1. '+(a+1)+"
    2. "});b+="
";this.el.addClass("has-dots").append(b).find(".dot").click(function(){a.stop().move(e(this).index())})}};e.fn.unslider=function(a){var c=this.length;return this.each(function(f){var b=e(this),d=(new n).init(b,a);b.data("unslider"+(1 Date: Sun, 24 Mar 2013 22:52:12 +0400 Subject: [PATCH 061/109] update #2 --- site/index.html | 8 +- site/style.css | 12 +++ src/unslider.js | 233 +++++++++++++++++++++++--------------------- src/unslider.min.js | 2 +- 4 files changed, 138 insertions(+), 117 deletions(-) diff --git a/site/index.html b/site/index.html index 8eba24f..c5d1022 100644 --- a/site/index.html +++ b/site/index.html @@ -167,7 +167,7 @@

Adding previous/next links

var fn = this.className.split(' ')[1]; // Either do unslider.data('unslider').next() or .prev() depending on the className - unslider.data('unslider')[fn])(); + unslider.data('unslider')[fn](); }); </script> @@ -216,16 +216,16 @@

Accessing Unslider properties

- +