The code below updates when you use the options configurator.
Please find the descriptions of each option in the configurator:
This example is an attempt to create one more extension for AJAX-ZOOM that turns the viewer into an jQuery image slider with extended functionality. The extension adds extra features such as bullet navigation with image preview or animated titles and descriptions of the images.
All extra features, as well as many commonly used AJAX-ZOOM options, are set via the configuration user interface. As a result, the extension generates copy & paste JavaScript code with all settings, which differ from defaults. You can disable all UI elements like buttons, bullet navigation, description and other or you can position them anywhere else by setting an option in this AJAX-ZOOM extension similar to jQuery plugin or use the online configurator to achieve the same. Most of the options are specific to this slider extension. Some options, however, are handing over directly to the AJAX-ZOOM configuration file where they modify its options dynamically. In fact, this is a wrapping JavaScript for initiation of AJAX-ZOOM that extended it with more functionality.
All the above, including the UI of the options configurator, is part of the jQuery.fn.ajaxZoomSlider extension. The writing style of the code is effortless, so generally, it can serve as an easy to understand demonstration for developers who aim to create custom functionality by using the AJAX-ZOOM event hooks and the API. You are free to edit this code, remove parts of it and add new features.
<!-- 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!
*/