From ebe64a9d7559a437dbb324f63f39417096aa30ff Mon Sep 17 00:00:00 2001 From: Sumartono Liu Date: Mon, 6 Jan 2014 20:23:23 +0800 Subject: [PATCH 1/3] Fix multiple slide issue #6 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * added `”use strict”` * code optimization * callback `onLoadingComplete` now returns 2 new arguments: all images object (JSON) and plugin element (DOM) * callback `onSlideComplete` now returns 4 new arguments: current slide index (Number), current image element (DOM), all images object (JSON), and plugin element (DOM) --- js/kenburns.js | 261 ++++++++++++++++++++++++------------------------- 1 file changed, 126 insertions(+), 135 deletions(-) diff --git a/js/kenburns.js b/js/kenburns.js index c6e3e3e..f281449 100644 --- a/js/kenburns.js +++ b/js/kenburns.js @@ -22,6 +22,7 @@ */ ;(function ( $, window, document, undefined ) { + "use strict"; /* Plugin Parameters ------------------------------------------------------------------------------------------------- */ @@ -32,17 +33,11 @@ fadeSpeed:500, scale:1, ease3d:'cubic-bezier(.81, 0, .26, 1)', - onLoadingComplete:function(){}, - onSlideComplete:function(){}, - onListComplete:function(){}, - getSlideIndex:function(){ - return currentSlide; - } + onLoadingComplete: function(imagesObj, elm) { }, + onSlideComplete: function(currentSlideIndex, currentImageDOM, imagesObj, elm) { }, + onListComplete: function() { } }; - var imagesObj = {}; - var currentSlide = 0; - function Plugin( element, options ) { this.element = element; this.options = $.extend( {}, defaults, options) ; @@ -62,25 +57,23 @@ */ Plugin.prototype.init = function () { - var list = this.options.images; - var that = this; - - this.width = $(this.element).width(); - this.height = $(this.element).height(); + var list = this.options.images, + that = this, + $element = $(this.element); + this.width = $element.width(); + this.height = $element.height(); this.has3d = has3DTransforms(); + this.imagesObj = {}; - for (i in list) { - imagesObj["image"+i] = {}; - imagesObj["image"+i].loaded = false; - this.attachImage(list[i], "image"+i , i); - + for (var i in list) { + this.imagesObj["image"+i] = {}; + this.imagesObj["image"+i].loaded = false; + this.attachImage(list[i], "image"+i , i); } - var loader = $('
'); - loader.addClass('loader'); - loader.css({'position':'absolute','z-index':10000}); - $(this.element).prepend(loader); + var loader = $('
', { class: 'loader' }).css({ 'position': 'absolute', 'z-index': 10000 }); + $element.prepend(loader); }; @@ -96,42 +89,42 @@ * has 3d transform capabilities and initializes the starting CSS values. */ Plugin.prototype.attachImage = function(url,alt_text,index) { - var that = this; + var that = this; //put the image in an empty div to separate the animation effects of fading and moving - var wrapper = $('
'); - wrapper.attr('class','kb-slide'); - wrapper.css({'opacity':0}); - - var img = $(""); - img.attr('src', url); - img.attr('alt', alt_text); + var $wrapper = $('
', { class: 'kb-slide' }).css({'opacity':0}); + var $img = $("", { + src: url, + alt: alt_text + }); - wrapper.html(img); + $wrapper.html($img); //First check if the browser supports 3D transitions, initialize the CSS accordingly - if(this.has3d) { - img.css({'-webkit-transform-origin':'left top'}); - img.css({'-moz-transform-origin':'left top'}); - img.css({'-webkit-transform':'scale('+that.options.scale+') translate3d(0,0,0)'}); - img.css({'-moz-transform':'scale('+that.options.scale+') translate3d(0,0,0)'}); + if (this.has3d) { + $img.css({ + '-webkit-transform-origin':'left top', + '-moz-transform-origin':'left top', + '-webkit-transform':'scale('+that.options.scale+') translate3d(0,0,0)', + '-moz-transform':'scale('+that.options.scale+') translate3d(0,0,0)' + }); } //Switch the transition to the 3d version if it does exist - this.doTransition = (this.has3d)?this.transition3d:this.transition; - + this.doTransition = this.has3d ? this.transition3d : this.transition; //set up the image OBJ parameters - used to track loading and initial dimensions - img.load(function() { - imagesObj["image"+index].element = this; - imagesObj["image"+index].loaded = true; - imagesObj["image"+index].width = $(this).width(); - imagesObj["image"+index].width = $(this).height(); - that.insertAt(index,wrapper); + $img.load(function() { + var imgCache = that.imagesObj["image"+index]; + imgCache.element = this; + imgCache.loaded = true; + imgCache.width = $(this).width(); + imgCache.width = $(this).height(); + that.insertAt(index, $wrapper); that.resume(index); - }); + }); - } + }; /** * Resume @@ -139,12 +132,12 @@ * it also fires the complete action when the series of images finishes loading */ Plugin.prototype.resume = function(index){ + var $element = $(this.element); //first image has loaded if(index == 0) { this.startTransition(0); - $(this.element).find('.loader').hide(); - + $element.find('.loader').hide(); } //if the next image hasnt loaded yet, but the transition has started, @@ -152,33 +145,32 @@ // it will then resume the transition. if(index == this.holdup) { $('#status').html(""); - $(this.element).find('.loader').hide(); + $element.find('.loader').hide(); this.startTransition(this.holdup); } //if the last image in the set has loaded, add the images in order if(this.checkLoadProgress() == true) { //reset the opacities and z indexes except the last and first images - $(this.element).find('.stalled').each(function(){ - $(this).css({'opacity':1,'z-index':1}); - $(this).removeClass('stalled'); + $element.find('.stalled').each(function() { + $(this).css({ 'opacity': 1, 'z-index':1 }).removeClass('stalled'); }); - //fire the complete thing - this.options.onLoadingComplete(); + //fire the complete thing with 2 arguments: all images object and plugin element + this.options.onLoadingComplete(this.imagesObj, this.element); } - } + }; //if any of the slides are not loaded, the set has not finished loading. Plugin.prototype.checkLoadProgress = function() { var imagesLoaded = true; - for(i=0;i 0 && has3d !== "none"); + return has3d !== undefined && has3d.length > 0 && has3d !== "none"; } /** @@ -401,15 +391,16 @@ * added to the DOM */ Plugin.prototype.insertAt = function (index, element) { - var lastIndex = $(this.element).children().size(); + var $element = $(this.element), + lastIndex = $element.children().size(); if (index < 0) { index = Math.max(0, lastIndex + 1 + index); } - var imgWrapper = $(this.element).append(element); + $element.append(element); if (index < lastIndex) { - $(this.element).children().eq(index).before($(this.element).children().last()); + $element.children().eq(index).before($element.children().last()); } - } + }; $.fn[pluginName] = function ( options ) { return this.each(function () { @@ -418,6 +409,6 @@ new Plugin( this, options )); } }); - } + }; })( jQuery, window, document ); From bddb008656c273a689eeff0dec9b25a187599eee Mon Sep 17 00:00:00 2001 From: Sumartono Liu Date: Mon, 6 Jan 2014 20:28:56 +0800 Subject: [PATCH 2/3] =?UTF-8?q?Fix=20Wikipedia=20link=20markdown=20error,?= =?UTF-8?q?=20update=20callbacks=20doc,=20fix=20Jquery=20=E2=86=92=20jQuer?= =?UTF-8?q?y?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 37 ++++++++++++++++++++----------------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index a205ee6..d6444af 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,17 @@ Kenburns ======== - Kenburns.js is a lightweight and flexible Jquery gallery plugin that loads a list of images and transitions them using a pan-and-zoom, _[Ken Burns](http://en.wikipedia.org/wiki/Ken_Burns_effect)_ style effect. + Kenburns.js is a lightweight and flexible jQuery gallery plugin that loads a list of images and transitions them using a pan-and-zoom, *[Ken Burns](http://en.wikipedia.org/wiki/Ken_Burns_effect)* style effect. Example: Overview & Features ------------------- -Dude, another Jquery gallery? Wait, wait! Before you go, this one actually does a few pretty neat things: +Dude, another jQuery gallery? Wait, wait! Before you go, this one actually does a few pretty neat things: * Uses super smooth webkit and moz transitions * Built in feature detection for CSS3 transforms -* Uses Jquery Animations when CSS3 transforms are not available +* Uses jQuery Animations when CSS3 transforms are not available * Loads images in parallel but maintains the gallery order * Built-in event callbacks for loading complete, and transition complete @@ -82,11 +82,11 @@ Then initialize the plugin. In the example below, it should log the current slid duration:6000, fadeSpeed:800, ease3d:'ease-out', - onSlideComplete: function(){ - console.log('slide ' + this.getSlideIndex()); + onSlideComplete: function(currentSlideIndex, currentImageDOM, imagesObj, elm){ + console.log('slide ' + currentSlideIndex); }, - onLoadingComplete: function(){ - console.log('image loading complete'); + onLoadingComplete: function(imagesObj, elm){ + console.log(Object.getOwnPropertyNames(imagesObj).length + ' images loading complete'); } }); @@ -142,22 +142,25 @@ Millisecond value representing how long the transition will last *Note: The plug ######ease3d: _'string'_ Optional string value to control the easing of the transition. Accepts CSS3 easing functions like 'ease-out', 'ease-in-out', 'cubic-bezier()' -######onSlideComplete: _function()_ -A callback when each slide completes its transition. Used for things like changing the text relating to the image, etc +######onSlideComplete: _function(currentSlideIndex, currentImageDOM, imagesObj, elm)_ +A callback when each slide completes its transition. Used for things like changing the text relating to the image, etc. +Return 4 arguments: +* `currentSlideIndex` (Number) current slide index +* `currentImageDOM` (DOM) current showing image element +* `imagesObj` (JSON) all loaded images object +* `elm` (DOM) plugin element -######getSlideIndex: _function()_ -A public function that returns the index of the current slide. - -######onLoadingComplete: _function()_ +######onLoadingComplete: _function(imagesObj, elm)_ A callback function when the images have finished loading. +Return 4 arguments: +* `imagesObj` (JSON) all loaded images object +* `elm` (DOM) plugin element Dependencies ----- -Jquery 1.8.2. - -It will probably work fine in previous versions but it hasn't yet been tested. +jQuery 1.4.0 - 2.0.3 (tested) Credits @@ -166,7 +169,7 @@ by John the Toymaker
John @ Toymakerlabs
-Special thanks to: The [Jquery](http://www.jquery.com/) team and the [Jquery plugin boilerplate](http://jqueryboilerplate.com). And of course, as always, Stackoverflow and Google, and books, and greek-yogurt, and Boddingtons. And Crepevine. +Special thanks to: The [jQuery](http://www.jquery.com/) team and the [jQuery plugin boilerplate](http://jqueryboilerplate.com). And of course, as always, Stackoverflow and Google, and books, and greek-yogurt, and Boddingtons. And Crepevine. From 032592622e24042cca3ca10499a761bd633f69cb Mon Sep 17 00:00:00 2001 From: Sumartono Liu Date: Mon, 6 Jan 2014 20:31:44 +0800 Subject: [PATCH 3/3] Fix typos --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index d6444af..3609d71 100644 --- a/README.md +++ b/README.md @@ -26,11 +26,11 @@ Usage Basic plugin use looks like this: $("#wrapper").Kenburns({ - images:["image0.jpg", "image2.jpg"], - scale:1, + images: ["image0.jpg", "image2.jpg"], + scale: 1, duration:6000, fadeSpeed:800, - ease3d:ease-out + ease3d:'ease-out' }) @@ -152,7 +152,7 @@ Return 4 arguments: ######onLoadingComplete: _function(imagesObj, elm)_ A callback function when the images have finished loading. -Return 4 arguments: +Return 2 arguments: * `imagesObj` (JSON) all loaded images object * `elm` (DOM) plugin element