Movable Type 備忘録
jQuery で Lightbox のように表示する
こんばんわ^^
昨日は友人に連れてかれるまま、銀座にある『七厘や庵』という炙り焼きのお店に行ってきました。
店内は落ち着いた雰囲気で、焼酎、日本酒はもちろんのこと、ワインも置いてます。
料理のほうも黒毛和牛やあわびの七厘焼き、アナゴの白焼きメッチャおぃひかったです (*´∀`*)
やっぱり素材がいいからかな♪
アクセスは JR 新橋駅からすぐのビルの地下 1 階にあります。
連れてがれるままだったからビル名が分からなくってネットで調べたら、『トミタビル』だそうです (; ̄∇ ̄A
機会があったら是非 (●>∀<●)
さて、今回は久しぶりに jQuery に関するご紹介です。
Lightbox
はもう説明するまでもないですね。
この Lightbox と同じようなエフェクトで表示できるプラグインが紹介されてました。
以前、jQueryでLightbox風な表示やってみる(ThickBox)という記事で Lightbox 風な thickbox というプラグインをご紹介しましたが、今度のは見た目 Lightbox まんまです Σ( ̄Д ̄;)!! 動作もサクサク表示されます!!
使い方は prototype 版 Lightbox よりカンタンで、オーバーレイ(透過背景色)の色もお好みの色に変更できます。
設置の仕方
まず jQuery 版 Lightbox をダウンロードします。
こちら jQuery lightBox plugin から圧縮ファイルをダウンロードして、適当なフォルダに展開します。2007.10.21 時点のバージョンは 0.3 です。
次に jquery.lightbox.js をオーバーレイの透過背景色などをカスタマイズします。
デフォルトでは黒(#000)ですが、お好みで変更してください。jquery.lightbox.js
settings = jQuery.extend({overlayBgColor: '#000', /*背景色*/overlayOpacity: 0.8, /*透過*/imageLoading: '<$MTBlogURL$>lightbox/images/lightbox-ico-loading.gif',imageBtnPrev: '<$MTBlogURL$>lightbox/images/lightbox-btn-prev.gif',imageBtnNext: '<$MTBlogURL$>lightbox/images/lightbox-btn-next.gif',imageBtnClose: '<$MTBlogURL$>lightbox/images/lightbox-btn-close.gif',containerBorderSize: 10,containerResizeSpeed: 400,txtImage: 'Image',txtOf: 'of',imageArray: [],activeImage: 0},settings);
青い字の部分がオーバーレイの背景色と透過具合を変更します。
赤い字の部分は jquery.lightbox.js 内で使用されるイメージファイルの URL に変更します。一通り変更したらサーバにアップロードします。
アップロード先はどこでも構いません。各自の環境に合わせてアップロードしてください。
以上で設置は完了です。
使い方
HTML ヘッダ(<head>~</head>)の中に以下を追加します。
<script type="text/javascript" src="<$MTBlogURL$>lightbox/js/jquery.js"></script> <script type="text/javascript" src="<$MTBlogURL$>lightbox/js/jquery.lightbox-0.3.js"></script> <link rel="stylesheet" type="text/css" href="<$MTBlogURL$>lightbox/css/jquery.lightbox-0.3.css" media="screen" /> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script>青い字の部分を各自の環境に合わせて変更してください。
赤い字の部分はお好みですが、gallery という ID では都合が悪い人は任意の ID に変更します。- 次にサムネイル表示です。
prototype 版 Lightbox のように、各イメージに 'rel=lightbox' と付ける必要はありません。
<div id="gallery">~</div> で囲うだけで表示されます。前で 'gallery' を別 ID 名に変更した場合は、'gallery' の部分が変更した ID 名になります。
<div id="gallery"> <ul> <li> <a href="photos/image1.jpg" title=""> <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="photos/image2.jpg" title=""> <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="photos/image3.jpg" title=""> <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="photos/image4.jpg" title=""> <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="photos/image5.jpg" title=""> <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" /> </a> </li> </ul> </div>上記はサンプルを抜粋したものですが、普通にイメージファイルの羅列だけで、後は勝手に jquery.lightbox.js が 'NEXT'、'PREV' リンクを付けてくれたりします。便利ですね。
以上で jQuery で Lightbox みたいなエフェクトを使ったサムネイル表示をすることができました。
Trackback Pings(2)
- from
Tetsuyan´s Blog
いつもながらナイスなネタを振っていただける、MovableType備忘録 bzb...
- from
[ja]マイブログ[/ja][en]my weblog[/en]
メニューから好きなLightboxを訪問者が自由に選択できる試みです。それも埋め込みは超簡単です!!
Comments(3)
-
#2: Posted by
bzbell
[RES]
>>1 哲やん さん
こんにちわ^^
> あとは「image of」を日本語表示にできれば・・・(笑)
できます。
- お使いの文字コードに合わせて jquery.lightbox.js を変換
- jquery.lightbox.js 内の 36、37 行目をお好みで変更
以上で哲やん さんご希望の表示ができると思います ( ̄∇ ̄)b
jquery.lightbox.js のコード変換は、テキストエディタでできるものもあります。
できない場合には、以下の手順でできます。
- インデックステンプレートを新規作成
- jquery.lightbox.js をコピー & ペースト
- 出力先を元の jquery.lightbox.js で上書き
以上の手順で MT で使用している文字コードで出力してくれます。
- #3: Posted by 哲やん [RES]
>>2 bzbell さん
毎度どうもです。
230行あたりの以下の所もいじらないといけないみたいですね。
関数で入れるより、そのまま直書きかな?(笑)if ( settings.imageArray.length > 1 ) {
$('#lightbox-image-details-currentNumber').html(settings.txtImage + ' ' + ( settings.activeImage + 1 ) + ' ' + settings.txtOf + ' ' + settings.imageArray.length).show();


便利に使わせていただいてます・・・Lightboxより軽い感じがしていいですね。
あとは「image of」を日本語表示にできれば・・・(笑)