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

Product tour gallery without the AJAX-ZOOM slider extension and free layout

That is an example where the product tour gallery does not use the AJAX-ZOOM slider extension for the thumbnails. Instead, the code appends the thumbnails to a container of your choice and free layout using unordered UL > LI HTML structure. You can format the thumbnails by adaptive or responsive CSS or create a slider with third-party JavaScript plugins.

To create the data for this product tour, please use the product tour editor. It generates a JSON file that you can use in this and other product tour examples.

Loading, please wait...

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 

<!-- This example uses bootstrap CSS classes -->
<div class="row">
	<div class="col-md-9 col-md-push-3">
		<!-- 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" style="padding-bottom: 68%;">
			<div class="az_embed-responsive-item" id="azParentContainer">
				<!-- Content inside target will be removed -->
				<div style="padding: 20px">Loading, please wait...</div>
			</div>
		</div>
	</div>
	<div class="col-md-3 col-md-pull-9">
		<!-- Cropped thumbs -->
		<div id="azThumbsCropArea" style="position: relative; margin-top: 20px;">
		</div>
	</div>
</div>

Javascript

Show / Hide Code
Load other examples in slider