クリック/タップでふわりと画像を拡大表示できるスクリプト「Lightbox」

クリック/タップでふわりと画像を拡大表示できるスクリプト「Lightbox」

クリック/タップでふわりと画像を拡大表示できるスクリプト「Lightbox」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

  • 広告主様募集中
    格安で広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Lightboxは、クリックするとふわりと画像を拡大表示することができるJavaScriptのライブラリです。jQuery非依存で単体で動作します。

挙動については、以下デモページをご参照ください。

デモページを見る

スポンサードリンク

Lightboxの使い方

ステップ1. Lightboxのダウンロードとファイルの設置

GitHubからファイル一式をダウンロードします。ダウンロードしたファイルを解凍し、以下のファイルとフォルダをサーバー上にアップロードします。

  • dist/css/lightbox.min.css
  • dist/images
  • dist/js/lightbox.min.js

imagesフォルダは、css/jsフォルダと同階層に置いてください。

ステップ2. 各種ファイルの読み込み

以下を<head>~</head>内に記述して、CSSファイルとJSファイルを読み込みます。

<link rel="stylesheet" href="dist/css/lightbox.min.css">
<script src="dist/js/lightbox.min.js"></script>

JSファイルの読み込みは、</body>の直前に追加してもOKです。

ステップ3. HTMLのマークアップ

画像を拡大表示させたい箇所で、以下のようにマークアップします。

<a href="images/sample.jpg" data-lightbox="sample" data-title="タイトル"><img src="images/sample.jpg" alt=""></a>

リンク先は画像へのパス、data-lightbox属性には任意の名前を入れます。data-title属性は画像のタイトルを入れますが、こちらは省略可です。

複数の画像をグループ化したい場合は、data-lightbox属性で同じ名前を指定してあげます。


<a href="images/sample1.jpg" data-lightbox="sample"><img src="images/sample1.jpg" alt=""></a>
<a href="images/sample2.jpg" data-lightbox="sample"><img src="images/sample2.jpg" alt=""></a>
<a href="images/sample3.jpg" data-lightbox="sample"><img src="images/sample3.jpg" alt=""></a>

上記のようにすることで、複数の画像がグループ化され、拡大表示した時にスライドのように画像間を移動して表示できます。

Lightboxのオプション

Lightboxには様々なオプションが用意されています。オプションを指定したい場合は、以下のようなスクリプトをlightbox.min.jsの読み込みよりも後ろに追加します。


<script>
  lightbox.option({
    'resizeDuration': 200,
    'wrapAround': true
  })
</script>

指定できるオプションは以下の通りです。

オプション デフォルト値 説明
alwaysShowNavOnTouchDevices false 画像グループの場合、矢印を常に表示
albumLabel “Image %1 of %2” 画像グループ用のタイトル
disableScrolling false 画像拡大時のスクロール固定
fadeDuration 600 フェードイン・フェードアウトにかかる時間
fitImagesInViewport true 画面サイズによる自動リサイズ(画像のはみ出しを防止)
imageFadeDuration 600 イメージがロードされてからフェードインするのにかかる時間
maxWidth 指定なし 最大横幅
maxHeight 指定なし 最大縦幅
positionFromTop 50 拡大画像の表示位置(上部からの距離)
resizeDuration 700 異なるサイズの画像間を移動する際のリサイズにかかる時間
showImageNumberLabel true 画像の全枚数と現在の枚数表示
wrapAround false 画像グループ内の移動をループ

あとがき

導入も割と簡単なので、画像の拡大表示エフェクトを実装したい時は、ぜひ導入をご検討ください。jQueryに依存せず単体で動くライブラリというところも良いですね。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。