【Javascript】シンプルなJavascriptライトボックスhalkaBox

Javascript

halkaBox.js

January 14, 2018

halkaBox.jsはシンプルなJavascriptライトボックス。タッチデバイスをサポート、キーボードの矢印キーでナビゲート、SVGアイコン

Usage Example

Files

<link rel="stylesheet" href="path/to/halkaBox.min.css">
<script src="path/to/halkaBox.min.js"></script>

Markup for Galleries

<a href="..." class="gallery1" title="Caption"><img src="..."></a>
<a href="..." class="gallery1" title="Caption"><img src="..."></a>
<a href="..." class="gallery1"><img src="..."></a>

<a href="..." class="gallery2"><img src="..."></a>
<a href="..." class="gallery2" title="Caption"><img src="..."></a>
<a href="..." class="gallery2" title="Caption"><img src="..."></a>

Markup for Single Images

<a href="..." class="hb-single" title="Caption"><img src="..."></a>
<a href="..." class="hb-single"><img src="..."></a>
<a href="..." class="hb-single" title="Caption"><img src="..."></a>
<a href="..." class="singleImage1" title="Caption"><img src="..."></a>
<a href="..." class="singleImage2"><img src="..."></a>

Javascript for Galleries

halkaBox.run("gallery1");
halkaBox.run("gallery2");

Javascript for Single Images

halkaBox.run("hb-single");
halkaBox.run("singleImage1");
halkaBox.run("singleImage2");

MIT

Latest Posts

Related Posts