AJAX-ZOOM - high resolution image gallery with horizontal thumbnails gallery using bootstrap classes

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...

JavaScript & CSS files in Head

<!-- 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>
        

HTML markup

<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>