JBLOCKS, EFFET APPARITION DAMIER

/********************************************DO NOT REMOVE THIS PLEASE *********************************************
 *
 * script réalisé par Sébastien Pauwels
 * http://www.peekaboo-web.net
 *
 * juin 2010 - août 2010
 *
 * l'utilisation et la modification de ce script sont libres et autorisées
 *
 * utilisation :
 * -> téléchargez jQuery (http://docs.jquery.com/Downloading_jQuery)
 * -> appelez jQuery dans votre page
 * -> appelez jBlocks dans votre page
 * -> les images sur lesquelles ce script agit ont pour class "block-me"
 * 
 ********************************************************************************************************************/

nb=10;  //nombre de blocs   /!\ un nombre trop élevé peut ralentir l'exécution du script
tmax=5000; //temps d'apparition max des blocs   /!\ un nombre trop élevé peut ralentir l'exécution du script

max_=nb/2;
$(document).ready(function() {
    $(".block-me").hide();

    $(window).load(function () {


        //on parcourt toutes les images de la page et voit si elle doivent être traîtées par le script (si elles ont pour classe "block-me")
        
        var x = document.images;
        for (var i=0;i<x.length;i++)
        {
            if(x[i].className == "block-me") {

                x[i].setAttribute('id',"blocked-"+i);
                x[i].setAttribute('name',"blocked-"+i);
                block_it(i);
            }
        }
    });
});


function block_it(i) {
    //on crée une div à la place de l'image (même taille)...
    var img="#blocked-"+i;
    var img_src = $(img).attr("src");
    var w=$(img).width()/max_;
    var h=$(img).height()/max_;
    var n_b_div = document.createElement("div");
    n_b_div.className="j_content";
    n_b_div.style.width= $(img).width();
    n_b_div.style.height= $(img).height();
    n_b_div.id="j_content_"+i;
    n_b_div.style.cssFloat = "left";
    n_b_div.style.styleFloat= "left";
    n_b_div.style.margin = "0";
    n_b_div.setAttribute("style", n_b_div.getAttribute("style") + "; float:left; ");
    $(img).parent().append(n_b_div);
    var j_c="j_content_"+i;
    //... qui contient toutes les cases
    for (var k=0; k<max_; k++) {
        for (var j=0; j<max_; j++) {
            //on crée les cases (div "n_div")...
            var id_blocks="#blocked_blocks_"+i+"_"+k+"_"+j;            
            var n_div = document.createElement("div");
            var n_div2 = document.createElement("div");
            var b_l=-w*j;
            var b_t=-h*k;        
            n_div.style.width= w;
            n_div.style.height= h;
            n_div.style.styleFloat= "left";
            n_div.setAttribute("style", n_div.getAttribute("style") + "; float:left; ");
            n_div.id="blocked_blocks_"+i+"_"+k+"_"+j;
            var j_content="#j_content_"+i;
            $(j_content).append(n_div);
            //... qui contiennent chacune une div avec en image de fond l'image d'origine en position différente
            n_div2.style.backgroundImage="url("+img_src+")";
            n_div2.style.backgroundPosition=b_l+"px "+b_t+"px";
            n_div2.style.width= w;
            n_div2.style.height= h;
            n_div2.style.display= "none";            
            n_div2.id="blocked_blocks2_"+i+"_"+k+"_"+j;
            $(id_blocks).append(n_div2);           
        }
    }
    //en on appelle la fonction permettant l'effet fadeIn de jQuery
    move_it(i);
}

function move_it(i) {
    for (var k=0; k<max_; k++) {
        for (var j=0; j<max_; j++) {
            var t = Math.random()*tmax+1000;
            var id_blocks2="#blocked_blocks2_"+i+"_"+k+"_"+j;
            $(id_blocks2).fadeIn(t);
        }
    }
}