定番のスライドショー「jQuery LightBox」が実装できるWordPressプラグイン「WP jQuery Lightbox」

Web制作テクニック

WP jQuery Lightbox》は色々なサイトやブログで多く見かける、定番のスライドショーを実装できる WordPressプラグインです。この《WP jQuery Lightbox》は JavaScriptライブラリである《jQuery LightBox plugin》が WordPressプラグインとして、簡単に設置できるように改良されたものです。

» サンプルデモ(※こちらは jQuery ヴァージョンのサンプルです。)

[adsense]

プラグインの入手と有効化

  • こちらのページから wp-jquery-lightbox.zip ファイルをダウンロードして解凍する
  • wp-jquery-lightbox フォルダを wp-content/plugins ディレクトリにアップロードする
  • WordPress 管理画面にログインする
  • ダッシュボードからプラグインメニューに入る
  • WP jQuery Lightbox の項目で「使用する」をクリックしてプラグインを有効化させる

※プラグインの新規追加でダウンロードした zip ファイルを直接インストール、もしくはプラグインを検索してインストールする事もできます。

スライドショーの設置方法

<a href="http://.../.../image.jpg" rel="lightbox" title="タイトル">画像かテキスト</a>

スライドショーとして表示させたい画像へのリンク属性をrel=”lightbox”と指定します。

複数の写真を1つのスライドショーにまとめる場合

<a href="http://.../.../image-a.jpg" rel="lightbox[group]" title="タイトル">画像かテキスト</a>
<a href="http://.../.../image-b.jpg" rel="lightbox[group]" title="タイトル">画像かテキスト</a>

1つのスライドショーとしてまとめたい、それぞれの画像へのリンク属性をrel=”lightbox[group]”と指定します。

このrel=”lightbox[group]”のカッコ内に入る関連付けタグは、何でも構いません。それぞれ同じ関連付けられたものが、1つのスライドショーでまとめられて表示されます。

例えばこんな時には?

例えば1ページ内に画像へのリンクを複数貼付けていて、それぞれの画像を1枚ずつ独立したスライドショーとして表示させたい場合。

それぞれのリンク属性をrel=”lightbox”で指定してあっても、1ページ内に貼付けた全てのリンク先の画像が連続したスライドショーとして表示されてしまいます。

なので、こんな時にはそれぞれのリンク属性にrel=”lightbox[group1], rel=”lightbox[group2], rel=”lightbox[group3]…といった様に、全て違った関連付け指定をするようにします。

ダウンロード

» WP jQuery Lightbox