Advanced Image Gallery Viewer In Vanilla JavaScript – zoombox

Category: Gallery , Modal & Popup | April 27, 2020
Views Total:879 views
Official Page:Go to website
Last Update:April 27, 2020


Advanced Image Gallery Viewer In Vanilla JavaScript – zoombox


zoombox is a responsive, swipeable vanilla JavaScript image viewer/gallery lightbox library to showcase your images in a fullscreen slideshow manner.


  • Autoplay with controls.
  • Thumbnail navigation.
  • Auto exacts caption text from img’s alt attribute:
  • Switch between images with touch swipe events.
  • Zoom in/out images with scroll.
  • Optional zoom in/out buttons.
  • AJAX image loading for dynamic web pages.
  • Easy to implement without any JS call.
  • Free to use For both commercial and Non-commercial Work.

How to use it:

1. Add the zoombox’s JavaScript and Stylesheet to the html.

<link rel="stylesheet" href="css/zoombox.min.css" />
<script src="js/zoombox.min.js"></script>

2. Add the zoombox attribute to your images. That’s it.

<img src="1.jpg" alt="Alt 1" zoombox>
<img src="2.jpg" alt="Alt 2" zoombox>
<img src="3.jpg" alt="Alt 3" zoombox>

3. Group your images in cases where you have multiple gallery instances on a page.

<img src="1.jpg" zoombox="one">
<img src="2.jpg" zoombox="one">
<img src="3.jpg" zoombox="one">
<img src="4.jpg" zoombox="two">
<img src="5.jpg" zoombox="two">
<img src="6.jpg" zoombox="two">

4. Determine the path to the large image using the src2 attribute:

<img src="thumb-1.jpg" src2="1.jpg" alt="Alt 1" zoombox>
<img src="thumb-2.jpg" src2="2.jpg" alt="Alt 2" zoombox>
<img src="thumb-3.jpg" src2="3.jpg" alt="Alt 3" zoombox>

5. Load images via AJAX.

// Asynchronous request to fetch more images and put them in the DOM
const xhr = new XMLHttpRequest;'get','get-images.php');
xhr.onload = ()=>{
  //put all the images to the dom after fetching them from database
  //after that
  //call the zoomBoxExecute() funtion
  //this will scan all the images once again that has zommbox attribute.

6. Hide the copyright information.

  hideWatermark: true

7. Enable/disable the zoom functionality.

  // enable/disable zoom in/out buttons
  enableZoomButton: false,
  // 1 = disable
  // 3 = enable area specific zoom using mouse cursor
  // 2 = enable the center zoom
  enableScrollZoom: 2

8. Enable/disable the navigation controls.

  enableNavigation: true

9. Enable/disable touch events.

  enableTouchControl: true

10. Enable/disable the slideshow mode.

  enableSlideShow: true,
  imageTransTimimg: '.5s',
  slideShowInterval: 2

11. Set the background opacity.

  backgroundOpacity: .9

12. Prevent the body scroll when the zoombox is activated.

  lockBodyScroll: true

You Might Be Interested In:

Leave a Reply