単体で動作するシンプルな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」もありますので、ぜひご参照ください。

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