まあ元の画像をも少し小さくすれば良いじゃねーかという話もありますが、それを始めちゃうと今までの画像全部直しますか!?って議論になってしまってイヤなので、Lightbox側で何とかしてみるという記事です。とは言ってもちょうど良い感じの記事が見つかったのでこりゃいいやと思って真似してみるだけですけどね。
jQuery Lightbox Pluginは、ちょっとした細工をしないと拡大時の画像の幅の指定が出来ないようなので、「jquery.lightbox-0.5.js」をテキストエディタで開いて、2箇所にハイライト部分のような記述をしていきます。
settings = jQuery.extend({
// Configuration related to image size
maxWidth: 10000,
// Configuration related to overlay
...これは、、、良く分かりませんが、うにょーん時の画像の幅を指定するに当たり、"maxWidth"という変数を定義していて、とりあえず数値を入れておきましたって感じなのかな。
$('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]);
// Perfomance an effect in the image container resizing it
// Configuration related to image size
var rate = 1;
if(objImagePreloader.width > settings.maxWidth){
rate = settings.maxWidth / objImagePreloader.width;
objImagePreloader.width = settings.maxWidth;
objImagePreloader.height = objImagePreloader.height * rate;
jQuery('#lightbox-image').css('width', settings.maxWidth + 'px');
}
_resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
...で、"objImagePreloader.width"っていうのが元画像か何かだろか。maxWidthより大きい場合は"rate"に元画像に対する比率の計算結果を仕込んでおいて、maxWidthの値をベースに、heightを比率をもとに算出するのかな。
と、独り言は無視していただいて、、、
内容を保存したものをGoogleサイトにアップロードして、「jquery.lightbox-0.5.js」の設定は終了です。
今度はブロガーのメニューから「デザイン」 --> 「HTMLの編集」を選択し、<head></head>内に、以下の通りの設定をしていきます。既にjQuery Lightbox Pluginの読み込み設定はしてあるので、ハイライト部分をテンプレート内に追記する形になりました。
<!--jQuery Lightbox Plugin用の記述-->
<script src='https://sites.google.com/site/[sitename]/home/js/jquery-1.6.1.min.js' type='text/javascript'/>
<link href='https://sites.google.com/site/[sitename]/home/css/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/[sitename]/home/js/jquery.lightbox-0.5.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$("#gallery a").lightBox();
$(".lightbox").lightBox({maxWidth:600});
});
</script>
<!--jQuery Lightbox Plugin用の記述-->これだとうにょーん時の最大幅は一律600pxですね。ブロガー側の設定も終了です。
あとは、普段画像を投稿する際にタグの書き方を変えると、指定したサイズでのうにょーんになってくれました。
- 通常のうにょーん
<img>タグを、<div id = "gallery" ~></div>で囲む。
<div class="separator" id="gallery" style="clear: both; text-align: center;"> <a href="http://xxx.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" height="150" src="http://xxx.jpg" width="200" /> </a> </div>
- 幅を600pxに指定したうにょーん
<a>タグの中に、「class = "lightbox"」を記述。
<div class="separator" style="clear: both; text-align: center;"> <a class="lightbox" href="http://xxx.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" height="150" src="xxx.jpg" width="200" /> </a> </div>
いやー難しい。ちょっとjQueryの中身でも勉強してみようかな。色々操れるようになると、カスタムの幅も広がるだろな。
0 件のコメント:
コメントを投稿