単体で動作するシンプルなlightbox系スクリプト「Shadowbox.js」

単体で動作するシンプルなlightbox系スクリプト「Shadowbox.js」

単体で動作するシンプルなlightbox系スクリプト「Shadowbox.js」

Shadowbox.jsは、単体で動作するlightbox系のスクリプトです。画像をふわっと拡大表示させることができます。

挙動については、以下ページよりご確認いただけます。

デモページを見る

Shadowbox.jsの使い方

まずは、GitHubからShadowbox.jsのファイル一式をダウンロードします。

ダウンロードしたファイルを解凍し、sourceフォルダ内の以下ファイルをサーバーに設置します。

  • shadowbox.js
  • shadowbox.css
  • shadowbox-icons.png

shadowbox.cssとshadowbox-icons.pngは同階層に設置してください。

ファイルを設置したら<head>~</head>に以下を記述して、ファイルを読み込んだ上でShadowbox.jsを実行します。

<link rel="stylesheet" href="shadowbox.css">
<script src="shadowbox.js"></script>
<script>Shadowbox.init();</script>

ファイルパスは適宜変更してください。

HTMLではリンク先を画像にして、rel属性に”shadowbox”を指定します。

<a href="sample.jpg" rel="shadowbox"><img src="sample.jpg"></a>

画像リンクをクリックすると、以下のように拡大表示されます。

画像の拡大表示

複数の画像をグループ化する場合は、以下のようにrel属性に”shadowbox[group]”を指定します。

<ul>
  <li><a href="sample1.jpg" rel="shadowbox[group]"><img src="sample1.jpg"></a></li>
  <li><a href="sample2.jpg" rel="shadowbox[group]"><img src="sample2.jpg"></a></li>
  <li><a href="sample3.jpg" rel="shadowbox[group]"><img src="sample3.jpg"></a></li>
</ul>

グループ内の画像を拡大表示すると、以下のように矢印が表示されてグループ内の画像を移動できます。

拡大画像のグループ化

あとがき

使い方もシンプルでわかりやすいですね。

同じようにjQuery非依存・単体で動作するlightbox系スクリプトは、「Lightbox」や「Luminous」もありますので、ぜひご参照ください。

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

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です