360 product tour with gallery inside responsive container with full-page width

This example shows a product tour with gallery that is placed into a responsive container with full-page width.

The tour adjusts itself when you resize the browser window. It does not adjust if you would resize the parent container via JavaScript. In this example, you can test how to start the resizing process and synchronize it via JavaScript.

If you resize the AJAX-ZOOM parent container via javascript by e.g. click on a button, which changes the size with css directly or adds a different CSS class to it, then you should call jQuery.fn.axZm.resizeStart(3000); when the resizing starts and jQuery.fn.axZm.resizeStart(1); when it definitely ends.

For creating data needed for these tours, please use the product tour editor. It generates XML data that you can then use in this or other AJAX-ZOOM examples with the possibility to insert product tours. Besides examples, which start with 35, the zoom on mouse hover extension supports product tours.

JavaScript and CSS in head

Show / Hide Code

<!-- Include jQuery core into head section if not already present -->
<script type="text/javascript" src="../axZm/plugins/jquery-2.2.4.min.js"></script>

<!-- AJAX-ZOOM -->
<link rel="stylesheet" href="../axZm/axZm.css" type="text/css" media="screen">
<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>

<!-- Include axZm.thumbSlider -->
<link rel="stylesheet" type="text/css" href="../axZm/extensions/axZmThumbSlider/skins/default/jquery.axZm.thumbSlider.css" />
<script type="text/javascript" src="../axZm/extensions/axZmThumbSlider/lib/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="../axZm/extensions/axZmThumbSlider/lib/jquery.axZm.thumbSlider.js"></script>

<!-- Include jquery.axZm.imageCropLoad.js -->
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.imageCropLoad.js"></script>

<!-- A small function to add title button which will expend to full description -->
<link rel="stylesheet" type="text/css" href="../axZm/extensions/jquery.axZm.expButton.css"></link>
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.expButton.js"></script>
			

CSS

Show / Hide Code

HTML markup

Show / Hide Code

<!-- Responsive container using, padding bottom defines the aspect ratio
	padding bottom could be refined with @media queries as an idea... -->
<div class="az_embed-responsive" id="playerOuterWrap">
	<div class="az_embed-responsive-item">
		<!-- playerWrap has padding to the right for the slider -->
		<div id="playerWrap">
			<!-- container where AJAX-ZOOM will be loaded into-->
			<div id="azParentContainer" style="">
				<!-- Content inside target will be removed -->
				<div style="padding: 20px">Loading, please wait...</div>
			</div>
			<!-- Thumb slider with croped images -->
			<div id="cropSliderWrap">
				<div id="cropSlider">
					<ul></ul>
				</div>
			</div>
		</div>
	</div>
</div>
			

Javascript

Show / Hide Code