【jQuery】WPプラグインを使わずライトボックス機能を追加

Dec 8, 2013

ｊQuery

【jQuery】WPプラグインを使わずライトボックス機能を追加

画像をLightbox風に拡大表示する機能、今やほとんどのWebサイトに導入されていると言っても過言ではないですね。

こんなやつ。フレームやエフェクトにはいろんな種類があります。WordPressのプラグインを使えば一発で実装できますが、そこをあえてjQueryで。実際、画像系のWPプラグインて体感的にコンフリクト多い気がするんです。

手順1.まずはjQueryプラグイン『colorbox』をダウンロード

Colorbox – a jQuery lightbox

上記URLでlightboxの一種であるjQueryプラグイン『colorbox』をダウンロードできます。

jquery.colorbox.js – colorbox本体

sample1～5 – サンプルHTMLとCSSが5種類

いろいろ同梱されてますが実際必要なのはこれだけです。サンプルの中でどれを使うか決めておきましょう。

手順2.colorbox.jsとcolorbox.cssを設置

jquery.colorbox.jsと、サンプルフォルダに入っているcolorbox.cssを任意のディレクトリにアップロード。

その後、head内に以下のコードを記述します。

<script type="text/javascript" src="サイトURL/wp-content/themes/テーマ名/js格納フォルダ/jquery.colorbox.js" /></script>

<link rel="stylesheet" type="text/css" href="サイトURL/wp-content/themes/テーマ名/css格納フォルダ/colorbox.css" />

記述する場所は、他のjsやCSSへのリンクコードと同じあたりでOKです。もし動作しなかった場合はjsファイルの設置順を入れ替えると上手くいくことがあります。

手順3.colorboxコントロール用のスクリプトを記述

headの閉じタグ直前に以下のコードを記述して、colorboxの挙動をコントロールします。

<script type="text/javascript">
$("a[rel='group1']").colorbox({
    transition: "fade", //エフェクト
    speed: 500, //開く速度
    opacity: 0.5, //背景の透過度
});
</script>
</head>

エフェクトは”fade”以外に”elastic”と”none”があるので試してみましょう。サンプルHTMLでも比較できます。実は他にもビックリするぐらい細かく設定できるんですが、ここでは基本的な動作のみを指定しています。

手順4.colorboxをアップした画像に適用する方法

たとえば通常のエントリ編集画面で「メディアを追加」すると以下のようなコードが自動で出力されますよね。

<a href="http://wild-cards.net/wc/wp-content/uploads/2013/12/lightbox_01.jpg"><img src="http://wild-cards.net/wc/wp-content/uploads/2013/12/lightbox_01-300x222.jpg" alt="lightbox_01" width="300" height="222" class="alignnone size-medium wp-image-752" /></a>

「300×222px（メディア設定のサイズ）のサムネイル画像をクリックしたら、本来の大きさの画像を表示させる」ためのコードなわけですが、ここに rel=”group1″ を追加します。

<a rel="group1" href="http://wild-cards.net/wc/wp-content/uploads/2013/12/lightbox_01.jpg"><img src="http://wild-cards.net/wc/wp-content/uploads/2013/12/lightbox_01-300x222.jpg" alt="lightbox_01" width="300" height="222" class="alignnone size-medium wp-image-752" /></a>

これで、手順3で設定した通りにcolorboxが動作します。要するに、コードにrel=”group1″を加えられた画像はすべてcolorboxが適用されるというわけです。

ちなみにグループを複数設定することによって、画像毎に異なるエフェクトや挙動にすることも可能です。ここまで設定できていれば、あとはサンプルHTMLのソースを見れば複数設定も全然難しくないはずです。