こんにちは。なかわけです。

みんな大好き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行目をコメントアウトするだけ。 大抵はこれだけで事足りるんじゃないでしょうか。

Tags: Lightbox, WordPress

This entry was posted on 金曜日, 6月 29th, 2012 at 3:40 PM and is filed under JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.