Advanced Image Gallery Viewer In Vanilla JavaScript – zoombox

Preview:

Description:

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

Features:

• 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;
xhr.open('get','get-images.php');
xhr.onload = ()=>{
  //put all the images to the dom after fetching them from database
  //after that
  //call the zoomBoxExecute() funtion
  zoomBoxExecute();    
  //this will scan all the images once again that has zommbox attribute.
}
xhr.send();

6. Hide the copyright information.

zoombox.option({
  hideWatermark: true
});

7. Enable/disable the zoom functionality.

zoombox.option({
  // 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.

zoombox.option({
  enableNavigation: true
});

9. Enable/disable touch events.

zoombox.option({
  enableTouchControl: true
});

10. Enable/disable the slideshow mode.

zoombox.option({
  enableSlideShow: true,
  imageTransTimimg: '.5s',
  slideShowInterval: 2
});

11. Set the background opacity.

zoombox.option({
  backgroundOpacity: .9
});

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

zoombox.option({
  lockBodyScroll: true
});