发表于2016-08-20
使用过图片缩略图查看器插件jquery.lightbox的同学的时候也许都应该遇到过这个问题,当查看很大的图时,不光显示不完整个图片,而且会显示不了上一张、下一张和关闭按钮。(比如显示一张比当前屏幕还大时的图片)
因为jquery.lightbox默认是按照图片原始尺寸显示了,这时你会不会想到限制一个图片显示的最大尺寸?这样就不会有问题了。下面我就分享一下我使用的方法来解决<修复jquery.lightbox-0.5图片过大显示不全及边框问题
修改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; }
为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();