Change images

One day, on the Internet, I came across one wonderful gallery - I forgot the address, but its idea remained in my memory. And then one of the sites needed some kind of non-standard picture change (attenuation and collapse already become boring) And so I remembered about it.



The essence of what? So that the image was opened in parts (squares, stripes, etc.), and not only did it appear, but so that all this was crammed with effects.
')
Well, let's get started.


First, let's make a small config
change_img={
x:7,
y:10,
sort:4,
delay:{
st:5000,
animate:1000,
cadr:50
},
div_id: 'slider_photo'
}

* This source code was highlighted with Source Code Highlighter .

change_img={
x:7,
y:10,
sort:4,
delay:{
st:5000,
animate:1000,
cadr:50
},
div_id: 'slider_photo'
}

* This source code was highlighted with Source Code Highlighter .

I think everything is simple and clear. Number of rows \ columns, sorting type (about it later), delay when changing, and id diva with photos.

The essence is this - our div with pictures is filled with little divas with positioned background and are already turning as we want.

we first calculate the width and height of our squares
r=$( '#' +change_img.div_id+ ' img' );
change_img_x=(r[0].height/change_img.x+ '' ).replace(/(.*)\.(.*)/, "$1" )-1+1;
change_img_y=(r[0].width/change_img.y+ '' ).replace(/(.*)\.(.*)/, "$1" )-1+1;

* This source code was highlighted with Source Code Highlighter .

r=$( '#' +change_img.div_id+ ' img' );
change_img_x=(r[0].height/change_img.x+ '' ).replace(/(.*)\.(.*)/, "$1" )-1+1;
change_img_y=(r[0].width/change_img.y+ '' ).replace(/(.*)\.(.*)/, "$1" )-1+1;

* This source code was highlighted with Source Code Highlighter .

Now we fill our div with these very squares.
function create_div_img(){
x=0;
for (i=0;i<change_img.x;i++)
for (k=0;k<change_img.y;k++){

d= document .createElement( 'DIV' );
$(d).css({
position: 'absolute' ,
top:change_img_x*i+ 'px' ,
left:change_img_y*k+ 'px' ,
opacity:0,
'z-index' :10,
background: 'url("' +src_i[x]+ '")' ,
'backgroun-position' : '-' +(change_img_y*k)+ 'px-' +(change_img_x*i)+ 'px'
});
d.className= 'img_change_s_0' ;d.style.backgroundPosition= '-' +(change_img_y*k)+ 'px -' +(change_img_x*i)+ 'px' ;

document .getElementById( 'img_change_' +x).appendChild(d);
}
}

* This source code was highlighted with Source Code Highlighter .

function create_div_img(){
x=0;
for (i=0;i<change_img.x;i++)
for (k=0;k<change_img.y;k++){

d= document .createElement( 'DIV' );
$(d).css({
position: 'absolute' ,
top:change_img_x*i+ 'px' ,
left:change_img_y*k+ 'px' ,
opacity:0,
'z-index' :10,
background: 'url("' +src_i[x]+ '")' ,
'backgroun-position' : '-' +(change_img_y*k)+ 'px-' +(change_img_x*i)+ 'px'
});
d.className= 'img_change_s_0' ;d.style.backgroundPosition= '-' +(change_img_y*k)+ 'px -' +(change_img_x*i)+ 'px' ;

document .getElementById( 'img_change_' +x).appendChild(d);
}
}

* This source code was highlighted with Source Code Highlighter .

Well, everything is simple - 2 cycles to create squares with absolute positioning

and now the function itself which creates a smooth extension of these parts
function div_animate(){
s=0;
setTimeout(ferter,change_img.delay.cadr);
function ferter(){
if (s>=change_img.x*change_img.y) return ;
$(referrer[arr_chagr[s++]]).animate({opacity:1,width:change_img_y,height:change_img_x},change_img.delay.animate);
setTimeout(ferter,change_img.delay.cadr);
}
}

* This source code was highlighted with Source Code Highlighter .

function div_animate(){
s=0;
setTimeout(ferter,change_img.delay.cadr);
function ferter(){
if (s>=change_img.x*change_img.y) return ;
$(referrer[arr_chagr[s++]]).animate({opacity:1,width:change_img_y,height:change_img_x},change_img.delay.animate);
setTimeout(ferter,change_img.delay.cadr);
}
}

* This source code was highlighted with Source Code Highlighter .

Here, too, everything is clear - by timing the animation causes a new square. I refused from setInterval, because when the browser is folded and unfolded (any) it crashes and the squares begin to appear almost simultaneously.

Now, if you carefully reviewed the code, you saw the array arr_chagr, which is not (yet) declared anywhere and does nothing.
This array is responsible for the sequence of the appearance of squares. First, in the config, we set the sorting type (0-5).

