イケてる!レスポンシブ、タッチフレンドリーのライトボックス系jQueryプラグイン「Image Lightbox」

responsive-image-lightbox-thumb

シンプルでイケてるjQueryを使ったライトボックス系のプラグインをご紹介します。あと、公式ページの説明では動かなかったので自分が実装したときのソースコードを書いておきます。

ちなみに前回記事にしたツールチップのプラグインと同じ作者ですね。センスありまくりです。

ライトボックス系プラグイン「Image Lightbox」

画像読み込み中のローディングデザインがイケメンです。実際の動きはDEMOページをどうぞ。

基本的な使い方

このライトボックスは以下3つの手順で実装出来ます。

  1. 表示したいimg要素を用意する
  2. Image Lightbox用のCSSを貼り付ける
  3. (ソースファイルをダウンロードして)プラグインの読み込み、実行

公式の説明を参考に、デフォルト設定での使い方について記述しておきます。

しかし冒頭で述べたように、公式の説明のままでは動かなかったので僕が実装出来たときのソースコードを書きます。もし動かない方は参考にしてみて下さい。

表示したいimg要素を用意する

img要素を用意し、そのimg要素をaタグで囲みます。aタグのリンクには拡大表示したい画像のURLを指定しましょう。僕はこうしなければ動きませんでした。

そして本家で説明されている、img要素に「id=”imagelightbox”」の属性は設定しません。

Image Lightbox用のCSSを貼り付ける

このプラグイン用にCSSを用意します。ホームページのCSSファイルに貼り付けておきましょう。

この「#imagelightbox」は、クリックして拡大表示された画像に付くID属性になります。

 プラグインの読み込み、実行

公式ページからファイルをダウンロードして<script></script>タグで読み込みます。(ソースファイルはページ中央、見出しが「Javascript」の位置にあります。基本的には圧縮されたファイルサイズの小さいimagelightbox.min.jsを使いましょう)

プラグインを読み込んだら、実行させます。jQueryを既に読み込んでいる場合は以下ソースコードの1行目を削除して下さい。

ひとまずこれで動きます。動かない場合はファイルパスが間違っていないか、jQueryがちゃんと読み込まれているか確認してみて下さい。

プラグインのオプション

Image Lightboxにはオプションが幾つか用意されています。以下、本家のコメントの英語を日本語に翻訳。(by Google翻訳

オプションを見た感じ、ライトボックス起動時や画像読み込みしたときに関数を呼び出せるオプションがあるので色々カスタマイズしやすそうですね。

キャプションや閉じるボタン、ナビゲーションは?

実はこのライトボックス、シンプルさを前面に押し出しているので

  • キャプション(画像の補足説明)
  • 閉じるボタン
  • ナビゲーション

が表示されません。オプションでも設定出来ません。

じゃあどうしてDEMOページで表示されているのかというと、先述したプラグインのオプションでキャプションや閉じるボタン、ナビゲーションを表示する関数を呼び出してるんですね。

これに関しては実際にDEMOページのソースコードを見てコピーして使うのが良いと思います。


シンプルなライトボックスを求めているなら「Image Lightbox」はとてもオススメです!

最終更新日:2014年9月28日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/responsive-image-lightbox/trackback/