jQuery LightBox Plugin で画像の最大サイズ指定

画像の最大サイズ指定

jQuery LightBoxjQueryを利用した場合に使いやすいインターフェースになっている。
使ってみたところ画像サイズが大きい場合に画面からはみ出してしまう形になったのでこれを修正する。

1. jquery.lightbox-0.5.css

/* 追加 */
#lightbox-image {
	max-width  : 最大幅(px);
	max-height : 最大高(px);
}

2. jquery.lightbox-0.5.js

/*
 * function _set_image_to_view()
 */

// 45行目付近

	imageArray:				[],
	activeImage:			0,
	maxWidth:				'',	// これ追加
	maxHeight:				''	// これ追加
},settings);

// 190行目付近

// Image preload process
var objImagePreloader = new Image();
objImagePreloader.onload = function() {
	$('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]);
	// Perfomance an effect in the image container resizing it

//
//  ここから追加
//
if ( settings.maxWidth && settings.maxHeight ) {
	// ratio
	var
		_wr = settings.maxWidth / objImagePreloader.width,
		_hr = settings.maxHeight / objImagePreloader.height
	;
	if ( _wr > _hr ) {
		objImagePreloader.height = settings.maxHeight;
		objImagePreloader.width  = objImagePreloader.width * _hr;
	} else {
		objImagePreloader.width  = settings.maxWidth;
		objImagePreloader.height = objImagePreloader.height * _wr;
	}
}
// ここまで

3. 実行

// こんな感じで実行(オプションは良い具合に追加)
$('セレクタ').lightBox({
    maxWidth       : 700
   ,maxHeight      : 600
});

まとめ

コードはもっとキレイに直せると思うので気が向いたら直すこと。