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.

click to try the above
click to set it back

For loading specific images use zoomData instead of the zoomDir parameter; zoomData is a CSV string separated with vertical bar character - |.

Loading, please wait...