THE HAM MEDIA BLOG

とある友人が、先日エントリーした「札幌の花火大会を見てきた：フォトアルバム」をみて、
「写真をクリックしたら、画面に綺麗に表示されるJavaScript、
　それの導入方法が知りたい。！」
という様な連絡があった。

メールで書いて送ろうかとも思ったんだけど、
自分でも再度復習を兼ねて、ブログのエントリーにしてみた。

以前にもエントリーしたことがあるのですが、

今回もjQueryとそのプラグインを使って、 ブログとかサイトで写真や画像をLightboxを使って表示させる方法を説明します。
写真を張って、その写真へのリンクをつけるだけで、
自動的にLightboxで表示させる方法も書いておきます。

ちなみに以前のエントリーは関連エントリーを参照してください。

まずはjQueryを使えるようにする

今回もjQueryを使ってのものになります。

jQueryはサイトからダウンロードしたのをアップしてリンクする方法と、
Google AJAX Libraries APIを使う方法があります。

Google AJAX Libraries APIを使う方が楽なので、
今回はそれを使った方法で説明します。

まずはheadの中これを指定

<script src="http://www.google.com/jsapi" 
 type="text/javascript"></script>
<script type="text/javascript">
    google.load("jquery", "1");
</script>

この二つのscriptでjQueryを使えるようにして、おきます。

google.load("jquery", "1");
この時の右側の１を入れる事で、
jQueryの1.x.xの最新バージョンが自動的に使えるようになります。

次はLightboxを自動的に使う為のスクリプト

次にLightboxを自動的に使う為のスクリプトの説明。
Lightboxよりも先に持ってきたのは、この設定が先に必要だからです。

下記のソースをコピーしてメモ帳か何かに貼付けて、
適当な名前をつけて、拡張子を.jsにして保存して、
先ほどのjqueryのscriptを指定した真下でファイルを指定してください。

$(document).ready(function(){    
  $('a[href$=".jpg"], a[href$=".gif"], a[href$=".png"]')
     .addClass("lightbox");
    $('a.lightbox').lightBox();
});

<script src="メモ帳にコピーして保存したファイル" 
 type="text/javascript"></script>

追記：2012/10/18
過去のエントリーだからとそのままにしてしまっていましたが、コメントで質問がありましたのでその回答として追記しておきます。
上記の記述はすでに修正をしていますが、これまでは[@attr]という現在では使われなくなった形で記載をしていました。
@をつけての属性セレクターはjQuery1.2で非推奨となり、そして1.3以降使えなくなっております。
⇒ Release:jQuery 1.3 - jQuery Wiki
1.2より前のバージョンでは、セレクターの部分で今のCSSセレクタを基準として作られたSizzleエンジンではなくて、XMLのセレクタを基準として作られたXPathが利用されていたため、属性セレクタを利用する際は"@"を使っていたという、そんな過去のお話。

$('a[@href$=".jpg"], a[@href$=".gif"], a[@href$=".png"]')
　.addClass("lightbox");

追記：2012/10/18
$('a[href$=".jpg"], a[href$=".gif"], a[href$=".png"]')
　.addClass("lightbox");

この部分で、jpgとgif、pngの拡張子がリンクされた部分に、
自動的にclass="lightbox"のクラスをつけるようになります。

そして、
$('a.lightbox').lightBox();
この部分で、
<a href="##.jpg" class="lightbox"><img src="##.jpg" /></a>
↑このように、class="lightbox"をもった画像へのリンクがあれば、
lightBoxを動作させるようになります。

あとはLightboxを使うように指定

あとは、jQuery lightBox pluginから、
必要部分をダウンロードしてきて、設定をする。

設定が必要なのは画像へのリンク部分の指定。

使うのは「jquery.lightbox-0.5.min.js」
これの14行目に、必要な画像へのリンクがあるので、
各自ブログやサイトに合わせてそれを指定する。

imageLoading、imageBtnPrev、imageBtnNext、
imageBtnClose、imageBlank
この５つへの画像のリンクが必要となるので忘れずに。

画像とJavaScriptと画像を全てアップしておき、あとはscriptとcssをリンクさせる。

<link rel="stylesheet" href="jquery.lightbox-0.5.css"
 type="text/css" media="screen" />
<script type="text/javascript" src="jquery.lightbox-0.5.min.js">
</script>

JavaScriptの指定の順序

上の説明までで、いくつかのJavaScriptを読み込むことになったのだが、
読み込む順番に注意してもらいたい。

必ず上で説明した順番通りにscriptを指定する必要があり、
順番が違うだけでも動作しなくなる。

jQuery→classをつけるスクリプト→lightbox
この順番を間違えないように。

HTMLでの画像の指定

あとは画像へのリンクを下記のように指定すればいいだけ。

<a href="##.jpg"><img src="##.jpg" /></a>

以上の設定を終えて、画像を表示させてクリックしたときに、
画面が少し暗くなって、前面に画像が表示されるようになれば完成。

◆プレビュー

ブログやサイトのアクセントとして導入してみてはいかがでしょう。