Now consider this feature.
function get_array_change(x){
reff= new Array();
for (i=0;i<x;i++)reff[i]=i;
switch (change_img.sort){
default :
case 0: return reff; break ;
case 1: return reff.reverse(); break ;
case 2: return array_x(); break ;
case 3: return array_x().reverse(); break ;
case 4: return array_casc(); break ;
case 5: return array_casc().reverse(); break ;
}
function array_x(){
arr= new Array();es=0;
for (i=0;i<change_img.y;i++)
for (k=0;k<change_img.x;k++){
arr[es++]=reff[i+k*change_img.y];
}
return arr;
}
function array_casc(){
arr= new Array();sr=change_img.y-change_img.x;
es=0;rem_x=-1;fer_y=0;rif=-1;
for (i=0;i<change_img.x;i++){
rif++;gren=0;
rem_x+=rif+1;fer_y=rif;
keyt=rem_x;miss=0;
for (k=0;k<change_img.y;k++){
if (k)keyt+=fer_y;
if (fer_y<change_img.x&&!gren)fer_y++;
else {miss++} if (miss>=sr&&k){fer_y--;gren=1;}
arr[keyt]=reff[es++];
}
}
return arr;
}
}

* This source code was highlighted with Source Code Highlighter .

function get_array_change(x){
reff= new Array();
for (i=0;i<x;i++)reff[i]=i;
switch (change_img.sort){
default :
case 0: return reff; break ;
case 1: return reff.reverse(); break ;
case 2: return array_x(); break ;
case 3: return array_x().reverse(); break ;
case 4: return array_casc(); break ;
case 5: return array_casc().reverse(); break ;
}
function array_x(){
arr= new Array();es=0;
for (i=0;i<change_img.y;i++)
for (k=0;k<change_img.x;k++){
arr[es++]=reff[i+k*change_img.y];
}
return arr;
}
function array_casc(){
arr= new Array();sr=change_img.y-change_img.x;
es=0;rem_x=-1;fer_y=0;rif=-1;
for (i=0;i<change_img.x;i++){
rif++;gren=0;
rem_x+=rif+1;fer_y=rif;
keyt=rem_x;miss=0;
for (k=0;k<change_img.y;k++){
if (k)keyt+=fer_y;
if (fer_y<change_img.x&&!gren)fer_y++;
else {miss++} if (miss>=sr&&k){fer_y--;gren=1;}
arr[keyt]=reff[es++];
}
}
return arr;
}
}

* This source code was highlighted with Source Code Highlighter .

It gets the x-number of elements in the array (arr_chagr = get_array_change (change_img.x * change_img.y);)
Well, the first 2 cases are all clear - a simple and expanded array.



Then there are 2 cases - Same as, but only vertical sorting (array_x () function).



And the last - sort by cascade. I find it very difficult to describe it in words - I will only say that this sorting only works if the number of columns> the number of rows. (change_img.y> change_img.x).



something else about cascading sorting - The problem also was that at first the picture opens quickly enough, but when it comes to the middle it starts slower and slower. Well, in principle, it is correct - in order to display the first diagonal, 1 square is required, 2 - 2. The maximum number of squares - 7, which is 7 times longer than 1 diagonal, 3.5 times longer than 2, etc., goes to the diagonal in the center. d.
I had to replace the standard function div_animate () with

function div_animate(){
s=0;
if (change_img.sort==4||change_img.sort==5){
change_img.delay.cadr=regular;
del_rem=change_img.x*change_img.y/2;
}
setTimeout(ferter,change_img.delay.cadr);
function ferter(){
if (s>=change_img.x*change_img.y) return ;
$(referrer[arr_chagr[s++]]).animate({opacity:1,width:change_img_y,height:change_img_x},change_img.delay.animate);
if (change_img.sort==4||change_img.sort==5){
if (s<del_rem)setTimeout(ferter,change_img.delay.cadr-=change_img.delay.cadr/25);
else setTimeout(ferter,change_img.delay.cadr+=change_img.delay.cadr/25);
}
else setTimeout(ferter,change_img.delay.cadr);
}
}

* This source code was highlighted with Source Code Highlighter .

The point is this - until the script has gone half the squares, the interval between opening them is extended by the standard interval / 25 (change_img.delay.cadr / 25) and then increases by the same number of ms. As a result, the difference in speed between the beginning and middle of the image is almost not noticeable.

Well that's all.

html code for all this

"slider_photo">
"/template/img/1.jpg" />
"/template/img/2.jpg" "slider_photo">
"/template/img/1.jpg" />
"/template/img/2.jpg" />
"/template/img/3.jpg"

/>


* This source code was highlighted with Source Code Highlighter .

A beautiful change of pictures that is easy to embed in any site and also easy to customize is ready.
even works in IE.

Unfortunately, I can’t lay out an example because there is little need for my own site.
All code can be viewed and downloaded here .

upd Demo can be seen here

upd2 Changed the code. Now implemented by functions on almost pure js (jquery is used only for animation) Thanks Seldon