修复jquery.lightbox-0.5图片过大显示不全及边框问题

修复jquery.lightbox-0.5图片过大显示不全及边框问题

1961发表于2016-08-20

使用过图片缩略图查看器插件jquery.lightbox的同学的时候也许都应该遇到过这个问题,当查看很大的图时,不光显示不完整个图片,而且会显示不了上一张、下一张和关闭按钮。(比如显示一张比当前屏幕还大时的图片)

因为jquery.lightbox默认是按照图片原始尺寸显示了,这时你会不会想到限制一个图片显示的最大尺寸?这样就不会有问题了。下面我就分享一下我使用的方法来解决<修复jquery.lightbox-0.5图片过大显示不全及边框问题

一、css:

修改css(jquery.lightbox-0.5.css),参考我原来的文章:使用box-sizing修复lightbox在bootstrap中底部少了20px的问题


/*ligthbox-fix*/
#jquery-lightbox #lightbox-container-image-data-box{
box-sizing:content-box;
-moz-box-sizing:content-box; /* Firefox */
-webkit-box-sizing:content-box; /* Safari */
}
#lightbox-container-image img{ max-width:900px; }


二、jquery.lightbox-0.5.js:

为lightbox加下一上maxWidth最大宽度参数并与css中的lightbox-container-image img的max-width的值保持一致,如下图:


 _resize_container_image_box函数中最开始加下以下代码:

var whRate = intImageWidth / intImageHeight;
if (intImageWidth > settings.maxWidth) {
 intImageWidth = settings.maxWidth;
 intImageHeight = intImageWidth / whRate;
}
// Get current width and height
var intCurrentWidth = $('#lightbox-container-image-box').width();


小编蓝狐