Halkabox NPM | npm.io

halkaBox.js

A simple and basic Javascript lightbox.

Screenshot

Features

Made with Javascript. No dependencies required.
Simple and lightweight.
Multiple galleries. Custom options for each.
Keyboard arrow keys to navigate and escape to close supported.
Swipe gestures supported on touch devices.
Spread/Pinch or Double Tap to Zoom In/Out on touch devices.
MouseWheel for next/prev images.
Ctrl+MouseWheel to Zoom In/Out.
SVG Icons.
Transitions via CSS Keyframes.
Minimal.
Light and Dark themes.

Download

npm

npm install halkabox --save

yarn

yarn add halkabox

Usage Example

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 title or data-title attributes.

<a href="..." class="gallery1" title="Caption"><img src="..."></a>
<a href="..." class="gallery1" data-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" data-title="Caption"><img src="..."></a>

Markup for Single Images

"hb-single" class is reserved for single images. This way you can set options for all single images at once.

<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. You can use custom options for each single image this way.

<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");

Options

Setting Options Globally

halkaBox.options({
    hideButtons: true,       // hide buttons on touch devices (true || false)
    animation: "slide",      // animation type on next/prev ("slide" || "fade")
    theme: "light",          // lightbox overlay theme ("light" || "dark")
    preload: 2,              // number of images to preload
    swipeDownToClose: false, // swipe down to close (true || false)
    swipeUpToClose: false,   // swipe up to close (true || false)
    nextPrevOnWheel: true,   // goto next/prev image on wheel (true || false)
    isZoomable: true         // ability to zoom image (true || false)
});
halkaBox.run("...");
...

halkaBox.options() should come before halkaBox.run().

Setting Options Individually

halkaBox.run("...", {
    hideButtons: true,       // hide buttons on touch devices (true || false)
    animation: "slide",      // animation type on next/prev ("slide" || "fade")
    theme: "light",          // lightbox overlay theme ("light" || "dark")
    preload: 2,              // number of images to preload
    swipeDownToClose: false, // swipe down to close (true || false)
    swipeUpToClose: false,   // swipe up to close (true || false)
    nextPrevOnWheel: true,   // goto next/prev image on wheel (true || false)
    isZoomable: true         // ability to zoom image (true || false)
});
...

Available Options

Option	Value Type	Default Value	Available Values	Description
`hideButtons`	`Boolean`	`true`	`true`, `false`	Hides next/previous buttons on touch devices.
`animation`	`String`	`"slide"`	`"slide"`, `"fade"`	Sets animation type on next/previous actions.
`theme`	`String`	`"light"`	`"light"`, `"dark"`	Sets lightbox overlay theme.
`preload`	`Number`	`2`	`0`, `1,2,3, ...`	Sets the number of images to preload.
`swipeDownToClose`	`Boolean`	`false`	`true`, `false`	Swipe down to close lightbox.
`swipeUpToClose`	`Boolean`	`false`	`true`, `false`	Swipe up to close lightbox.
`nextPrevOnWheel`	`Boolean`	`true`	`true`, `false`	Wheel down for next image and up for previous.
`isZoomable`	`Boolean`	`true`	`true`, `false`	Ability to zoom the image.

API

var gallery = halkaBox.run("class-name", {/* options if any */});
gallery.open(0)     // opens the lightbox. takes index of the image <0,1,2...>. first is 0
gallery.next()      // shows next image in the gallery
gallery.previous()  // shows previous image in the gallery
gallery.close()     // closes the lightbox
gallery.destroy()   // unbinds event bindings. removes lightbox markup
// other methods won't work after calling `destroy`