Well, I have came with this idea when I first came to know about lightbox. That was good though but not very interactive and the UI was not modern at all. So I decided that I will build one on my own. I have chosen JavaScript, the pure vanilla JavaScript because I don’t want get dependent on any third party library. And now a days people are choosing vanilla JavaScript more and more over jQuery.
Features and Stuff
I wanted features like group images, slide show, next previous navigation, touch control for mobile devices which are essential for any image viewer. But, one feature that I wanted to have is scroll to zoom, not just usual center zoom, but area specific zoom. If you ever used Picasa Image viewer from Google that came years ago, was the inspiration for me. But that was a Windows Application Software and I wanted a web plugin that can be easy to use as well as feature rich.
Apart from these one more important feature that I wanted to have is grouping of images together because there are scenarios when you want to have particular set of images to be grouped together and show up on image viewer.
Most of the image viewer in the market doesn’t have any support for dynamic website natively. As dynamic website’s content keep loading even after the website gets loaded. So those images that came after the execution of image viewer script that doesn’t show up on image viewer. I got this problem covered in ZoomBox.
The final Result
The final result that I came up with was quite satisfying for me, I have got all the features covered that I discussed earlier. And the browser support is good too, as far as I tested this on many browser, it works on all modern browsers that people uses including Google Chrome, Safari, Firefox etc. on both mobile and desktop.
Here is the screenshot to the ZoomBox :
Documentation
Without a good documentation the whole effort will turn into nothing. I have prepared a documentation by going through which developers can easily download and deploy ZoomBox on their project. This was going to be my first ever documentation, so I wanted this thing to easy to readable and understandable. There is dark mode option in documentation for dark mode lovers.
I have created a Zoombox repository on Github the link is here. It is licensed under MIT Licence.