Lightboxでアニメーション風に画像拡大

ホームページ作成2008 年 6 月 9 日 by Daisuke

画像をクリックするとアニメーション風にニョキニョキ拡大されるjavaScript、それが「Lightbox」です。　
有名なJavaScriptなのですが、ご存知無い方はとりあえず左の画像をクリックしてみてください。

どうです？ニョキニョキしました？
ちょっとおしゃれですよね。

ワードプレスへのインストール

WordPressではプラグインが公開されているので、ダウンロードして解凍・サーバにアップロードするだけ。特に修正する部分などもありませんので簡単に導入することができます。

ページの下の方にDownload Lightbox 2 WordPress Plugin (1.8)という文字がありますのでそこをクリックすればダウンロードを開始します。

zipファイルを解凍すると「lightbox-2-wordpress-plugin」というフォルダが出来ますので、その中にある「lightboxフォルダ」と「lightbox.php」をサーバのWordPressプラグインフォルダにアップロード。プラグイン管理ページで「有効化」または「使用する」をクリック。

使い方は拡大前の画像を拡大後の画像にリンク、そのaタグにrel=”lightbox”という属性を付加するだけです。

<a href="元画像のURL" rel="lightbox"><img src="縮小画像のURL" /></a>

【追記】
Wordpressのheader.phpに記述されている<?php wp_head(); ?>を削除してしまうと機能しなくなります。この部分、SEOのために少しでも<head>～</head>をコンパクトにまとめたい時など、削除される事も多い部分なんですよね。
その場合は下のインストール方法を行ってください。

って結局<head>～</head>に余計なソースを追加するわけなんですが・・・。

通常のウェブサイトやその他のCMSへのインストール

ちょっとややこしいかも知れませんがそんなに難しくはありません。
インストールをより簡単にできるように全部のファイルをまとめてしまいましょう。
まずはダウンロード。

ダウンロード：Lightbox2

ページの中程にある「Lightbox v2.04」をクリックするとzipファイルでダウンロード。
ダウンロードが済んだら解凍してください。

解凍した「lightbox2.04」フォルダの中には「css」「js」「images」の3つのフォルダとindex.htmlファイルが入っています。
index.htmlファイルはテスト用ファイルですので削除しておいてください。

フォルダ名が長いのが気になるので、ここで「lightbox2.04」フォルダを「box」に改名します。そしてここからがちょっとめんどくさい。
でも一回やってしまえばあとは楽になれますのでがんばってください。

boxフォルダの中にあるjsフォルダ。その中にあるlightbox.jsを書き換えなければなりません。
49行目、50行目、109行目、122行目の4行にそれぞれ”images/～gif”という記述があるのですが、そこをhttp://から始まるフルパス（絶対パス）に修正します。

"images/～gif"
　↓　↓　↓
"http://サイトURL/box/images/～gif"

となるわけです。※赤字が追加部分
4行全部。面倒ですがこれをやっておかないと階層が変わった時にCLOSEなどの画像が表示されませんのでお気を付け下さい。あ、images/～gifの部分はいじったり消したりしないでくださいね。

修正が終わったら、サイトのトップディレクトリにboxフォルダをアップロード。

ウェブページの<head>～</head>内に以下のソースを記述。

<script type="text/javascript" src="http://サイトURL/box/js/prototype.js"></script>
<script type="text/javascript" src="http://サイトURL/box/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://サイトURL/box/js/lightbox.js"></script>
<link rel="stylesheet" href="http://サイトURL/box/css/lightbox.css" type="text/css" media="screen" />

※赤字部分はご自身のサイトURLに書き換えてください
このソースはLightboxを使用したいページの全てに記述する必要があります。

これで完了。
画像をクリックした時にはアニメーション風に拡大されるようになったと思います。

あとはワードプレスのプラグインと同様。拡大前の画像を拡大後の画像にリンクして、そのaタグにrel=”lightbox”という属性を付加すればOKです。

IEでの表示不具合

他のJavaScriptとの相性が悪いようです。
例えばYouTubeなどの動画があると、IEではページを開かずに中断されてしまいます。

その場合は先ほど「ウェブページの<head>～</head>内に～」としていたソース部分（<link rel="stylesheet" href="http://サイトURL/box/css/lightbox.css"
type="text/css" media="screen" />以外の3行）を、ウェブページのbody内に移動させることによって回避することが出来ます。
</body>のすぐ上などがおすすめです。

※これは回避策です。
head部分に記述した方が動作が安定しているのは間違いありません。

こちらの記事もあわせてどうぞ

« 超マニアックな面白アニメーションアイコン無料ダウンロード

Home

Google PageRank更新…とYahoo!順位変動 »

コメントはまだありません

コメントは管理者による内容確認後に表示されます。
多少時間がかかる場合がありますのでご了承ください。