Responsive cropped thumbs gallery with zoomTo or 360 spinTo and zoomTo

The data for the above example with cropped thumbs gallery (product tour) has been generated with AJAX-ZOOM crop editor (example35.php)

If AJAX-ZOOM "responsive" parent container is resized with javascript by e.g. click on a button (not browser resizing) 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 it starts resizing and jQuery.fn.axZm.resizeStart(1); when it definitely ends. No need to do this if your responsive layout is resized by window resize or orinetation change events, AJAX-ZOOM will do it instantly then.

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