Question

我在我的图片库中使用了jquery lighbox，但是由于图像尺寸可变，灯箱尺寸不固定因此打开图像的原始尺寸，这反过来导致biga图像离开屏幕和显示浏览器中的水平滚动条。

因此，我正在寻找将修正宽度和高度应用于灯箱的方法，以便每个图像都必须在灯箱中以此尺寸显示。

请帮助..

更新

我刚试过Scott（http://geekswithblogs.net/wojan/archive/2009/06/17/jquerylightbox.aspx）给我的解决方案，我这样做了，

function _resize_container_image_box(intImageWidth,intImageHeight) {
// Get current width and height
//rescale if necessary
if((settings.maxWidth != null && settings.maxHeight != null) && (intImageWidth > settings.maxWidth || intImageHeight > settings.maxHeight)){
var isWider = intImageWidth > intImageHeight;//is the image wide or tall?
var scale = isWider ? settings.maxWidth/intImageWidth : settings.maxHeight/intImageHeight;
intImageWidth = intImageWidth * scale;
intImageHeight = intImageHeight * scale;
}

$('#lightbox-image').height(intImageHeight); 
$('#lightbox-image').width(intImageWidth); 
var intCurrentWidth = $('#lightbox-container-image-box').width();
var intCurrentHeight = $('#lightbox-container-image-box').height();
// Get the width and height of the selected image plus the padding
var intWidth = (intImageWidth + (settings.containerBorderSize * 2)); // Plus the image´s width and the left and right padding value
var intHeight = (intImageHeight + (settings.containerBorderSize * 2)); // Plus the image´s height and the left and right padding value
// Diferences
var intDiffW = intCurrentWidth - intWidth;
var intDiffH = intCurrentHeight - intHeight;
// Perfomance the effect
$('#lightbox-container-image-box').animate({ width: intWidth, height: intHeight },settings.containerResizeSpeed,function() { _show_image(); });
if ( ( intDiffW == 0 ) && ( intDiffH == 0 ) ) {
if ( $.browser.msie ) {
___pause(250);
} else {
___pause(100);  
}
} 
$('#lightbox-container-image-data-box').css({ width: intImageWidth });
$('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ height: intImageHeight + (settings.containerBorderSize * 2) });
};

和

$('#gallery a').lightBox( maxHeight: null,
maxWidth: null);
});

但每当我这样做并点击图片时，只需在浏览器中打开另一个标签，所有灯箱功能都会失败

请帮我纠正

由于

Answer 1

我修改了Leandro Vieira Pinho的jquery.lightbox-0.5.js文件。这个修改过的javascript文件的作用是，它将检查每个图像，如果宽度或高度超过屏幕（视口区域），则在保留宽高比的同时调整图像大小。

要使用此文件，您只需将此javascript文件的全部内容复制并粘贴到现有的jquery.lightbox-0.5.js文件中，或者只需用此替换旧文件即可。

我已经给出了2个链接：第一个将让您下载整个javascript文件，第二个将显示您可以复制并粘贴到现有jquery.lightbox-0.5.js的源代码。

下载javascript文件：http://turboupload.com/081zwttawcb6

源代码：http://www.sourcepod.com/twhbtf88-5047

Answer 2

你的灯箱电话缺少一个{。将灯箱调用更改为：

$('#gallery a').lightBox( {maxHeight: null,
maxWidth: null
});

Answer 3

您需要针对灯箱（）的所有调用指定maxHeight和maxWidth。例如：

$('#gallery a').lightBox({
  maxHeight: 700, 
  maxWidth: 700
});

Answer 4

您的函数应该替换jquery.lightbox.js插件文件中的函数（在第196行的某处查找以function _resize_container_image_box开头的函数）。

接下来需要做的是在外部JS文件中调用lightBox()或在#cocacola09和#Chandu建议的html内部调用：

   $('#gallery a').lightBox( {maxHeight: null,
    maxWidth: null
    });

我另外做的是动态获取窗口的宽度和高度，因此它适合当前窗口大小：

$(function() {
    //get height and width of window
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    //windowsize - 50px
    var windowHeightFixed = windowHeight - 50;
    var windowWidthFixed = windowWidth - 50;    

    $('a.lightbox').lightBox({          
        maxHeight: windowHeightFixed,
        maxWidth: windowWidthFixed
    });
});

但是这种方法会产生一些错误的结果。当您以不同的窗口大小重新加载页面时，会发生此问题。有些图像保留了之前窗口大小的宽度/高度，但有些图像没有。在Firefox 18，Chrome 24中测试。

Answer 5

Sunimal Kaluarachchi的代码效果很好，但没有正确处理景观宽高比。

要正常工作，您需要更改

 if ( newViewPortWidth > viewPortHeight ) // if viewport width > viewport height
 to    
 if ( newImageWidth > newViewPortWidth  ) //

在他的函数___calculateImageDimension函数

中

这是完整的功能

function ___calculateImageDimension(viewPortWidth, viewPortHeight, imageWidth, imageHeight)
    {
        // obtain 82% of ViewPort Height
        var viewPortHeightPercent = viewPortHeight * (82/100);

        var newImageHeight = imageHeight;
        var newImageWidth = imageWidth;
        var newViewPortWidth = viewPortWidth;
        var scaleHeight =0;
        var scaleWidth = 0;

       // if ( newViewPortWidth > viewPortHeight ) // if viewport width > viewport height
        if ( newImageWidth > newViewPortWidth  ) // if viewport width > viewport height
        {
            // Get 80% of current viewport width so the image width will be displayed within this 80% of viewport width size
            newViewPortWidth = viewPortWidth * (80/100);
        }

        // image width check
        if ( newImageWidth > newViewPortWidth )
        {
            newImageWidth = newViewPortWidth;
            scaleWidth = imageHeight/imageWidth;
            newImageHeight = scaleWidth * newImageWidth;
        }
        // image height check
        if ( newImageHeight > viewPortHeightPercent )
        {
            newImageHeight = viewPortHeightPercent;
            //calculate scale to set width
            scaleHeight = imageWidth/imageHeight;
            newImageWidth = scaleHeight * newImageHeight;
        }
        arrayNewImageSize = new Array(newImageWidth,newImageHeight);
        return arrayNewImageSize;
    }

如何修复jquery灯箱的宽度和高度？

5 个答案: