In this example, thumbnails of large images from different folders load into responsive grid outside of the zoom viewer.
The AJAX-ZOOM viewer displays to the side of the thumbnails in a different container.
Thumbnails in gallery respond to clicks and loads high-resolution image into the zoom viewer.
All code is wrapped into a single
$.azThumbGallery jQuery plugin, which is one of AJAX-ZOOM extensions.
All you need is to pass image paths via
zoomData option of the extension and define the containers where you want the gallery and the viewer to appear.
The extension has several other options to fine tune the appearance of the entire composition.
This example also contains external controls to show basic usage of AJAX-ZOOM API.
With the controls you can switch to next or previous image using
$.fn.axZm.zoomPrevNext. You can define type of transition by the parameter of this method or globally.
To achieve similar result one could also use AJAX-ZOOM native API (without $.axZm.thumbGallery plugin). Most important API function for this is: $.fn.axZm.zoomSwitch; $.axZm.thumbGallery is commented and could be edited by interesting programmers. The plugin is used in several other examples you might want to take a look at1.
Both containers can be responsive! If the container where AJAX-ZOOM will be loaded into is responsive, then set "embedResponsive" option below to true.
<div class="col-md-6"> <!-- Container where AJAX-ZOOM will be loaded into --> <div id="zoomInlineContent" style="height: 600px; position: relative; max-height: calc(100vh - 50px)"></div> </div> <div class="col-md-6"> <!-- Container where thumbs will be loaded into --> <div id="thumbsParentContainer"></div> </div>
elseif ($_GET['example'] == [someValue])