パソコン・電気製品

Lightboxって言うんだぁ

2012年09月23日
頼まれたツールをコーディングしていて、前から気になっていたソフトを見つけました。
写真など画像をクリックしたら、別ブラウザやタブを開くことなく大きな画像が表示できる、あのツールです。
どうやるのかな、と思いつつも、直接仕事に関係ないので、思っているだけにとどまってました。

いくつかのツールが出ています。
Lightbox Puls
Lightbox 2
が有名なようです。

初めに【Lightbox 2】を入れてみたのですが、なぜかうまくいきませんでした。
根性を入れて原因を探す前に、【Lightbox Puls】を入れてみてしまいました。こちらはすぐに動作しました。
あまり根性を使いたくなかったので、今のところ【Lightbox Puls】で動かしています。
f-photos

どちらも使い方はほぼ同じで簡単なのですが、どうして【Lightbox 2】は動作しなかったのでしょう。またいつか時間ができたら腰を据えて探ってみます。

【Lightbox Puls】の使い方です。

1. Lightbox Pulsからダウンロード。
2. 解凍。
3. 【resource】ディレクトリを使いたいサイトのトップにアップロード。
4. 使いたいページのhtmlヘッダに次のタグを追加。
 <link rel="stylesheet" type="text/css" href="./resource/lightbox.css" media="screen,tv">
 <script type="text/javascript" charset="UTF-8" src="./resource/spica.js"></script>
 <script type="text/javascript" charset="UTF-8" src="./resource/lightbox_plus.js"></script>
5. 【Lightbox Puls】を使いたい画像にリンクをはる。
 <a href="画像のURL" rel="lightbox">
 <img src="画像のURL" />
 </a>
(【href】や【src】の後ろのパスは、自分の環境に合わせて変更)

いやぁ、便利だわ。便利だし、さすがにかっこいいわ。もっと早く探していれば良かったかな。

ふと思ったのですが、【Lightbox】はiPadやスマートフォンなどの端末で動くのでしょうか? JavaScriptなので、少し不安です。
もし動かないようなら、端末を見て、タグを書き換えたいです。
母がiPadを使っているので、今度試してみようと思います。
コメントの書き込み
コメント