The AJAX-ZOOM viewer is skinnable. You can change or add your custom skins to the viewer generally and for the UI button elements separately.
When you create your custom skins, it is a matter of changing one or two options to switch the look of the viewer to what you have designed. That means you can update the AJAX-ZOOM core without losing the new look. In this example, you can try any combination of both skin sections with AJAX-ZOOM default skins. All skins are included in the download package.
So besides overriding CSS in an arbitrary CSS file, you could use some pre-configured skins
or create your custom skins. Below you can try to change the $zoom['config']['themeCss']
and $zoom['config']['buttonSet'] options. Other than that, you can disable the toolbar or replace it with the
$zoom['config']['mNavi'] toolbar. It has several suboptions and places the buttons over the viewer.
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-2.2.4.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>
Is there anothere solution for this :
$azCallbacks = '{onLoad: function(){}}';
May causes troubles for me ;
Thanks in advance
JB