jQuery
【jQuery】シンプルなレスポンシブjQueryギャラリーDarkbox jQuery Gallery
April 16, 2017

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