You can do a quick search and find dozens of libraries for image lightboxes, slideshows, galleries, you name it.
One of the newest libraries that caught my attention is Viewer. Currently in version 0.6, it’s still a project under development, but this image plugin’s design and features are both phenomenal.
From the homepage, you’ll find a live demo with various image styles. You can choose to set your own gallery to different features like direct zooming with a single image, or a lengthy slideshow housing many images.
This also comes with an “inline mode” that attaches the image viewer to an element on the page. So when the user clicks a thumbnail it’ll zoom the photo inside that element rather than on top of the entire page.
You’ll find buttons for pretty much everything: rotations, extra captions, and full 1:1 zooming to get a clear view of hi-res photos.
With a few JS options you decide how the Viewer script should work. Don’t want to let visitors zoom into pictures? No problem.
You can also disable the slideshow feature, or just disable the next/prev buttons in the UI. Same goes for the thumbnail pics that appear when the slideshow is in full view.
Also, note this script has a non-jQuery version if you prefer vanilla JS. Both plugins work the same way and they’re both in active development. Everything you need to customize this interface can be found on the main GitHub page.
If you’re big into coding your own UIs then Viewer is a very cool plugin. It offers so much control over each slideshow’s behavior that you can restructure this into pretty much anything you want.
Web developers will have a field day working with all the options in this free image script.
The post Viewer — Simple Image Zooming Plugin for Vanilla JS & jQuery appeared first on Hongkiat.