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

AJAX-ZOOM with adaptive (vertical / horizontal) galleries for 2D or 360 degree product tour

This example is a responsive template for presenting 360-degree product tours or high-resolution image tours with the adaptively enabled vertical or horizontal gallery. The code enables the gallery slider to the right or at the bottom of the AJAX-ZOOM viewer. The corresponding position depends on screen size and screen proportions - portrait/landscape orientation. Both galleries - vertical and horizontal load at the same time. They show or hide by CSS media queries. Resize the browser window to see this adaptive effect.

Use the product tour editor to create the tours. This example needs the output code of what you have created in the editor.

Loading, please wait...

      All inline JavaScript in this file has comments. You can change the design of the galleries and the AJAX-ZOOM viewer by options and CSS.

      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">
<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>

<!-- Include axZm.thumbSlider plugin -->
<link rel="stylesheet" href="../axZm/extensions/axZmThumbSlider/skins/default/jquery.axZm.thumbSlider.css" type="text/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" href="../axZm/extensions/jquery.axZm.expButton.css" type="text/css" />
<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">

	<!-- limit height of the embed-responsive-item to somewhat less than browser height -->
	<div class="az_embed-responsive-item">

		<!-- Need this for padding to the right where vertical gallery is placed -->
		<div id="playerInnerWrap">

			<!-- Div where AJAX-ZOOM is loaded into -->
			<div id="azParentContainer">
				<!-- Content inside target will be removed -->
				<div style="padding: 20px">Loading, please wait...</div>
			</div>

			<!-- Vertical thumb slider with croped images -->
			<div id="cropSliderWrapVertical">
				<div id="cropSliderVertical">
					<ul></ul>
				</div>
			</div>

			<!-- Horizontal thumb slider with croped images -->
			<div id="cropSliderWrapHorizontal">
				<div id="cropSliderHorizontal">
					<ul></ul>
				</div>
			</div>

		</div>
	</div>
</div>

      Javascript

      Show / Hide Code

      $.axZmImageCropLoad documentation

      OptionDefaultDescription
      installPath 'auto' Path to the /axZm folder, e.g. /test/axZm/
      cropJsonURL null Url of the json with crop data. You can create such a JSON file with example35.php;
      cropJson null Alternatively to cropJsonURL, you can define the JSON for a product tour inline.
      sliderID null ID of axZmThumbSlider
      thumbsContainerID null ID of some container to put thumbs into (no slider)
      thumbsContainerUlClass 'azThumbCrop' CSS class, which is added to the UL element
      thumbsContainerLiCss {} Quickly overwrite css e.g. margin of the li (thumbs)
      thumbsContainerLiDescr false Add title from crop data to the thumb
      spinToSpeed '2500' Optionally pass duration of spinning when clicked on the thumb. When defined as a string, the value is interpreted as "base speed", and it is reduced depending on the difference between the current and the target frame numbers. When defined as an integer, the value preserves no matter how many frames are turning.
      spinToMotion 'easeOutQuint' Optionally define easing type of the spinning animation. Possible motions types: "swing", "linear", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart","easeInOutQuart", "easeInQuint","easeOutQuint", "easeInOutQuint", "easeInSine", "easeOutSine", "easeInOutSine", "easeInExpo", "easeOutExpo", "easeInOutExpo", "easeInCirc", "easeOutCirc", "easeInOutCirc", "easeInElastic", "easeOutElastic", "easeInOutElastic", "easeInBack", "easeOutBack", "easeInOutBack", "easeInBounce", "easeOutBounce", "easeInOutBounce"
      handleTexts null JavaScript function after spinTo or zoomTo; If it is defined in JSON, title and description are passed as first and second arguments.

      1 examples that use the $.axZmImageCropLoad extension

      • example35_clean
      • example35_clean_horizontal
      • example35_responsive
      • example35_gallery
      • example32
      • example32_axZmMode
      • example32_ecom
      Load other examples in slider