Lightweight Gallery Slider with Lightbox Support – Simple Gallery

Simple Gallery is a minimalist JavaScript library that creates responsive and mobile-friendly lightboxes, image sliders, and lightbox galleries with ease.

It implements touch gestures, keyboard navigation, and smooth animations without external dependencies. Ideal for content-heavy sites needing basic media presentation.

Features:

• Single Image Lightbox: Click/tap an image to open it in a fullscreen view.
• Gallery Slider: Wrap images in a container to create a responsive slider.
• Gallery Lightbox: Clicking an image within the slider then opens the entire gallery in a navigable lightbox view.
• Slider Navigation: Navigate galleries using pagination dots, clicking the left/right areas of the image, or touch swipes.
• Keyboard Support: Use Arrow keys for previous/next, Enter to toggle lightbox (if enabled), and Escape to close the lightbox.
• Performance: Includes image lazy loading within slides and preloading of adjacent images.
• Smooth Animations: Uses a FLIP-like technique for lightbox open/close transitions.
• Basic Customization: Background colors (galleryBg, lightboxBg) and animation duration (animationDurationMs) can be tweaked directly in the script.
• Zero Dependencies: Just plain JavaScript.

See it in action:

How to use it:

1. Download simple-gallery.js library and include it on your web page.

<script src="simple-gallery.js"></script>

2. Add the class ‘-lightbox’ to the image you want to open in a lightbox on click.

<img src="/path/to/image.jpg" class="-lightbox">

3. Create an image slider with pagination dots and left/right navigation.

<div class="-gallery">
  <img src="/path/to/image-1.jpg">
  <img src="/path/to/image-2.jpg">
  <img src="/path/to/image-3.jpg">
  ...
</div>

4. To make the images within the slider also open a full gallery lightbox, add the ‘-lightbox’ class to the gallery container ‘div’.

<div class="-gallery -lightbox">
  <img src="/path/to/image-1.jpg">
  <img src="/path/to/image-2.jpg">
  <img src="/path/to/image-3.jpg">
  ...
</div>

5. You can adjust a few settings directly at the top of ‘simple-gallery.js’:

• galleryBg: Background color for the inline gallery slider (default: ‘transparent’).
• lightboxBg: Background color for the fullscreen lightbox overlay (default: ‘black’).
• animationDurationMs: Transition speed in milliseconds (default: 400). This affects slider transitions and lightbox animations.
• imgPreloadCount: How many images to preload ahead/behind the current slide in a gallery (default: 2). Set higher for smoother transitions on fast connections, lower to save bandwidth. Solo lightboxes (-tmp galleries internally) preload all images.

FAQs

Q: Can I customize the appearance beyond the background colors in the JS?

A: Yes. The script injects styles with an ID #gallery-css. You can override these rules in your own stylesheet using more specific CSS selectors or, as a last resort, !important. Targeting classes like .-gallery, .simple-slider, .indicator, .nav-area, etc., will work. Modifying the CSS string within the applyCss function is also an option if you’re comfortable editing the script directly.

Q: How does it handle images of different aspect ratios in a gallery slider?

A: The script determines the aspect ratio for the main .-gallery container based on the widest image it finds inside, once that image has loaded. Individual images within the slider (.slide img) use object-fit: contain by default, so they will scale down to fit within the container’s aspect ratio without being cropped or distorted.

Q: Will Simple Gallery work if I add images to the page dynamically after load?

A: No, not automatically. The initialization logic (initSoloImages, initGalleries) runs once when the DOM is ready. If you add new img.-lightbox or div.-gallery elements later (e.g., via AJAX), you would need to manually call the relevant initialization functions again or adapt the script to use something like MutationObserver to detect new elements.

Q: I see a div with a -tmp class appear in the DOM inspector when I click a solo lightbox image. What’s that?

A: simple-gallery.js creates that temporary, hidden gallery (.-tmp) to manage all solo img.-lightbox instances using the same core slider/lightbox code. It’s how the library avoids duplicating logic. You don’t need to interact with or style this element directly.

Q: How accessible is Simple Gallery?

A: It has baseline accessibility features: keyboard navigation (Arrow keys for slider, Enter/Escape for lightbox) is supported, and interactive elements (img.-lightbox, .-gallery) get tabindex="0". Focus is managed when the lightbox opens and closes. For improved accessibility, you could potentially enhance it by adding relevant ARIA attributes (like aria-label for controls, aria-hidden for inactive slides, role="dialog" for the lightbox) by modifying the script or wrapping its output.