Dark Mode

By Ashish Patel

An interactive vanilla javascript image viewer plugin.

Just Add 'zoombox' attribute in <img> tag and let the magic happen.


(click on images)
Group of 2 Images
Photo by Metallmichi form PxHere
Photo by Doughnutew form PxHere
Group of 4 Images
Photo by vasilisa.via form PxHere
Photo by Dana Tentis from Pxhere
Photo by elhamdouny from Pxhere
Photo by floriansteffen form PxHere

Getting Started

1. Download the latest version of zoombox from Github release page or you can directly download it from here.

2. Copy the dest/js/zoombox.min.js file to your path/to/zoombox.min.js

3. Copy the dest/css/zoombox.min.css file to your path/to/zoombox.min.css

4. Copy all the images from dest/images/ to "images" folder of your root directory.

Done with moving files ? now lets get including css and js file

Attach the zoombox.min.css file at the top of the page in <head> tag

<link rel="stylesheet" type="text/css" href="path/to/zoombox.min.css">

Attach the zoombox.min.js file at the bottom of the page before closing </body> tag

<script src="path/to/zoombox.min.js"></script>
Lets Initialize HTML

Add attribute zoombox to the img tag.

<img src="path/to/image" zoombox>

All set ! Now you can click on the image !

You can add some additional attributes in <img> tag discussed below.

Optional Attributes

1. Group Images : Just add the similar values for zoombox attribute to images that you want to group together. Example :

<img src="path/to/image1" zoombox="one">
<img src="path/to/image2" zoombox="one">
              Another Group
<img src="path/to/image3" zoombox="two">
<img src="path/to/image4" zoombox="two">

2. Add Caption : Add caption of the image using alt attribute Example :

<img src="path/to/image" alt="this is the caption"  zoombox>

3. Add alternative image source : You can add source of larger image in src2 attribute of that particular image to open larger image in zoombox. Example :

<img src="path/to/image" src2="path/to/larger-image" alt="this is the caption"  zoombox>


Customize the zoombox

Use the method zoombox.option() to change the default settings.

  backgroundOpacity : 0.9,
  imageTransTimimg : '.5s',
  slideShowInterval : 2 
Availabe options
Option Default Discription
backgroundOpacity Default : 0.9 (range between 0-1) set the opacity for black backgroud of zoombox.
imageTransTimimg Default : '.5s' set the transition timing from one image to another.
slideShowInterval Default :2 (in seconds) time interval between two images during the slide show in seconds.
lockBodyScroll Default : true if set to false then body will continue to scroll while scrolling on the zoombox.
enableZoomButton Default : false set it to true to get access to physical button for zoom-in and zoom-out.
enableScrollZoom Default : 2 set it to 1 to turn off the scroll to zoom. set this to 3 to enable area specific zoom using mouse cursor. value 2 enables the center zoom by default.
hideWatermark Default : false set it true to hide the watermark at top left corner 'zoombox by Ashish Patel'.
enableTouchControl Default : true if set to false it will block swipe left and right for next and previous images in mobile phones.
enableNavigation Default : true if set to false navigation for next and previous images including bottom preview images will be removed. touch controls for next and previous images in mobile will also be blocked.
enableSlideShow Default : true if set to false slideshow function will be removed.
hasRoot Default : false Warning : set it true if and only if you are working with local server. setting it to true allows zoombox to use '/' before the path of nav images. It means you can use zoombox in more then one of your pages of website
The default options
      backgroundOpacity : 0.9,
      imageTransTimimg : '.5s',
      slideShowInterval :2,
      lockBodyScroll : true,
      enableZoomButton : false,  
      enableScrollZoom : 2,
      hideWatermark : false,
      enableTouchControl : true,
      enableNavigation : true,
      enableSlideShow : true,


zoombox for dynamic sites

Since zoombox scan for all the images that has zoombox attribute in their <img> tag, so it works fine for static website, but for dynamic site where the content keeps loading even after dom loaded. So, those images which came after the execution of zoombox script will not get added in the zoombox even if they have the zoombox attribute. The solution is to execute a function called zoomBoxExecute() at a point where you think all the images are loaded. So this will let the zoombox to scan for all images once again which has the zoombox attribute in their <img> tag.

Example with AJAX
//Asynchronous request to fetch more images and put them in the DOM
  const xhr = new XMLHttpRequest;

  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.

Browser Support

Zoombox works on all the modern browsers

1. Google Chrome

2. Safari

3. mozilla firefox

4. Microsoft Edge

5. Opera

6. iOS Safari

7. iOS Chrome

8. All Native Android Browser


Zoombox is licensed under MIT License.

Zoombox is free to use For both commercial and Non-commercial Work.

Attribution Required , which means you have to specify my name or link to my home page.

My name is allready specified in top left corner of the zoombox UI by default. If you want to remove it and specify it somewhere else you can remove it by calling zoombox.option({}) method, and use hideWatermark property from options.

Lets make it even more better for developers !!

I would love your contribution in my github zoombox repository. Lets make it even more better

Created By Ashish Patel