example35.php HOME Examples overview Download Ask a question
example35_clean.php

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

This example loads the results of what has been produced in example35.php. Both galleries - vertical and horizontal are loaded at the same time and are shown / hidden over CSS media queries depending on window portrait / landcrape mode. Resize the browser window to see this adaptive effect. All code lines are commented. The design of the galleries and AJAX-ZOOM player is fully skinable.

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-1.8.3.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 /axZm directory, e.g. /test/axZm/
      cropJsonURL null Url of the json with crop data. The JSON file can be made with example35.php;
      cropJson null Alternatively to cropJsonURL define JSON here
      sliderID null ID of axZmThumbSlider
      thumbsContainerID null ID of some container to put thumbs into (no slider)
      thumbsContainerUlClass 'azThumbCrop' class which will be 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
      spinToMotion 'easeOutQuint' Optional pass 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 function after spinTo or zoomTo; if defined in JSON title and description are passed as arguments
      1 examples where $.axZmImageCropLoad is used:
      • example35_clean.php
      • example35_clean_horizontal.php
      • example35_responsive.php
      • example35_responsive.php

      Load documentaion for $.axZmImageCropLoad