若图像较大，则在窗口中调整Lightbox容器

Question

我只是在寻找一种简单的方法，如果图像大于当前窗口大小，可以根据窗口大小设置Lightbox容器和图像的最大宽度和高度

假设图像为2000x1200，窗口为1280x1024，则div.lb-outerContainer和img.lb-image的max-height和max-width应设置为

$(window).height() - 286, $(window).width() - 60 

和

$(window).height() - 306, $(window).width() - 80

分别。

我只是在决定如何实施这些规则时遇到了一些麻烦。我在lightbox.js文件中执行此操作吗？如果是，在哪里？在它使用的页面上添加一些脚本可以接受吗？

Answer 1

这个答案不适用于灯箱——这只是.image与window 的一般缩放

var $window = $(window),
    $image = $(".image");
$image.load(function() {
    var windowHeight = $window.height(),
        windowWidth = $window.width(),
        imageHeight = $image.height(),
        imageWidth = $image.width(),
        radioHeight = windowHeight/imageHeight,
        radioWidth;
        if ( radioHeight < 1 ) {
            imageHeight *= radioHeight;
            imageWidth *= radioHeight;
        }
        radioWidth = windowWidth/imageWidth;
        if ( radioWidth < 1 ) {
            imageHeight *= radioWidth;
            imageWidth *= radioWidth;
        }
    $image.height( imageHeight );
    $image.width( imageWidth );
});

以及演示：http://jsbin.com/upisen/1/edit

Answer 2

这不会保持图像比例。你必须使用这样的东西：

$(function(){
$('SELECTOR FOR YOUR IMAGE').load(function() {
    this.removeAttribute( "height" );
    this.removeAttribute( "width" );
    this.style.height = this.style.width = "";
    $(this).data('w',this.width);
    $(this).data('h',this.height);
    ResizeGallery();
});
// on resize window 
$(window).resize(function() {
   ResizeGallery();
});
});

function ResizeGallery() {
    var img=$('SELECTOR FOR YOUR IMAGE');
    // remove attribute to get true size
    img.removeAttr( "height" );
    img.removeAttr( "width" );
    var w = img.data('w');
    var h = img.data('h'); 
    // compute maximum dimention
    var maxW = $(window).width()-300; //300= margin
    var maxH = $(window).height()-200;
    // compute zoom ratio and keep only the smallest
    // also ratio must not exceed 1
    var ratio=Math.max(1,Math.min(maxW/w, maxH/h));
    // compute new dimentions
    var newW = Math.floor(ratio*w);
    var newH = Math.floor(ratio*h);
    // apply to image
    img.css('height',newW ).css('width',newH );
}

假设您使用的是jquery