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 a similar result as with the
you could also use the native AJAX-ZOOM $.fn.axZm.zoomSwitch API method.
$.axZm.thumbGallery extension has many comments and you could extend it to suit your needs.
This extension is used in several other examples.
You might want to look at1 them before declaring it as not suitable.
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])