Author: | thewebmonk |
---|---|
Views Total: | 770 views |
Official Page: | Go to website |
Last Update: | April 27, 2020 |
License: | MIT |
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 });