jQuery LightBox Plugin で画像の最大サイズ指定
jQuery LightBox Plugin
http://leandrovieira.com/projects/jquery/lightbox/
(本家)http://www.lokeshdhakar.com/projects/lightbox2/
画像の最大サイズ指定
jQuery LightBox はjQueryを利用した場合に使いやすいインターフェースになっている。
使ってみたところ画像サイズが大きい場合に画面からはみ出してしまう形になったのでこれを修正する。
/* 追加 */ #lightbox-image { max-width : 最大幅(px); max-height : 最大高(px); }
/* * 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 });
まとめ
コードはもっとキレイに直せると思うので気が向いたら直すこと。