僕のブログにもLightbox JS 2.0を入れてみることにしました。
Lightboxとはなにか？
そんなの下の画像をクリックすればわかりますｗ
赤いポルシェ～が拡大表示されたでしょうか？
こんな風に、拡大表示がポップアップなしで、表示できるというスグレモノｗ
Lightbox JS には、1.0もありますが、2.0はさらにWeb2.0っぽくなっています。
早速設置してみましょう～。割と簡単ですｗ
～インストール方法～
1.ファイルのダウンロード
下記のリンクから、Lightbox JS 2.0 をダウンロードする。
http://www.huddletogether.com/projects/lightbox2/
記事投稿時点での最新バージョンは 2.02 です。
2.ファイルをアップロードする。
Lightbox JS 2.0 本体のファイルをアップロードさせましょう。
Mobable Typeに設置する場合は、下のような構造にするといいかもしれません。
ブログディレクトリ
└ /lightbox
└ /css
└ lightbox.css
└ /images
└ ***.gif
└ /js
└ ***.js
└ index.html
└ index.html
うまく伝わったかな？
このような、ファイル構造であることを前提に説明していきます。
3.HTMLファイルに、Lightbox JS 2.0 を組み込む。
Lightbox JS 2.0 を使用したいHTMLのヘッダー(<head></head>)部分に下のようなタグを組み込みます。
<link rel="stylesheet" href="http://自分のサイトのURL/lightbox/css/lightbox.css" type="text/css" />
<script type="text/javascript" src="http://自分のサイトのURL/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="http://自分のサイトのURL/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://自分のサイトのURL/lightbox/js/lightbox.js"></script>
Movable Typeの場合は下のものでもOKです。
<link rel="stylesheet" href="<$MTBlogURL$>lightbox/css/lightbox.css" type="text/css" />
<script type="text/javascript" src="<$MTBlogURL$>lightbox/js/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<$MTBlogURL$>lightbox/js/lightbox.js"></script>
その場合は、
メインページ、エントリーアーカイブ、カテゴリーアーカイブ、日付アーカイブ
の各テンプレートに追加してください。
4.画像パスを絶対パスへ変更。
Lightboxが設置してあるフォルダと違うところから参照する場合は、必ずやってください。
まず、js フォルダ内の、"lightbox.js" を編集します。
62,63行目の、部分を訂正します。
var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";
この部分を、
var fileLoadingImage = "http://自分のサイトのURL/lightbox/images/loading.gif";
var fileBottomNavCloseImage = "http://自分のサイトのURL/lightbox/images/closelabel.gif";
このように変更してください。
変更しないと、各アーカイブで、表示がぐっちゃになりますｗ
次に、css フォルダ内の "lightbox.css" を編集します。
45～54行目の部分を修正します。
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
この部分を、
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(http://自分のサイトのURL/lightbox/images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://自分のサイトのURL/lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://自分のサイトのURL/lightbox/images/nextlabel.gif) right 15% no-repeat; }
こんな感じに編集してください。
ちなみに、MTの方は、スタイルシートテンプレートに組み込んでしまってもOKです。
5.Movable Typeでのテンプレートの設定。
ココの部分は、MTに導入するとき意外は、飛ばしてください。
エントリーアーカイブページの
<body class="…"onload="individualArchivesOnLoad(commenter_name);
この太字で示した部分を、削除してください。
そして、</body>の前のあたりに
<script type="text/javascript">
<!--
individualArchivesOnLoad(commenter_name);
//-->
</script>
こいつを追加させます。
どうも、MTのonloadイベントハンドラと競合して、うまくいかないようなのです。
なんで、このような方法で対処すると動くそうです。
6.リンクの設定。
最後に、画像のリンクの設定です。
Lightbox JS 2.0 を適用させたい画像に次のリンクを設定します。
<a href="Light Boxで表示させたい画像のURL"rel="lightbox"><img src="ページに表示させたい画像のURL" ></a>
要するに、画像のリンクにrel="lightbox"を追加させるだけですｗ
これで、画像をポップアップしないで表示させることができるはずです。
できたかな～？
以上で解説は終了です。
ちなみに、ページにFlashがあると、Flashが前に出ちゃって、おかしくなるんだけど、その対処方法はまた後日ということで。
ぜひ皆さんも、自分のブログやHPにLightboxを導入しましょ～ｗ
カッコイイしｗ
さらに、ロード画像とか配色を変えると、さらにオリジナルな感じになっていいかも。
いじるところが少ないけど、カスタマイズしてみる価値はありです。
もし、わからないことなどありましたらコメントなり、メールなりくれれば対応します。
できる限りの返事は返しますので、気軽にどうぞ。
～お・ま・け～
ただ、この Lightbox にもひとつ欠点があり、
こんな、フルHDの画像を表示させてみよう。
はみ出す・・・。閉じるのに大きくスクロールしなきゃならん。
初めて、Lightbox に遭遇したとき、こんな馬鹿でかい画像だったりすると、戻れなくなる。
といっても、VGA(640×480)サイズ以下にしておけば、ほとんど大丈夫だと思うが。
Lightbox は、いろいろな面で活用できそうだ。
これからの発展に期待ｗ
参考にさせていただいたサイト：
Movable Typeの不具合は知っていたのですが、こんな簡単なことだったかｗ
追記：
もし、Lightbox 2.0 で、1.0のように画像クリックで閉じるように設定したい方は、下のページもご覧ください。
クリックで閉じることができないからと、2.0移行を踏みとどまっている方も試してみてはどうでしょうか？
残念ながら、このブログで下記の機能をお見せすることができません。
このブログのLightboxは改造済みで、現在この機能が無効になるような改造を施しているからです。（クリックしたら閉じる)
現在別ページで実行できるような環境を製作中ですのでお待ちください。
Lightbox には、スライドショーのような機能も付いています。
Lightbox で開いた画像の右側の方にマウスをやると、Nextが表示されると思います。
それを押すと、次の画像が・・・。
すごいのであります。
そして、Lightbox のもっとすごいところを見せてあげよう。
次々にスライドショーしてくと、画像に合わせてフレームが換わるこの動き。
なんともすごい。今の時代、Flashなしでココまでできるのか・・・。
<a href="Lightboxで表示させたい画像のURL"rel="lightbox[適当なグループ名]"><img src="ページに表示させたい画像のURL" ></a>
こうすることで、同じグループ名を設定した画像がスライドショーになる。
Movable Typeであれば、CMS.pmを変更することで、アップロードの際に自動的にタグを入れてくれるように設定できます。
はじめまして
わかりやすい解説ご苦労様でした。
簡単に導入できました。
でも、ちょっと問題が発生して、右下に出るclose画像が表示されませんがどこらへんの問題になるでしょうか？
それと、もう一つ質問があるんですが、
恐らくコレの前のバージョンだと思うんですが
↓コレです
http://www.huddletogether.com/projects/lightbox/
このように元画像がlightboxにより表示されたあと、その元画像をクリックすることによってcloseする。
というのを2.0に導入することは可能でしょうか？
いきなり長い質問で失礼しました。お時間ありましたらよろしくおねがいします。
すいません。
close画像が表示されない件に関しては絶対パスにすることで解決できました。
radarさん。はじめまして。
>close画像が表示されない件に関しては絶対パスにすることで解決できました。
そうですね。どのようなものに設置したかはわかりませんが、MT以外でもいろいろな場所からアクセスする場合、絶対パスで指定しないと、一部のページで動かなくなってしまいますね・・・。
少し説明不足でした。
>このように元画像がlightboxにより表示されたあと、その元画像をクリックすることによってcloseする。
>というのを2.0に導入することは可能でしょうか？
自分で、JavaScriptの内容を変えれば可能です。
少し、僕もやってみましたが、JavaScriptは得意でないので、できませんでした。
ググってみるなりして、探してみてください。
お力になれなくてすいませんでした。
とおもったら、できました。
ブログに載せるので、しばらくお待ちください。
回答有り難う御座いました。
いえいえ、Javascriptをいじるってわかっただけでも対処のしようがあるので助かます♪
と、いっても自分も知識はないんですぐには無理そうですが、頑張ってみます！
もしかしたら、先ほどのコメントで行き違いになって、見ていないかもしれませんけど、クリックで閉じれる方法を書いておきました。
http://techno-st.net/2006/11/lightbox_js_20_1.html
参考にしてみてください。
きっと、このコメントを見ていることを願っています・・・。