diff --git a/diagonal-slideshow/diagonal-slideshow.css b/diagonal-slideshow/diagonal-slideshow.css
index d1c3364..8c93052 100644
--- a/diagonal-slideshow/diagonal-slideshow.css
+++ b/diagonal-slideshow/diagonal-slideshow.css
@@ -1,31 +1,44 @@
.diag-container
{
-padding:0;
+ position:relative;
+ display:block;
+ margin:0;
+ padding:0;
+ border:0;
+ box-sizing:border-box;
+ overflow:hidden !important;
}
-ul.diag-list {
-list-style-type:none;
-position:relative;
+.diag-container > .diag
+{
+ position:absolute;
+ display:block;
+ margin:0;
+ padding:0;
+ border:0;
+ border:1px solid rgba(255,255,255,0.7);
+ box-sizing:border-box;
+ overflow:hidden !important;
+ transform-origin:center center;
+ transform:rotate(-45deg);
}
-ul.diag-list li {
-border: 1px solid #aaa;
-overflow: hidden;
-position: absolute;
--moz-transform: rotate(-45deg);
--o-transform: rotate(-45deg);
--webkit-transform: rotate(-45deg);
--ms-transform: rotate(0deg);
-transform: rotate(-45deg);
--ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678,sizingMethod='auto expand')";
-filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678,sizingMethod='auto expand');
-list-style-type:none;
+.diag > .diag-inside
+{
+ position:absolute;
+ display:block;
+ margin:0;
+ padding:0;
+ border:0;
+ box-sizing:border-box;
+ overflow:hidden !important;
+ transform-origin:center center;
+ transform:rotate(45deg);
+ z-index:10;
+ background-image:none;
+ background-position:0 0;
+ background-repeat:no-repeat;
+ background-size:100% auto;
}
-
-ul.diag-list li .diag-inside{
-position: absolute;
-cursor: pointer;
--moz-transform: rotate(45deg);
--o-transform: rotate(45deg);
--webkit-transform: rotate(45deg);
--ms-transform: rotate(45deg);
-transform: rotate(45deg);
+.diag > .diag-remove
+{
+ z-index:0 !important;
}
diff --git a/diagonal-slideshow/diagonal-slideshow.html b/diagonal-slideshow/diagonal-slideshow.html
index ae42656..7148770 100644
--- a/diagonal-slideshow/diagonal-slideshow.html
+++ b/diagonal-slideshow/diagonal-slideshow.html
@@ -1,20 +1,17 @@
+
-
-Diagonal Slideshow with jQuery and CSS3
+Responsive Diagonal Slideshow with jQuery and CSS3
-
-
-
+
+
diff --git a/diagonal-slideshow/diagonal-slideshow.js b/diagonal-slideshow/diagonal-slideshow.js
index a5ed999..c9eb547 100644
--- a/diagonal-slideshow/diagonal-slideshow.js
+++ b/diagonal-slideshow/diagonal-slideshow.js
@@ -1,227 +1,149 @@
(function($){
- var images,$ul,coords,wl,hl,duration,overlap,easing,delay,index,timer=null;
-
- var cutimage=function(img,hl,wl,coords)
- {
- var el=[];
- for (var i=0;i");
- $div.css({position:"absolute","z-index":100,left:coords[j+hl*i].left+"px",top:coords[j+hl*i].top+"px",width:coords[j+hl*i].side+"px", height:coords[j+hl*i].side+"px","background-position":coords[j+hl*i].posx+"px "+coords[j+hl*i].posy+"px","background-image":"url("+img+")","background-repeat":"no-repeat"});
- el.push({piece:$div,li:coords[j+hl*i].li});
- }
- }
- }
- return(el);
- };
-
- //+ Jonas Raoni Soares Silva
- //@ http://jsfromhell.com/array/shuffle [v1.0]
- var shuffle = function(o){ //v1.0
- for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
- return o;
- };
-
- var endTransition=function(){
- if (timer!=null)
- clearTimeout(timer);
- $ul.children("li").children(".diag-remove").remove();
- index=(index+1)%images.length;
- var nextimg=new Image();
- nextimg.onload=function(){
- setTimeout(function(){doTransition(index);},1000*delay);
- };
- nextimg.onerror=nextimg.onload;
- nextimg.src=images[index];
- };
-
- var doTransition=function(ind)
- {
- var p=cutimage(images[ind],wl,hl,coords);
-
- for (var i=0;i");
- $cont.appendTo($this);//$this.append($cont);
- $ul=$("");
- $ul.appendTo($cont); //$cont.append($ul);
- coords=[];
- wl=Math.round(w/side);
- hl=Math.round(h/side);
- // re-adjust side if not exact multiple
- side=Math.min(Math.round(w/wl),Math.round(h/hl));
- //var mrg=Math.floor(Math.sin(Math.PI/4)*Math.sqrt(2*(side*side)));
- // angle is 45 degrees
- var mrg=Math.floor(0.5*Math.sqrt(2*(side*side)));
- var mrg2=0.5*mrg;
- var mrgx2=2*mrg;
- wl=Math.round((w/mrg));
- hl=Math.round((0.5*h/mrg))+1;
- $cont.css({position:"relative",/*"margin-left":mrg2+"px",*/"margin-top":/*mrg+*/mrg2+"px",width:(w)+"px",height:(h)+"px"});
- var offset=0;
- //console.log(mrg,wl,hl);
- for (i=0;i");
- $li.css({position:"absolute",width:(side)+"px", height:(side)+"px",left:(i*(mrg))+"px",top:(j*(mrgx2)+offset)+"px"});
- var imgx=(-i*(mrg));
- var imgy=(-j*(mrgx2)-offset);
- coords[j+hl*i]={li:$li,i:i,j:j,posx:imgx,posy:imgy,top:-mrg2,left:-mrg2,side:side+mrg,vis:false};
- // skip showing empty cells (no image)
- if (options.strict)
- {
- if (-imgx<(w-mrgx2) && -imgy<(h-mrgx2) && imgx<=0 && imgy<=0)
- {
- $li.appendTo($ul); //$cont.append(el);
- coords[j+hl*i].vis=true;
- }
- }
- else
- {
- if (-imgx<(w) && -imgy<(h))
- {
- $li.appendTo($ul); //$cont.append(el);
- coords[j+hl*i].vis=true;
- }
- }
- }
- if (offset==0)
- {
- offset=-mrg;
- }
- else
- {
- offset=0;
- }
- }
-
- // init
- if (images.length>0)
- {
- index=0;
- var nextimg=new Image();
- nextimg.onload=function(){
- doTransition(index);
- };
- nextimg.onerror=nextimg.onload;
- nextimg.src=images[index];
- }
+"use strict";
+
+var stdMath = Math, sqrt2 = stdMath.sqrt(2);
+
+function cutimage( img, diags, W, H )
+{
+ var divs = [], diag, k;
+ for(k=0; k').css({
+ left: String(-diag.margin/2)+"px",
+ top: String(-diag.margin/2)+"px",
+ width: String(diag.side+diag.margin)+"px",
+ height: String(diag.side+diag.margin)+"px",
+ "background-position": String(diag.imgx)+"px "+String(diag.imgy)+"px",
+ "background-size": String(W)+"px auto",
+ "background-image": 'url("'+img+'")'
+ }).appendTo(diag.div));
+ }
+ return divs;
+}
+
+function shuffle( a )
+{
+ //v1.0
+ for(var j, x, i = a.length; i; j = ~~(stdMath.random() * i), x = a[--i], a[i] = a[j], a[j] = x);
+ return a;
+}
+
+function debounce( fn, delay )
+{
+ var timer = null;
+ return function( ) {
+ var context = this, args = arguments;
+ clearTimeout(timer);
+ timer = setTimeout(function () {
+ fn.apply(context, args);
+ }, 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 endTransition = function( ) {
+ if ( null != timer ) clearTimeout(timer);
+ holder.find('.diag-remove').remove();
+ index = (index+1) % options.images.length;
+ var nextimg = new Image();
+ nextimg.onload = function(){
+ setTimeout(function(){doTransition(index);}, 1000*options.delay);
+ };
+ nextimg.onerror = nextimg.onload;
+ nextimg.src = options.images[index];
+ };
+
+ var doTransition = function( ind ) {
+ var p = cutimage(options.images[ind], diags, W, H), i, ngroups, d, sd, animateoptions, last, max;
+
+ 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');
+ holder.appendTo(el.empty());
+
+ $(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 )
+ {
+ index = 0;
+ var nextimg = new Image( );
+ nextimg.onload = function( ) {
+ doTransition(index);
+ };
+ nextimg.onerror = nextimg.onload;
+ nextimg.src = options.images[index];
+ }
+}
+
+$.DiagonalSlideshow = DiagonalSlideshow;
+$.fn.diagonalSlideshow = function( options ) {
+ $(this).each(function(){
+ var $el = $(this);
+ if ( !$el.data('diagonal-slideshow') )
+ $el.data('diagonal-slideshow', new DiagonalSlideshow($el, options));
+ });
+ return this; // chainable
};
-})(jQuery);
-
-
-/*
-$(function(){
-
- var $desc = $('.desc');
- var $main = $('#main');
-
- $('li').click(function() {
-
- var $self = $(this),
- _feature_id = $self.attr('data-id'),
- _content = $self.find('.content').html();
-
-
- // add/remove featured work class
- $main.removeClass().addClass('feature ' + _feature_id);
-
-
- // find content depending on what project is loaded
- $desc.html(_content);
-
-
- _intro();
- });
-
-
- function _intro() {
-
- //animate the full-screen project image
- $('li[data-id] .wrap').each(
-
- function(index) {
-
- $(this)
- .stop()
- .css({ opacity: 0 })
- .animate({ padding: 0 }, 50*index)
- .animate({ opacity: 1 }, 500,'easeOutCubic' );
- }
-
- );
-
- //animate the project content
- $desc
- .stop()
- .css({ opacity: 0})
- .animate({ opacity: 1}, 500, 'easeInOutQuart');
-
- }
-
-
-
-
-
-
-});
-
-
-
-jQuery.easing["jswing"]=jQuery.easing["swing"];jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(x,t,b,c,d){return jQuery.easing[jQuery.easing.def](x,t,b,c,d);},easeInQuad:function(x,t,b,c,d){return c*(t/=d)*t+b;},easeOutQuad:function(x,t,b,c,d){return -c*(t/=d)*(t-2)+b;},easeInOutQuad:function(x,t,b,c,d){if((t/=d/2)<1){return c/2*t*t+b;}return -c/2*((--t)*(t-2)-1)+b;},easeInCubic:function(x,t,b,c,d){return c*(t/=d)*t*t+b;},easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b;},easeInOutCubic:function(x,t,b,c,d){if((t/=d/2)<1){return c/2*t*t*t+b;}return c/2*((t-=2)*t*t+2)+b;},easeInQuart:function(x,t,b,c,d){return c*(t/=d)*t*t*t+b;},easeOutQuart:function(x,t,b,c,d){return -c*((t=t/d-1)*t*t*t-1)+b;},easeInOutQuart:function(x,t,b,c,d){if((t/=d/2)<1){return c/2*t*t*t*t+b;}return -c/2*((t-=2)*t*t*t-2)+b;},easeInQuint:function(x,t,b,c,d){return c*(t/=d)*t*t*t*t+b;},easeOutQuint:function(x,t,b,c,d){return c*((t=t/d-1)*t*t*t*t+1)+b;},easeInOutQuint:function(x,t,b,c,d){if((t/=d/2)<1){return c/2*t*t*t*t*t+b;}return c/2*((t-=2)*t*t*t*t+2)+b;},easeInSine:function(x,t,b,c,d){return -c*Math.cos(t/d*(Math.PI/2))+c+b;},easeOutSine:function(x,t,b,c,d){return c*Math.sin(t/d*(Math.PI/2))+b;},easeInOutSine:function(x,t,b,c,d){return -c/2*(Math.cos(Math.PI*t/d)-1)+b;},easeInExpo:function(x,t,b,c,d){return (t==0)?b:c*Math.pow(2,10*(t/d-1))+b;},easeOutExpo:function(x,t,b,c,d){return (t==d)?b+c:c*(-Math.pow(2,-10*t/d)+1)+b;},easeInOutExpo:function(x,t,b,c,d){if(t==0){return b;}if(t==d){return b+c;}if((t/=d/2)<1){return c/2*Math.pow(2,10*(t-1))+b;}return c/2*(-Math.pow(2,-10*--t)+2)+b;},easeInCirc:function(x,t,b,c,d){return -c*(Math.sqrt(1-(t/=d)*t)-1)+b;},easeOutCirc:function(x,t,b,c,d){return c*Math.sqrt(1-(t=t/d-1)*t)+b;},easeInOutCirc:function(x,t,b,c,d){if((t/=d/2)<1){return -c/2*(Math.sqrt(1-t*t)-1)+b;}return c/2*(Math.sqrt(1-(t-=2)*t)+1)+b;},easeInElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0){return b;}if((t/=d)==1){return b+c;}if(!p){p=d*0.3;}if(a