example17.php HOME Examples overview Download Ask a question / privacy policy / imprint

AJAX-ZOOM - high-resolution image viewer with horizontal thumbnails gallery. Explanation of how to skin the image zoom viewer.

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.

Loading, please wait...

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

If you want to load 360 degree product rotations and / or videos into the gallery please check out example29_responsive_easy.php

JavaScript & CSS files in Head

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

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


Comments (2)

Vadim Jacobi 2015-03-17 23:14:20
Vadim Jacobi Yes, you might want to use this example instead: http://www.ajax-zoom.com/examples/example26.php
J B 2015-03-17 23:09:30
J B Hello,
Is there anothere solution for this :
$azCallbacks = '{onLoad: function(){}}';
May causes troubles for me ;

Thanks in advance

Leave a Comment

Looking for a place to add a personal image? Visit www.gravatar.com to get Your own gravatar, a globally-recognized avatar. After you're all setup, your personal image will be attached every time you comment.
Load other examples in slider