こんにちは。なかわけです。
みんな大好きLightboxの画像の大きさを制限するカスタマイズをしてみました。標準ではないんですね、この機能。
jsとちょこっとcssを変更します。縮小画像を生成する方法ではなく、width, height を指定して表示上縮小する方法です。
今回仕様したバージョンはLightbox v2.51です。元々のコードはこんな感じでした。
Lightbox.prototype.changeImage = function(imageNumber) {
var $image, $lightbox, preloader,
_this = this;
this.disableKeyboardNav();
$lightbox = $('#lightbox');
$image = $lightbox.find('.lb-image');
this.sizeOverlay();
$('#lightboxOverlay').fadeIn(this.options.fadeDuration);
$('.loader').fadeIn('slow');
$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
$lightbox.find('.lb-outerContainer').addClass('animating');
preloader = new Image;
preloader.onload = function() {
$image.attr('src', _this.album[imageNumber].link);
$image.width = preloader.width;
$image.height = preloader.height;
return _this.sizeContainer(preloader.width, preloader.height);
};
preloader.src = this.album[imageNumber].link;
this.currentImageIndex = imageNumber;
};
これを以下のように変更しました。
Lightbox.prototype.changeImage = function(imageNumber) {
var $image, $lightbox, preloader,
_this = this;
var widthRetio, heightRetio, retio;
var maxWidth = 800, maxHeight = 800;
this.disableKeyboardNav();
$lightbox = $(‘#lightbox’);
$image = $lightbox.find(‘.lb-image’);
this.sizeOverlay();
$(‘#lightboxOverlay’).fadeIn(this.options.fadeDuration);
$(‘.loader’).fadeIn(‘slow’);
$lightbox.find(‘.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption’).hide();
$lightbox.find(‘.lb-outerContainer’).addClass(‘animating’);
preloader = new Image;
preloader.onload = function() {
$image.attr(‘src’, _this.album[imageNumber].link);
if(preloader.width > maxWidth){
widthRetio = maxWidth / preloader.width;
}else {
widthRetio = 1;
}
if(preloader.height > maxHeight){
heightRetio = maxHeight / preloader.height;
}else {
heightRetio = 1;
}
if(widthRetio > heightRetio){
retio = heightRetio;
}else{
retio = widthRetio;
}
$image.width = Math.round(preloader.width * retio);
$image.height = Math.round(preloader.height * retio);
if(retio < 1){
$(‘.lb-image’).attr(‘width’, $image.width);
$(‘.lb-image’).attr(‘height’, $image.height);
}else{
$(‘.lb-image’).removeAttr(‘width’);
$(‘.lb-image’).removeAttr(‘height’);
}
return _this.sizeContainer($image.width, $image.height);
};
preloader.src = this.album[imageNumber].link;
this.currentImageIndex = imageNumber;
};[/javascript]
ざっくり説明すると、194行目で制限する大きさを設定しています。幅800px, 高さ800pxに。ここの数字を変えれば好きな大きさに変更できます。
206から220行目までで縮小する比率を求める処理をしています。
221,222行目で画像を縮小しています。
223から229行目では縮小する場合はwidth, height属性を追加して、縮小しない場合はwidth, height属性を削除する処理をしています。
あと、cssも少し変更しました。
[css num=24 highlight_lines="26,27"]
/* line 24, ../sass/lightbox.sass */
#lightbox img {
/*width: auto;*/
/*height: auto;*/
}
[/css]
26,27行目をコメントアウトするだけ。
大抵はこれだけで事足りるんじゃないでしょうか。