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

2019-07-21 23:36:47 阅读：196 来源： 互联网

我在我的图片库中使用了jquery lighbox,但是由于图像的大小不同,灯箱尺寸不固定因此打开了图像的原始尺寸,这反过来导致biga图像走出屏幕并显示水平滚动条在浏览器中.

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

请帮忙..

Update

我刚试过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);
});

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

请帮我纠正一下

谢谢

解决方法:

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

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

标签：jquery,javascript,css,lightbox
来源： https://codeday.me/bug/20190721/1496959.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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