jQuery LightBox2プラグインで画像サイズを自動調整する方法

jQuery LightBox2プラグインを使って大きい画像を表示させると、画面に収まらないためスクロールさせる必要がある。WordPressのLightBox2プラグインでは画面に収まるように自動調整を行う選択が可能であるがjQuery LightBox2プラグインではそのような選択ができないので、lightbox.jsを次のようにカスタマイズして実現した。

preloader.onload = function() {
  var $preloader, imageHeight, imageWidth, maxImageHeight, maxImageWidth, windowHeight, windowWidth;
  $image.attr('src', _this.album[imageNumber].link);

  $preloader = $(preloader);
  $image.width(preloader.width);
  $image.height(preloader.height);

  if (_this.options.fitImagesInViewport) {
     windowWidth = $(window).width();
     windowHeight = $(window).height();
     maxImageWidth = windowWidth - _this.containerLeftPadding - _this.containerRightPadding - 20;
     maxImageHeight = windowHeight - _this.containerTopPadding - _this.containerBottomPadding - 110;
     if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
       if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
          imageWidth = maxImageWidth;
          imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
          $image.width(imageWidth);
          $image.height(imageHeight);
       } else {
          imageHeight = maxImageHeight;
          imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
          $image.width(imageWidth);
          $image.height(imageHeight);
       }
     }
  }
  return _this.sizeContainer($image.width(), $image.height());
};

を次のようにする。

preloader.onload = function() {
  var $preloader, imageHeight, imageWidth, maxImageHeight, maxImageWidth, windowHeight, windowWidth;
  $image.attr('src', _this.album[imageNumber].link);
  if (preloader.width > window.innerWidth * 0.9) {
     preloader.height = (window.innerWidth * 0.9 * preloader.height) / preloader.width;
     preloader.width = window.innerWidth * 0.9;
  }
  if (preloader.height > window.innerHeight * 0.8) {
     preloader.width = (window.innerHeight * 0.8 * preloader.width) / preloader.height;
     preloader.height = window.innerHeight * 0.8;
  }
  $preloader = $(preloader);
  $image.width(preloader.width);
  $image.height(preloader.height);
  $image.attr('width', preloader.width + "px");
  if (_this.options.fitImagesInViewport) {
     windowWidth = $(window).width();
     windowHeight = $(window).height();
     maxImageWidth = windowWidth - _this.containerLeftPadding - _this.containerRightPadding - 20;
     maxImageHeight = windowHeight - _this.containerTopPadding - _this.containerBottomPadding - 110;
     if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
       if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
          imageWidth = maxImageWidth;
          imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
          $image.width(imageWidth);
          $image.height(imageHeight);
       } else {
          imageHeight = maxImageHeight;
          imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
          $image.width(imageWidth);
          $image.height(imageHeight);
       }
     }
  }
  return _this.sizeContainer($image.width(), $image.height());
};