Javascript 如何修复jquery灯箱的宽度和高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4529460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fix the width and height of jquery lightbox?
提问by OM The Eternity
I have aplied jquery lighbox on my image gallery, but due to the variable size of images, the lightbox size is not fixed hence opens up with image's original size, this in turn causes the biga images to go out of screen and display horizontal scroll bar in browser.
我在我的图片库上应用了 jquery 灯箱，但由于图像大小可变，灯箱大小不固定，因此以图像的原始大小打开，这反过来导致 biga 图像走出屏幕并显示水平滚动条在浏览器中。
Hence I am looking for the way to apply the fix width and height to lightbox so that every image must be displayed with this size in lightbox.
因此，我正在寻找将固定宽度和高度应用于灯箱的方法，以便每个图像都必须在灯箱中以这种尺寸显示。
Please help..
请帮忙..
Update
更新
i Just tried with the solution Scott (http://geekswithblogs.net/wojan/archive/2009/06/17/jquerylightbox.aspx) has given to me, I did this,
我刚刚尝试了 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) });
};
AND
和
$('#gallery a').lightBox( maxHeight: null,
maxWidth: null);
});
But whenever I do this and click on the image just gets open in browsers annother tab, all the lightbox functinalty fails
但是每当我这样做并单击图像时，就会在浏览器的另一个选项卡中打开，所有灯箱功能都会失败
Please help me to correct it
请帮我改正
Thanks
谢谢
采纳答案by cocacola09
You need to specify the maxHeight and maxWidth against all calls of the lightbox(). Example:
您需要针对 lightbox() 的所有调用指定 maxHeight 和 maxWidth。例子：
$('#gallery a').lightBox({
maxHeight: 700,
maxWidth: 700
});
回答by Sunimal Kaluarachchi
I modified the jquery.lightbox-0.5.js file by Leandro Vieira Pinho. What this modified javascript file does is, it will check each image and if the width or height exceeds the screen (viewport area), then the image is resized while preserving the aspect ratio.
我修改了 Leandro Vieira Pinho 的 jquery.lightbox-0.5.js 文件。这个修改后的 javascript 文件的作用是，它会检查每个图像，如果宽度或高度超过屏幕（视口区域），则在保持纵横比的同时调整图像的大小。
To use this file, you just have to copy and paste entire contents of this javascript file in your already existing jquery.lightbox-0.5.js file or you just have to replace the old file with this.
要使用此文件，您只需将该 javascript 文件的全部内容复制并粘贴到您现有的 jquery.lightbox-0.5.js 文件中，或者您只需要用此文件替换旧文件。
I have given 2 links: First one will let you down load the entire javascript file and the second will display the source code which you can copy and paste into your existing jquery.lightbox-0.5.js.
我提供了 2 个链接：第一个将让您下载整个 javascript 文件，第二个将显示源代码，您可以将其复制并粘贴到现有的 jquery.lightbox-0.5.js 中。
Download javascript file: http://turboupload.com/081zwttawcb6
下载javascript文件：http: //turboupload.com/081zwttawcb6
Source code : http://www.sourcepod.com/twhbtf88-5047
回答by Chandu
You lightbox call is missing a {. Change your lightbox call to as follows:
您的灯箱呼叫缺少 {。将您的灯箱呼叫更改为如下：
$('#gallery a').lightBox( {maxHeight: null,
maxWidth: null
});
回答by Jure Ravli?
Your function should replace the one in the jquery.lightbox.js plugin file (look for the function that starts with function _resize_container_image_boxsomewhere around line 196).
您的函数应该替换 jquery.lightbox.js 插件文件中的函数（查找以第function _resize_container_image_box196 行左右开始的函数）。
What you need to do next is call lightBox()in your external JS file or inside html like #cocacola09 and #Chandu suggested:
你接下来需要做的是lightBox()在你的外部 JS 文件或内部 html 中调用#cocacola09 和 #Chandu 建议：
$('#gallery a').lightBox( {maxHeight: null,
maxWidth: null
});
What i did in addition is to get the width and height of a window dynamically, so it fits the current window size:
我另外做的是动态获取窗口的宽度和高度，使其适合当前窗口大小：
$(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
});
});
But this method gives some buggy results. The problem occurs when you reload the page in a different window size. Some images preserve the width/height of previous window size, but some don't. Tested in Firefox 18, Chrome 24.
但是这种方法给出了一些错误的结果。当您以不同的窗口大小重新加载页面时会出现此问题。有些图像保留了先前窗口大小的宽度/高度，但有些则没有。在 Firefox 18、Chrome 24 中测试。
回答by Brian Keith
Sunimal Kaluarachchi's code works well but doesn't handle a landscape aspect ratio properly.
Sunimal Kaluarachchi 的代码运行良好，但不能正确处理横向纵横比。
To work properly you need to change
为了正常工作，你需要改变
if ( newViewPortWidth > viewPortHeight ) // if viewport width > viewport height
to
if ( newImageWidth > newViewPortWidth ) //
in his function ___calculateImageDimension function
在他的函数 ___calculateImageDimension 函数中
here is the complete function
这是完整的功能
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;
}
