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 = 5;

// index d'origine
var current = 12;

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

// 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
});

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){
   // $c.css({position:"relative"});
    if(pos.fit)
            $e.show().css({top:pos.top,left:pos.left,width:pos.w.val,height:pos.h.val});
    else    { /*$c.css({background:"purple"});*/ $e.hide(); }
}

$.fn.splitIt = function(nfo,opt){
    var $t = $(this);
    var $c = $t.children();
    var $j = [];
    
    if(opt.start !== undefined && opt.nb !== undefined)
    {    var max = $c.length;
         var n = opt.start;
         var $ok = $();
         var number = opt.nb;
         while(number)
         {   while(n < 0) n = max+n;
             n = n%max;
             //console.log("=> "+n);
             var $current = $c.eq(n);
             $ok = $ok.add( $current );
             $j.push($current);
             n++;
             --number;
         }
         $c.not( $ok.show() ).hide();
         $c = $ok;
    }
    
    var height = $t.height();
    if(true === opt.autoHeight) height = -1;
    
    var content = {    w:$t.width() / $c.length,
                       h:height
                  };
    
    //alert($t.css("max-height"));
    
    //console.log(content);
    
    var...