Darkbox jQuery Galleryはシンプルで小さいレスポンシブjQueryポップアップギャラリー。

jQueryライブラリ、darkbox.js、darkbox.cssを含める。

<link href="darkbox.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="darkbox.js"></script>

data-darkbox-descriptionには説明を追加できます。

<img src="http://placehold.it/50x50/f0f"
     data-darkbox="http://placehold.it/800x600/f0f"
     data-darkbox-description="<b>Title</b><br>Lorem ipsum dolor sit amet">

data-darkboxを使用。

<a data-darkbox="http://placehold.it/100x101/ff0">View image</a>

グループ化したい場合はdata-darkbox-group="groupName"を使用します。

<img
     src="http://placehold.it/50x50/0bf"      
     data-darkbox="http://placehold.it/800x600/0bf"
     data-darkbox-group="two"
     data-darkbox-description="<b>Title</b><br>Lorem ipsum dolor sit amet">
<img
     src="http://placehold.it/50x50/f0b"
     data-darkbox="http://placehold.it/800x600/f0b"
     data-darkbox-group="two"
     data-darkbox-description="<b>Image 2</b><br>Description text...">

<span data-darkbox-group="group2" data-darkbox="http://placehold.it/800x600/f00"></span>
<span data-darkbox-group="group2" data-darkbox="http://placehold.it/600x800/00f"></span>
<a data-darkbox-group="group2">Open group2</a>

MIT

• Tag
• Gallery
• jQuery
• Lightbox
• Responsive