パソコン・電気製品
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を使っているので、今度試してみようと思います。
写真など画像をクリックしたら、別ブラウザやタブを開くことなく大きな画像が表示できる、あのツールです。
どうやるのかな、と思いつつも、直接仕事に関係ないので、思っているだけにとどまってました。
いくつかのツールが出ています。
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を使っているので、今度試してみようと思います。
コメント