The main JavaScript code for image slider was generated with the
AJAX-ZOOM slider editor.
Additionally, the parent container of the player is sized with the AJAX-ZOOM
jQuery.fn.axZmEmbedResponsive plugin.
This plugin lets you define any proportion you need, similar to bootstrap embed-responsive css class,
but the height will not exceed the height of the screen or any percentage of the screen height set
in the jQuery.fn.axZmEmbedResponsive plugin option named "heightLimit" (see code below).
<!-- 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>
<style type="text/css">
/* copy of bootstraps embed-responsive and embed-responsive-item CSS classes
if bootstrap or simmilar is included you could use the native classes (without az_) */
.az_embed-responsive {
box-sizing: border-box;
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.az_embed-responsive-item {
box-sizing: border-box;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Style of the bullet container located outside of the player */
#azBulletOutside {
background-color: #F2D3A2;
padding-top: 5px;
padding-bottom: 5px;
min-height: 30px;
}
/* Hard set some styling*/
#axZm_zoomContainer {
background-color: #000;
}
</style>
<!-- Responsive wrapper which uses embed-responsive Bootstrap CSS class -->
<div id="ajaxZoomContainerParent" class="az_embed-responsive">
<!-- Div where AJAX-ZOOM is loaded into -->
<div id="azParentContainer" class="az_embed-responsive-item">
Loading, please wait...
</div>
</div>
<!-- Container for the bullet navigation located outside of the player -->
<div id="azBulletOutside"></div>
This code was setup by the editor mentioned above.