如何修复jquery lightbox的宽度和高度？

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

您需要针对 lightbox() 的所有调用指定 maxHeight 和 maxWidth。 示例：

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

Answer 3

您的灯箱调用缺少 {。 将您的灯箱调用更改为如下：

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

Answer 4

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

Answer 5

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

接下来你需要在你的外部 JS 文件或 html 中调用lightBox()，如#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 中测试。