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」もありますので、ぜひご参照ください。