ahmednooor / Halkabox.js
Licence: mit
A simple and basic Javascript lightbox.
Stars: ✭ 75
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Halkabox.js
Baguettebox.js
⚡ Simple and easy to use lightbox script written in pure JavaScript
Stars: ✭ 2,252 (+2902.67%)
Mutual labels: lightbox, vanilla-javascript
Ui Challenges
UI challenges by Semicolon, we accept challenges on twitter on #SemicolonChallenge
Stars: ✭ 69 (-8%)
Mutual labels: vanilla-javascript
Splide
Splide is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.
Stars: ✭ 786 (+948%)
Mutual labels: vanilla-javascript
Spotlight
Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.
Stars: ✭ 799 (+965.33%)
Mutual labels: lightbox
Vanilla Ui Router
Simple vanilla JavaScript router
Stars: ✭ 42 (-44%)
Mutual labels: vanilla-javascript
Vanilla Lazyload
LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.
Stars: ✭ 6,596 (+8694.67%)
Mutual labels: vanilla-javascript
Just Validate
Lightweight (~4,5kb gzip) form validation in Javascript Vanilla, without dependencies, with customizable rules (including remote validation), customizable messages and customizable submit form with ajax helper.
Stars: ✭ 74 (-1.33%)
Mutual labels: vanilla-javascript
Fine Uploader
Multiple file upload plugin with image previews, drag and drop, progress bars. S3 and Azure support, image scaling, form support, chunking, resume, pause, and tons of other features.
Stars: ✭ 8,158 (+10777.33%)
Mutual labels: vanilla-javascript
Learn Vanilla Js
Open source list of paid & free resources to learn vanilla JavaScript
Stars: ✭ 945 (+1160%)
Mutual labels: vanilla-javascript
Cookie Js
A tiny (1.24 KB gzipped), stand-alone JavaScript utility for managing cookies in the browser.
Stars: ✭ 12 (-84%)
Mutual labels: vanilla-javascript
Lity
Lightweight, accessible and responsive lightbox.
Stars: ✭ 1,051 (+1301.33%)
Mutual labels: lightbox
Mind Elixir Core
Mind-elixir is a framework agnostic mind map core
Stars: ✭ 798 (+964%)
Mutual labels: vanilla-javascript
Bin
A tiny (<1kb) localStorage and sessionStorage helper library.
Stars: ✭ 70 (-6.67%)
Mutual labels: vanilla-javascript
Simplelightbox
Touch-friendly image lightbox for mobile and desktop
Stars: ✭ 744 (+892%)
Mutual labels: lightbox
Smartphoto
The most easy to use responsive image viewer especially for mobile devices
Stars: ✭ 858 (+1044%)
Mutual labels: lightbox
Why Frameworks Matter
Why vanilla JavaScript isn't used for large applications
Stars: ✭ 32 (-57.33%)
Mutual labels: vanilla-javascript
Webcomponents From Zero To Hero
An introduction to writing raw web components.
Stars: ✭ 70 (-6.67%)
Mutual labels: vanilla-javascript
halkaBox.js
A simple and basic Javascript lightbox.
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, intitle
ordata-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 beforehalkaBox.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`
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].