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

使用过图片缩略图查看器插件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();