Movable Type 備忘録

jQuery で Lightbox のように表示する

Oct212007
Author: bzbell
Categories: Tools
Tags: JavaScript, Lightbox, Thumbnail, Tools

Next Page: Splashup
Prev Page: Feed2JS

こんばんわ^^

昨日は友人に連れてかれるまま、銀座にある『七厘や庵』という炙り焼きのお店に行ってきました。
店内は落ち着いた雰囲気で、焼酎、日本酒はもちろんのこと、ワインも置いてます。

料理のほうも黒毛和牛やあわびの七厘焼き、アナゴの白焼きメッチャおぃひかったです (＊´∀｀＊)
やっぱり素材がいいからかな♪

東京都中央区銀座8-3-10

アクセスは JR 新橋駅からすぐのビルの地下 1 階にあります。
連れてがれるままだったからビル名が分からなくってネットで調べたら、『トミタビル』だそうです (;￣∇￣A
機会があったら是非 (●＞∀＜●)

さて、今回は久しぶりに jQuery に関するご紹介です。
Lightbox はもう説明するまでもないですね。
この Lightbox と同じようなエフェクトで表示できるプラグインが紹介されてました。

以前、jQueryでLightbox風な表示やってみる(ThickBox)という記事で Lightbox 風な thickbox というプラグインをご紹介しましたが、今度のは見た目 Lightbox まんまです Σ(￣Д￣；)!! 動作もサクサク表示されます!!

使い方は prototype 版 Lightbox よりカンタンで、オーバーレイ(透過背景色)の色もお好みの色に変更できます。

jQuery 版 Lightbox サンプル

設置の仕方

まず jQuery 版 Lightbox をダウンロードします。
こちら jQuery lightBox plugin から圧縮ファイルをダウンロードして、適当なフォルダに展開します。

2007.10.21 時点のバージョンは 0.3 です。
次に jquery.lightbox.js をオーバーレイの透過背景色などをカスタマイズします。
デフォルトでは黒(#000)ですが、お好みで変更してください。
jquery.lightbox.js
1. settings = jQuery.extend({
3. overlayBgColor: '#000', /*背景色*/
4. overlayOpacity: 0.8, /*透過*/
6. imageLoading: '<$MTBlogURL$>lightbox/images/lightbox-ico-loading.gif',
7. imageBtnPrev: '<$MTBlogURL$>lightbox/images/lightbox-btn-prev.gif',
8. imageBtnNext: '<$MTBlogURL$>lightbox/images/lightbox-btn-next.gif',
9. imageBtnClose: '<$MTBlogURL$>lightbox/images/lightbox-btn-close.gif',
11. containerBorderSize: 10,
12. containerResizeSpeed: 400,
14. txtImage: 'Image',
15. txtOf: 'of',
17. imageArray: [],
18. activeImage: 0
19. },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)

TrackBack URL for this entry:

from Tetsuyan´s Blog: いつもながらナイスなネタを振っていただける、MovableType備忘録 bzb...
Tracked on October 21, 2007

from [ja]マイブログ[/ja][en]my weblog[/en]: メニューから好きなLightboxを訪問者が自由に選択できる試みです。それも埋め込みは超簡単です！！
Tracked on December 4, 2007

Comments(3)

#1: Posted by 哲やん [RES]: 便利に使わせていただいてます・・・Lightboxより軽い感じがしていいですね。
あとは「image of」を日本語表示にできれば・・・（笑）
Posted on October 26, 2007

#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 で使用している文字コードで出力してくれます。

Posted on October 27, 2007

#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();

Posted on October 27, 2007

jQuery で Lightbox のように表示する

設置の仕方

使い方

Trackback Pings(2)

Comments(3)

Post a Comment