Lightbox JS という JavaScript ライブラリがあるんですが、これをはじめて見たときからフォトログ作ってこいつを活かしたいと思ってまして、ちょうど 週末の連休で時間があったのでちゃっちゃっと作ってみました。フォトログがやりたかったのか、Lightbox JS を使ってみたかっただけなのか...... 写真の腕はこれから磨くということで。
今回は、Lightbox JS のニューバージョン、「Lightbox JS v2.0」 を使わせてもらうことに。組み込みはたいして難しくないです。配布サイトは英語なので、英語に拒否反応が...... と言う人のために以下簡単な説明を。
まずは、JavaScript ファイルを一式ダウンロードしてきましょう。ページの真ん中あたりに 「Download」 というリンクがありますので、そちらをクリック。
落としてきたファイルを解凍すると、いくつかのフォルダとファイルが出てきます。そのうち、「index.html」 を除いて、そのままサーバにアップしてしまいましょう。
次に、Lightbox JS を適用したいページの <head> ～ </head> 間に下記の記述を。
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript" src="/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="/js/lightbox.js"></script>
各ファイルのパスは、Lightbox JS v2.0 のファイルをアップロードした場所に合わせて変えてください。上の例はドメインのルートディレクトリにファイルをアップロードした場合の例。
あとは、ページ内の画像などに下記のようにリンクを貼ってあげれば完了。
<a href="/image/sample.jpg" rel="lightbox" title="sample">sample</a>
rel="lightbox"
を必ず入れてください。これがないと動作しません。また、
rel="lightbox[group_name]"
のようにすることで、複数の画像をグループ化することができます。さらに、
title="sample"
とすると、画像の下にキャプションを入れることができます。ここに HTML タグを記述することもできますが、「<」、「>」、「"」 は文字参照で記述しないといけません。
あと、細かいところですが、 body 要素に margin や padding で 「0」 以外の数値を指定していると、画面がブラックアウトしたときに余白ができてしまうことがあります。
また、body 要素に height:100% とスタイル指定しておいた方がよいでしょう。場合によって下側におなじく余白が出るときがあります。
さらに、「lightbox.js」 ファイルの 60行目付近、
var fileLoadingImage = "images/loading.gif"; var fileBottomNavCloseImage = "images/closelabel.gif";
という記述がありますが、ここの画像のパスを絶対パス、あるいは絶対 URI に直しておきましょう。読み込んだページの階層によっては、画像のリンク切れが発生します。例えば、Lightbox JS v2.0 のファイルをアップロードした場所がドメインのルートディレクトリなら、
var fileLoadingImage = "/images/loading.gif"; var fileBottomNavCloseImage = "/images/closelabel.gif";
のように変更しておけば大丈夫です。
こんなすばらしいスクリプトを無償で提供してくれたことに感謝しつつ、皆さんも楽しんでみてください。
