This is AJAX-ZOOM viewer in a full-page responsive layout. The layout fills the entire viewport and prevents the page from scrolling on desktops.
The design does not depend on any CSS libraries like bootstrap.
It uses some CSS and a few lines of JavaScript to adapt.
Particularly, the adjustHeight
JavaScript function (see source code) manages the dimensions of the main containers.
If you have a responsive layout that adjusts instantly, you do not need such a JavaScript control.
The image zoom viewer contains an optional thumbnails gallery. It can be vertical, horizontal or absent. As of the viewers UI, only zoom in and zoom out buttons appear inside the viewer. This is changeable as well.
With the AJAX-ZOOM $.fn.axZm.loadAjaxSet
API method, you can replace the set of images that display in the gallery.
You can load and replace with images from a particular folder, or you can load a set of images from different locations.
For loading specific images use zoomData
instead of the zoomDir
parameter;
zoomData
is a CSV string separated with vertical bar character - |
.