jquery - 将 slimbox(灯箱)图像限制为窗口大小

Question

大家好，

任何人都知道如何将 slimbox 的覆盖窗口大小限制为用户窗口大小的百分比(就像 Prettyphoto 那样)

谢谢

这是模块代码: http://paste.ly/3Kz

还有 slimbox js: http://paste.ly/3L0

Answer 1

实际上，您的解决方案都没有完全适合我，所以我必须将它们放入 blender 中，然后通过这样做来混合结果:

正如他所说，请留意 slimbox2.js 中的这一行

w(g).css({backgroundImage:"url("+n+")",visibility:"hidden",display:""});
w(p).width(k.width);
w([p,I,d]).height(k.height);

并将它们替换为以下 block :

        var winWidth  = window.innerWidth  - 20;
        var winHeight = window.innerHeight - 120;
        if (winWidth > winHeight) { 
            var maxSize = winHeight; 
        } else { 
            var maxSize = winWidth;
        }

        /* determine proper w and h for img, based on original image'w dimensions and maxSize */
        var my_w = k.width; 
        var my_h = k.height;            

        if (my_w > my_h) {
            my_h = maxSize * my_h / my_w;
            my_w = maxSize;
        } else {
            my_w = maxSize * my_w / my_h;
            my_h = maxSize;
        }

        if (k.width > my_w || k.height > my_h){ /* constrain it */
            w(g).css({backgroundImage:"url("+n+")",backgroundSize:""+my_w+"px "+my_h+"px",visibility:"hidden",display:""});
            w(p).width(my_w);
            w([p,I,d]).height(my_h);    
        }
        else { /* default behaviour  NORMAL before hackeing*/
            w(g).css({backgroundImage:"url("+n+")",backgroundSize:"",visibility:"hidden",display:""});
            w(p).width(k.width);
            w([p,I,d]).height(k.height);            
        }       

*请客气一点，我是一名处于早期阶段的业余开发者;)