WordPressで簡単にスライドショーができる方法

by zakki

Published 10 月 12th, 2007 in WordPress, プラグイン |

(1) (0) (0) (0) Total: 1

先日、「隠れ名店赤丸ヂンギス」を書き、料理の写真を何枚か貼ったのですが、なにか面白い表示方法はないかと検索しておりますと、ありましたありました、いいものがＯ(≧▽≦)Ｏ

それは「Lightbox JS v2.0」です。
まぁ、けっこう前にでていたようです。
機能としては、

サムネイルをクリックすると同じウィンドウにオリジナルサイズの画像を表示させてくれる。
スライドショーで表示できる。

しかも、WordPressプラグイン版がありまして、通常、「Lightbox JS v2.0」はJavaScriptなので、WordPressに導入しようとするとhead部分にlightbox.jsへのリンクを張ったり、記事内に画像を挿入する際にいちいち「rel=“lightbox”」を入れなければならなかったりするのですが、今回、私が導入したものは、WordPress 向けにプラグインを有効にするだけで簡単に導入できるとのこと。
ということで、早速導入してみました。

Lightbox JS v2.0のインストール方法

プラグインをダウンロードして解凍すると、lightbox2.phpとlightboxフォルダができますで、これをそのまま/WordPressインストールフォルダ/wp-content/plugins/にアップロードします。
管理画面 -> プラグインから「WP Lightbox 2」を有効化にします。

プラグインのインストール作業はこれで完成です。あとは記事の投稿の際に、画像にリンクするaタグに
rel=”lightbox”
をつけてやればOKです。画像をクリックするとLightboxが動作します。
記入例:

<a href="img1.jpg" rel="lightbox" title="my caption"><img src="img1.jpg"></a>

また画像をスライドショーのように、クリックするたびに次々と切り替えることもできます。これは画像にリンクするaタグに
rel=”lightbox[roadtrip]“
とつけてやればOKです。これがついている画像だけを連番に読み込みます。
記入例:

<a href="img1.jpg" rel="lightbox[roadtrip]“><img src=”img1.jpg”></a>
<a href=”img2.jpg” rel=”lightbox[roadtrip]“><img src=”img2.jpg”></a>
<a href=”img3.jpg” rel=”lightbox[roadtrip]“><img src=”img3.jpg”></a>

ちなみに導入に10分程度でした。

参考
http://www.4mj.it/lightbox-js-v20-wordpress/
http://www.odysseygate.com/archives/637

あとがき
2007/11/20投稿の「Wordpressにおける「Videobox」プラグインを作ってみた」のためにLightbox JS v2.0プラグインは無効にしてあります。

Popularity: 31 %

この記事のお役立ち度を評価してください