Zoombox by Ashish Patel

Demo

(click on images)

Group of 2 Images

Group of 4 Images

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>

Options

Customize the zoombox

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

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

zoombox.option({
      backgroundOpacity : 0.9,
      imageTransTimimg : '.5s',
      slideShowInterval :2,
      lockBodyScroll : true,
      enableZoomButton : false,  
      enableScrollZoom : 2,
      hideWatermark : false,
      enableTouchControl : true,
      enableNavigation : true,
      enableSlideShow : true,
      hasRoot:false,
  });

Advanced

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.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();

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

License

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.

Contribute

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