sizr

ftw

by r043v

HTML

<div id="control">
    <span id="pprev"><<<</span>
    <span id="prev"><</span>
    <span id="next">></span>
    <span id="pnext">>>></span>
</div>
<div id="content">
    <div>hey</div>
    <div>hey2</div>
    <div>hey3</div>
    <div>hey4</div>
    <div>hey5</div>
    <div>hey6</div>
    <div>hey7</div>
    <div>hey8</div>
    <div>hey9</div>
    <div>hey10</div>
    <div>hey11</div>
    <div>hey12</div>
    <div id="pede"><img src="http://dread.tk/pede.gif"/></div>
    <div>hey yaa</div>
</div>

CSS

#content {  margin: 0 auto;
            top:10%;
            left:10%;
            width:80%;
            height:80%;
            position:absolute;
            background:purple;
            overflow:hidden;
}
#content > * { position:absolute; background:rgba(255,128,128,0.3); }
#content div:first-child  { background:yellow; }
#content div:nth-child(2) { background:rgba(128,255,128,0.5); }
#content div:nth-child(3) { background:rgba(128,128,255,0.3); }

#content > div > img { width:100%; }

#content div:nth-child(n+3) { display:none; }


#control { margin:0; padding:0; font-size:8vmin; height:10%; width:100%; position:absolute; top:0; left:0; }
#control span { cursor:pointer; float:left; text-align:center; width:25%; margin:0; padding:0; }
#control span:hover { color:purple; }

#pede img { position:absolute; }

JavaScript

// éléments par page
var bypage = 3;

// index d'origine
var current = 12;

// utiliser la hauteur d'origine du container (false) ou l'adapter au contenu (true)
var autoHeight = false;

// animer le ratio des éléments ?
var animateRatio = true;
var minRatio = 1.25;
var maxRatio = 1.75;

// contrainte des éléments
var e1 = {
    w:96, /* % */
    h:92,
    //minw:32, /* px */
   /* maxw:600,*/
    //minh:32,
    /*maxh:130,*/
    ratio:1.25, /* width / height */
};

// contrainte du contenu de l'élément 13 (l'image)
var pinfo = getLimit({
    w:100,
    h:100,
/*    minw:64,
    maxw:222,*/
    ratio:1.5
});

var transition = {
    hide:{  time:500,
            effect:'fadeOut'
         },
    show:{  time:600,
            effect:'fadeIn'
         },
    move:{  time:400,
            effect:'animate'
         }
};

function applyTransition($e,event,opt){
    var t = transition[event];
    var args = [];
    if(opt.args !== undefined) args.push(opt.args);
    if(opt.time !== undefined) args.push(opt.time);
    if(opt.callback !== undefined) args.push(opt.callback);
    
    console.log(t.effect+" "+args.length);
    
    switch(args.length){
        case 0:
            $e[t.effect]();
        break;
        case 1:
            $e[t.effect](args[0]);
        break;
        case 2:
            $e[t.effect](args[0],args[1]);
        break;
        case 3:
            console.log(args[0]+" "+args[1]+" "+args[2]);
            $e.animate(args[0],args[1],args[2]);
        break;
    };
}

/*applyTransition(
    $("#control"),
    'move',
    {    args:{ marginLeft:100 },
         time:1000,
         callback:function(){
             console.log("done");
         }
    } 
);*/

if(animateRatio){
    var rway = 0.02; // étapes du ratio
    setInterval(function(){
        e1.ratio += rway;
        if(e1.ratio > maxRatio || e1.ratio < minRatio) rway = -rway;
        info = getLimit( e1 );
        $(window).resize();
    },50);
}

function blit($e,$c,pos){
   //...