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>