From 80b1be40233d162aa308ba5b1995ec88fc091fb9 Mon Sep 17 00:00:00 2001 From: Nikos M Date: Wed, 1 Apr 2020 23:08:23 +0300 Subject: [PATCH] diagonal-slideshow --- diagonal-slideshow/diagonal-slideshow.html | 3 +- diagonal-slideshow/diagonal-slideshow.js | 63 +++++++++++----------- 2 files changed, 35 insertions(+), 31 deletions(-) diff --git a/diagonal-slideshow/diagonal-slideshow.html b/diagonal-slideshow/diagonal-slideshow.html index 7148770..0918f36 100644 --- a/diagonal-slideshow/diagonal-slideshow.html +++ b/diagonal-slideshow/diagonal-slideshow.html @@ -7,10 +7,11 @@ Responsive Diagonal Slideshow with jQuery and CSS3 -
+
diff --git a/diagonal-slideshow/diagonal-slideshow.js b/diagonal-slideshow/diagonal-slideshow.js index c9eb547..7474562 100644 --- a/diagonal-slideshow/diagonal-slideshow.js +++ b/diagonal-slideshow/diagonal-slideshow.js @@ -43,10 +43,12 @@ function debounce( fn, delay ) function DiagonalSlideshow( el, options ) { - var holder, diags, W, H, wl, hl, index, timer = null, i, j, x, y, bx, by, w, margin, margin2, offset; + var self = this, holder, diags = null, W, H, wl, hl, index, timer = null, i, j, k, x, y, bx, by, w, side, margin, margin2, offset; + + if ( !(self instanceof DiagonalSlideshow) ) return new DiagonalSlideshow(el, options); var endTransition = function( ) { - if ( null != timer ) clearTimeout(timer); + clearTimeout(timer); holder.find('.diag-remove').remove(); index = (index+1) % options.images.length; var nextimg = new Image(); @@ -58,18 +60,16 @@ function DiagonalSlideshow( el, options ) }; var doTransition = function( ind ) { - var p = cutimage(options.images[ind], diags, W, H), i, ngroups, d, sd, animateoptions, last, max; + var p = cutimage(options.images[ind], diags, W, H), i, ngroups, d, sd, animateoptions; p = shuffle(p); ngroups = p.length; d = 1000*options.duration/(ngroups-(ngroups-1)*options.overlap); sd = d*(1-options.overlap); - //last = null; max = -1; for(i=0; i= max ) { last = i; max = i*sd; } } for(i=0; i').appendTo(holder)).css({ + left: String(x)+"px", + top: String(y)+"px", + width: String(side)+"px", + height: String(side)+"px" + }) + }; + } + offset = 0===offset ? -margin : 0; + } }; options = $.extend({ aspectRatio: 1.0, - side: 200, + size: 0.3, easing: 'linear', duration: 3, delay: 5, @@ -100,29 +126,6 @@ function DiagonalSlideshow( el, options ) $(window).on('resize', debounce(autoResize, 300)); autoResize(); - w = options.side*sqrt2; wl = 2*stdMath.ceil(W/w)+1; hl = 2*stdMath.ceil(H/w)+1; - margin = w/2; margin2 = margin/2; offset = 0; - - diags = []; - for (i=0;i').css({ - left: String(x)+"px", - top: String(y)+"px", - width: String(options.side)+"px", - height: String(options.side)+"px" - }).appendTo(holder) - }); - } - offset = 0===offset ? -margin : 0; - } - // init if ( 0 < options.images.length ) { @@ -141,7 +144,7 @@ $.fn.diagonalSlideshow = function( options ) { $(this).each(function(){ var $el = $(this); if ( !$el.data('diagonal-slideshow') ) - $el.data('diagonal-slideshow', new DiagonalSlideshow($el, options)); + $el.data('diagonal-slideshow', new $.DiagonalSlideshow($el, options)); }); return this; // chainable };