From 37c159055fc91f60d73b091a2032cc23e619856c Mon Sep 17 00:00:00 2001 From: Roman Abt Date: Thu, 3 Nov 2016 17:41:37 +0100 Subject: [PATCH 1/2] jquery3 compatible and responsive .load() was removed > changed to .one() .bind() is deprecated > changed to .on() new jquery requirement is min. 1.7 --- jquery.cyclotron.js | 32 +++++++++++++++++++++++++------- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/jquery.cyclotron.js b/jquery.cyclotron.js index 19f46f4..1cfd37c 100644 --- a/jquery.cyclotron.js +++ b/jquery.cyclotron.js @@ -1,7 +1,7 @@ (function ($) { $.fn.cyclotron = function (options) { return this.each(function () { - var container, sx, dx = 0, armed, offset = 0, tick, prev, h = [], max=0, min=0; + var container, sx, dx = 0, armed, offset = 0, tick, prev, h = [], max=0, min=0, imgW=0, imgH=0; container = $(this); var settings = $.extend({ dampingFactor: 0.93, @@ -9,6 +9,8 @@ autorotation: 0, continuous: 1 }, options); + // scale background image to fit container height + container.css('background-size', 'auto 100%'); // check for dampingFactor in range if((settings.dampingFactor>1 || settings.dampingFactor<0)) { if (typeof console==='object') { @@ -24,8 +26,12 @@ if(settings.continuous===0) { var image_url = container.css('background-image').replace(/^url\(["']?/, '').replace(/["']?\)$/, ''); var image = new Image(); - $(image).load(function () { - max=image.width - container.width(); + $(image).one('load', function () { + // store dimensions of image + imgW = image.width; + imgH = image.height; + // set Dimensions + onResize(); }); image.src = image_url; } @@ -34,13 +40,25 @@ armed=false; dx=settings.autorotation; } - container.bind('touchstart mousedown', function (e) { + onResize = function(){ + if(imgH > 0){ + // recalculate max (container width might have changed) + max=imgW *(container.height() / imgH) - container.width(); + if(!armed){ + checkOffset(); + container.css('background-position', offset); + } + } + }; + // add resize event listener + $( window ).on('resize', onResize); + container.on('touchstart mousedown', function (e) { var px = (e.pageX>0?e.pageX:e.originalEvent.touches[0].pageX); sx = px - offset; armed = true; e.preventDefault(); }); - container.bind('touchmove mousemove', function (e) { + container.on('touchmove mousemove', function (e) { if (armed) { var px = (e.pageX>0?e.pageX:e.originalEvent.touches[0].pageX); if (typeof prev==='undefined') { @@ -56,7 +74,7 @@ prev = px; } }); - container.bind('mouseleave mouseup touchend', function () { + container.on('mouseleave mouseup touchend', function () { if (armed) { var len = h.length, v = h[len - 1]; for (var i = 0; i < len; i++) { @@ -94,7 +112,7 @@ requestAnimFrame(animloop); tick(); })(); - function checkOffset() { + checkOffset = function() { if(settings.continuous===0) { if (-offset Date: Thu, 3 Nov 2016 17:47:43 +0100 Subject: [PATCH 2/2] update minified code --- jquery.cyclotron.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.cyclotron.min.js b/jquery.cyclotron.min.js index 751eeba..daf4224 100644 --- a/jquery.cyclotron.min.js +++ b/jquery.cyclotron.min.js @@ -1 +1 @@ -(function(a){a.fn.cyclotron=function(b){return this.each(function(){var d,q,r=0,c,k=0,n,g,m=[],p=0,j=0;d=a(this);var f=a.extend({dampingFactor:0.93,historySize:5,autorotation:0,continuous:1},b);if((f.dampingFactor>1||f.dampingFactor<0)){if(typeof console==="object"){console.log("dampingFactor out of range "+f.dampingFactor)}f.dampingFactor=0.93}if(f.continuous===1&&d.hasClass("nonContinuous")){f.continuous=0}if(f.continuous===0){var o=d.css("background-image").replace(/^url\(["']?/,"").replace(/["']?\)$/,"");var e=new Image();a(e).load(function(){p=e.width-d.width()});e.src=o}if(f.autorotation!=0){c=false;r=f.autorotation}d.bind("touchstart mousedown",function(s){var h=(s.pageX>0?s.pageX:s.originalEvent.touches[0].pageX);q=h-k;c=true;s.preventDefault()});d.bind("touchmove mousemove",function(s){if(c){var h=(s.pageX>0?s.pageX:s.originalEvent.touches[0].pageX);if(typeof g==="undefined"){g=h}k=h-q;if(m.length>f.historySize){m.shift()}m.push(g-h);i();d.css("background-position",k);g=h}});d.bind("mouseleave mouseup touchend",function(){if(c){var h=m.length,s=m[h-1];for(var t=0;tp){r=0;k=-p}}}})}}(jQuery));jQuery(document).ready(function(){$(".cyclotron").cyclotron()}); +!function(a){a.fn.cyclotron=function(b){return this.each(function(){var c,d,f,h,i,e=0,g=0,j=[],k=0,l=0,m=0,n=0;c=a(this);var o=a.extend({dampingFactor:.93,historySize:5,autorotation:0,continuous:1},b);if(c.css("background-size","auto 100%"),(o.dampingFactor>1||o.dampingFactor<0)&&("object"==typeof console&&console.log("dampingFactor out of range "+o.dampingFactor),o.dampingFactor=.93),1===o.continuous&&c.hasClass("nonContinuous")&&(o.continuous=0),0===o.continuous){var p=c.css("background-image").replace(/^url\(["']?/,"").replace(/["']?\)$/,""),q=new Image;a(q).one("load",function(){m=q.width,n=q.height,onResize()}),q.src=p}0!=o.autorotation&&(f=!1,e=o.autorotation),onResize=function(){n>0&&(k=m*(c.height()/n)-c.width(),f||(checkOffset(),c.css("background-position",g)))},a(window).on("resize",onResize),c.on("touchstart mousedown",function(a){var b=a.pageX>0?a.pageX:a.originalEvent.touches[0].pageX;d=b-g,f=!0,a.preventDefault()}),c.on("touchmove mousemove",function(a){if(f){var b=a.pageX>0?a.pageX:a.originalEvent.touches[0].pageX;"undefined"==typeof i&&(i=b),g=b-d,j.length>o.historySize&&j.shift(),j.push(i-b),checkOffset(),c.css("background-position",g),i=b}}),c.on("mouseleave mouseup touchend",function(){if(f){for(var a=j.length,b=j[a-1],c=0;ck&&(e=0,g=-k))}})}}(jQuery),jQuery(document).ready(function(){$(".cyclotron").cyclotron()});