halkaBox.js
Halka is an Urdu word for being Lightweight
(Made with Javascript. No dependencies required)










Usage Example


Files


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


Markup for Galleries

anchor tags with same data-hb values will be treated as galleries.


<a href="..." data-hb="gallery1"><img src="..." alt="..."></a> <a href="..." data-hb="gallery1"><img src="..." alt="..."></a> <a href="..." data-hb="gallery1"><img src="..." alt="..."></a> <a href="..." data-hb="gallery2"><img src="..." alt="..."></a> <a href="..." data-hb="gallery2"><img src="..." alt="..."></a> <a href="..." data-hb="gallery2"><img src="..." alt="..."></a>


Markup for Single Images

data-hb="single" is reserved for single images.


<a href="..." data-hb="single"><img src="..." alt="..."></a> <a href="..." data-hb="single"><img src="..." alt="..."></a> <a href="..." data-hb="single"><img src="..." alt="..."></a>


Or you can set a unique data-hb value to a single anchor tag and it will be treated as a single image.


<a href="..." data-hb="singleImage1"><img src="..." alt="..."></a> <a href="..." data-hb="singleImage2"><img src="..." alt="..."></a>


Javascript for Galleries


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


Javascript for Single Images


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


For options and more documentation, visit Github