This code below is updated dynamically when you use the options configurator.
Please find the desciptions of each option in the configurator:
https://www.ajax-zoom.com/examples/example30.php
This jQuery image slider is a wrapper and extension of AJAX-ZOOM jQuery plugin. Considering what you see above as just another image slider out of many on internet, the WOW effect is certainly its ability to dynamically zoom into images of virtually any dimensions and file sizes. Also the fullscreen option, as well as touch device compatibility with pinch zoom and touch swipe make it unique. Please note that the original sized image never loads into cache. Only the portion of the image being zoomed.
All elements like buttons, bullet navigation, description etc. can be disabled and positioned anywhere over the image or besides just by setting an option in jQuery plugin manner or with the online configurator. Most CSS is defined in a separate file. The slider extension is open source, commented and can be extended as you like (no overkill js). Most of the options are specific to this slider extension. Some options however are passed directly to AJAX-ZOOM and set its options dynamically over this extension. In fact this is a wrapper for AJAX-ZOOM extended by more custom functionality using AJAX-ZOOM API.
<!-- AJAX-ZOOM main js and css file -->
<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>
<link rel="stylesheet" type="text/css" href="../axZm/axZm.css" />
<!-- AJAX-ZOOM imageSlider extension -->
<link rel="stylesheet" type="text/css" href="../axZm/extensions/jquery.axZm.imageSlider.css" />
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.imageSlider.js"></script>
<div id="axZmPlayerOuter" class="embed-responsive" style="padding-bottom: 50%;">
<!-- Placeholder for AJAX-ZOOM player -->
<div id="axZmPlayerCont" class="embed-responsive-item" style="max-height: 94vh; max-height: calc(100vh - 50px);">
Loading, please wait...
</div>
</div>
/*
See generated JavaScript code above!
*/