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

(function( $ ) {
    
    var fitit = {
        init:function(nfo){
            console.log( $(this).text() );
            /*$(this).data('fitit',{
                limit:getLimit(nfo)
            });*/
        },
        refresh:function(){
        //    this.data('fitit').getPosition
        }
    };
    
    var evts = Object.keys(jQuery.event.special).join(" ");
    
    $.fn.fitit = function(opts){
        this.on('init',fitit.init).on('refresh',fitit.refesh);
        this.on(evts, function (e) {
            console.log(e);
        });
        return this.each(function() {
            
        }).trigger('init');
    };
    
    function getPosition(c,limit){
        var w = -1, h = -1;
        var s = $.extend(true,{},limit);
        
        // ratio
        if(s.r !== undefined && s.r !== 0)
        {   // get width in %
            if(c.w !== -1 && s.w.nom !== undefined && s.w.nom !== -1)
            {    if(w === -1)    w = c.w*s.w.nom/100;
                 else            w = Math.min(w,c.w*s.w.nom/100);
                 
                 if(h === -1)    h = w/s.r;
                 else            h = Math.min(h,w/s.r);
            }
    
            // get height in %
            if(c.h !== -1 && s.h.nom !== undefined && s.h.nom !== -1)
            {    if(h === -1)    h = c.h*s.h.nom/100;
                 else            h = Math.min(h,c.h*s.h.nom/100);
                 
                 if(w === -1)    w = h*s.r;
                 else            w = Math.min(w,h*s.r);
            }
         
            // cap values     
            if(w > s.w.max && s.w.max > 0)
            {    w = s.w.max;
                 h = w/s.r;
            } else
            if(w < s.w.min && s.w.min > 0)
            {    w = s.w.min;
                 h = w/s.r;
            }
    
            if(h > s.h.max && s.h.max > 0)
            {    h = s.h.max;
                 w = h*s.r;
            } else
            if(h < s.h.min && s.h.min > 0)
            {    h = s.h.min;
   ...