Javascript 如何确定jquery lightbox的宽度和高度？

我已经在我的图像库中应用了jquery lighbox，但是由于图像的大小可变，lightbox的大小不是固定的，因此会以图像的原始大小打开，这反过来会导致biga图像离开屏幕并在浏览器中显示水平滚动条

因此，我正在寻找将固定宽度和高度应用于lightbox的方法，以便在lightbox中每个图像都必须以这种大小显示

请帮忙

更新

我刚刚尝试了Scott（）给我的解决方案我做到了

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) });
};

及

但是，每当我这样做，并点击图像在浏览器和其他选项卡中打开时，所有的lightbox功能都会失败

请帮我改正一下

---

谢谢

您的lightbox呼叫缺少一个{。 将lightbox呼叫更改为，如下所示：

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

---

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

---

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

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

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

下载javascript文件：

---

源代码：

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

function\u resize\u container\u image\u box

开头的函数）

接下来需要做的是在外部JS文件或内部html中调用

lightBox（）

，如35; cocacola09和#Chandu建议的：

   $('#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中进行了测试。

Sunimal Kaluarachchi的代码运行良好，但无法正确处理横向宽高比

要正常工作，你需要改变

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

在他的函数中uuuuuu计算图像尺寸函数

下面是完整的函数

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;
    }

---

非常欢迎你…很高兴代码修复帮助了你…：）下载链接不起作用…但源代码链接仍然有效！非常感谢，这仍然非常有用！很高兴听到它帮助了你@nomayann。非常欢迎：-）太遗憾了，你已经将源代码作为下载包含在内。两个链接现在都死了。这就是为什么你应该你只要把密码贴在你的答案里就行了。

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

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;
    }