The design can be easily changed. Besides overriding CSS in arbitrary css file you could use some pre-configed skins
or create your own skins. Below you can try changing $zoom['config']['themeCss']
and $zoom['config']['buttonSet']
options, whereby the toolbar can be disabled or replaced by
$zoom['config']['mNavi']
suboptions which place diverse tool buttons over the player.
Please note that on small screens, mostly mobile devices, the gallery is disabled
by options - $zoom['config']['galleryHorHideMaxWidth']
and $zoom['config']['galleryHorHideMaxHeight']
.
The gallery thumbnail size is defined by $zoom['config']['galleryHorPicDim']
option which is set to 50x50 in this example.
The toolbar below the player can be disabled by
$zoom['config']['displayNavi']
and $zoom['config']['fullScreenNaviBar']
options.
By passing / defining the query string parameter $_GET['example'] = 20;
(in source code) some default settings from /axZm/zoomConfig.inc.php
are overridden in /axZm/zoomConfigCustom.inc.php after elseif ($_GET['example'] == 20){
So if changes in /axZm/zoomConfig.inc.php have no effect look for the same options /axZm/zoomConfigCustom.inc.php;
You can also copy selected options from /axZm/zoomConfig.inc.php into /zoomConfigCustomAZ.inc.php
and change the values independent of which "example" parameter is passed.
Any control element can be disabled, placed at a different position or design changed...
<!-- Include jQuery core into head section if not already present -->
<script src="../axZm/plugins/jquery-1.8.3.min.js"></script>
<!-- AJAX-ZOOM javascript -->
<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>
<link type="text/css" href="../axZm/axZm.css" rel="stylesheet">
<!-- Helper plugin to deal with embed-responsive class -->
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.embedResponsive.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>
<div id="ajaxZoomContainerParent" class="az_embed-responsive">
<!-- Div where AJAX-ZOOM is loaded into -->
<div id="ajaxZoomContainer" class="az_embed-responsive-item">
Loading, please wait...
</div>
</div>