Halka is an Urdu word for being Lightweight
(Made with Javascript. No dependencies required)
Files
<link rel="stylesheet" href="path/to/halkaBox.min.css"> <script src="path/to/halkaBox.min.js"></script>
Markup for Galleries
anchor tags with shared classes will be treated as galleries.
put captions if any, in the title attributes.
<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
"hb-single" class is reserved 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>
or you can set a unique class to each anchor tag and it will be treated as a single image.
<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");
For options and more documentation, visit Github