In this example several images from different location are passed to the $.axZm.thumbGallery over "zoomData" option. The plugin then generates a grid of thumbs next to AJAX-ZOOM player. When clicked on the thumbs images in the player are switched to the selection.
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])