0

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

所以说图像是2000x1200，窗口是1280x1024，那么max-heightandmax-width的div.lb-outerContainerandimg.lb-image应该设置为

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

和

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

分别。

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

4

2 回答 2

0

这个答案不适用于灯箱，这只是.imagevs的一般缩放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

于 2012-08-30T09:43:26.463 回答
0

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

$(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

于 2012-08-30T09:44:51.393 回答