使用http://lokeshdhakar.com/projects/lightbox2/ 的lightBox做图片的幻灯片效果是,如果图片很大,那么显示时会按照图片的原大小显示,现在修改下,当图片大于指定的宽度或高度,进行缩放。
下面为修改的代码:
第一、在开头的函数体内增加2个常量的声明:
(function() {
var $, Lightbox, LightboxOptions;
/*****增加部分*****/
var maxWidth = 800;
var maxHeight = 600;
第二、修改方法changeImage,将方法内的 preloader.onload = function() {}的函数体做如下的修改(红色为修改部分)
preloader.onload = function() {
$image.attr('src', _this.album[imageNumber].link);
if(preloader.width>maxWidth||preloader.height>maxHeight){
if (preloader.width > 0 && preloader.height > 0) {
if (preloader.width / preloader.height >= maxWidth / maxHeight) {
if (preloader.width > maxWidth) {
$image.width(maxWidth);
$image.height((preloader.height * maxWidth) / preloader.width);
} else {
$image.width(preloader.width);
$image.height(preloader.height);
}
} else {
if (preloader.height > maxHeight) {
$image.height(maxHeight);
$image.width( (preloader.width * maxHeight) / preloader.height);
} else {
$image.width(preloader.width);
$image.height(preloader.height);
}
}
return _this.sizeContainer($image.width(), $image.height());
}
}
$image.width(preloader.width);
$image.height(preloader.height);
return _this.sizeContainer(preloader.width, preloader.height);
};
本修改基于http://lokeshdhakar.com/projects/lightbox2/ 的v2.51版进行。