hal
halkabox
npm i halkabox
hal

halkabox

A simple and basic Javascript lightbox.

by Ahmed Noor E Alam

1.6.0 (see all)License:MITTypeScript:Not Found
npm i halkabox
Readme

halkaBox.js

NPM License Dependecies

A simple and basic Javascript lightbox.

Demo Page

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

OptionValue TypeDefault ValueAvailable ValuesDescription
hideButtonsBooleantruetrue, falseHides next/previous buttons on touch devices.
animationString"slide""slide", "fade"Sets animation type on next/previous actions.
themeString"light""light", "dark"Sets lightbox overlay theme.
preloadNumber20, 1,2,3, ...Sets the number of images to preload.
swipeDownToCloseBooleanfalsetrue, falseSwipe down to close lightbox.
swipeUpToCloseBooleanfalsetrue, falseSwipe up to close lightbox.
nextPrevOnWheelBooleantruetrue, falseWheel down for next image and up for previous.
isZoomableBooleantruetrue, falseAbility 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`

Compatibility

All the latest versions of,

  • Chrome
  • Firefox
  • Edge
  • IE
  • Opera
  • Safari

Feel free to report any issues and share your feedback in the issues tracker.

Licence and Credits

License: MIT

Author: Ahmed Noor

Credits: Unsplash for images.

Downloads/wk

32

GitHub Stars

76

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
1.6.0
latest
3yrs ago
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate