Lightweight JavaScript Image Gallery and Lightbox Library – boxy.js

Preview:

Description:

boxy.js is a JavaScript library for creating responsive lightboxes and image galleries without writing any JavaScript and CSS codes.

Features:

• Single image lightbox display
• Gallery lightbox with horizontal scrolling
• Keyboard navigation support
• Touch-friendly controls
• Image descriptions via alt text or aria-labels
• URL sharing capabilities

See It In Action:

How to use it:

1. Grab the CSS and JavaScript files and include them in your web page.

<link href="boxy.css" rel="StyleSheet">
<script src="boxy.js"></script>

2. For a single image lightbox, just add the boxyimg class to your <img> tag:

<img src="1.jpg" class="boxyimg" alt="Demo">

3. To create a gallery with multiple images that opens in a lightbox, create a container with the ID “boxy” and place your images inside. The library automatically converts this into a slider with lightbox functionality. When a user clicks on any image, it opens in the lightbox view with navigation controls to move between images.

<div id="boxy">
  <img src="1.png">
  <img src="2.jpg">
  <img src="3.jpg">
  ...
</div>

Best Practices:

• Use descriptive alt or aria-label attributes on your images. These are used for the lightbox description.
• Preload your images if possible, for a smoother experience.
• Be mindful of the number of images in a gallery. Too many could impact performance.

Alternatives:

Lightbox2

• Pros: Mature, supports videos
• Cons: Requires jQuery, larger footprint
• Prefer Boxy.js when: Using modern browsers without jQuery

Fancybox

• Pros: Touch gestures, iframe support
• Cons: Complex configuration
• Prefer Boxy.js when: Needing simple image-only displays

PhotoSwipe

• Pros: Full mobile gesture support
• Cons: Complex initialization
• Prefer Boxy.js when: Implementing basic galleries quickly