example35_clean_horizontal.php HOME Examples overview Download Ask a question / privacy policy / imprint
example35_gallery.php

Open the AJAX-ZOOM 2D or 360-images product tour as fullscreen from click

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

The cropLoadObj.cropJsonURL of the imageCropLoadFullscreen extension can be URL to the JSON file, or it can be the JSON itself. The imageCropLoadFullscreen is an extension that manages other AJAX-ZOOM extensions for this effect. You can find the documentation of the options at the bottom of this page.

If you want to use all the features of the extension, the minimal AJAX-ZOOM core version for this example is 5.3.12.

Press on the blue buttons below to open AJAX-ZOOM with product tour at full page or screen, and different options enabled. Of course, you can apply this extension to any other type of element and not just buttons as in this demo.

1. Open 360 product tour as full screen from a link using imageCropLoadFullscreen plugin
2. Open 360 product tour as full screen and additionally init Hotspots
3. Open 360 product tour in overlay slider
4. apiFullscreen test

JavaScript and CSS in head

If you put the JavaScript files not in the head but into the bottom of the body, make sure that you trigger the $.imageCropLoadFullscreen on an element on document load event. 


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

<!-- AJAX-ZOOM core files, needed -->
<link rel="stylesheet" href="../axZm/axZm.css" type="text/css">
<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>

<!-- Include axZm.thumbSlider plugin, needed -->
<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, needed -->
<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, depends -->
<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>

<!-- Extension to open the product tour at fullscreen -->
<link rel="stylesheet" href="../axZm/extensions/jquery.axZm.imageCropLoadFullscreen.css" type="text/css" />
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.imageCropLoadFullscreen.js"></script>

$.imageCropLoadFullscreen documentation / options

OptionDefaultDescription
installPath "auto" Path to the /axZm folder, e.g. /test/axZm/. Auto may not always work, e.g., when the JavaScript files are merged into one file. It is therefore recommended to define the absolute path to the /axZm folder.
parameter "" The query string parameters and values, which the script passes to the AJAX-ZOOM controller. For example, the 3dDir query string parameter value defines the path to the folder with 360-images.
example "spinIpad" When you define the "example" parameter, some default settings from /axZm/zoomConfig.inc.php are overridden in /axZm/zoomConfigCustom.inc.php. For more information, please refer to the blog article about the AJAX-ZOOM configuration system.
apiFullscreen false Try to open AJAX-ZOOM at browsers fullscreen mode, which is possible on modern browsers except for IE < 10. Currently, for mobile devices, even though it is possible to use the fullscreen API, AJAX-ZOOM ignores that for stability reasons.
postMode false Use POST requests instead of GET to communicate with AJAX-ZOOM controller.
lang "en" If you have internationalized data in your product tour, the lang option determines the language of the user or page version.
fullScreenStartSplash {...} Display a "loading" layer before AJAX-ZOOM opens. 

		{
			enable: true,
			className: false,
			opacity: 0.75
		}
cropSliderOverlay false By default, the tour slider places itself besides the viewer. When you enable this option, the slider with the cropped thumbnails appends itself to an overlay above the viewer.
cropSliderOverlayToggle true Create a toggle button to hide the slider.
cropSliderOverlayToggleChar "❮" Character or any other HTML that represents the arrow on the toggle button. You can also use, e.g. "Font Awesome" and the <i> (icon) HTML element.
cropSliderOverlayCss {...} Define, e.g., padding of the overlay slider via options. You can also override the corresponding CSS classes: azCropSliderOverlay{Top, Right, Bottom, or Left} This way, you can reduce the width or height of the slider and thus prevent that the thumbnails overlay other AJAX-ZOOM UI elements. You can use integers, px units or the so-called "viewport" units - vh or vw. The viewport units are useful here if the UI elements of the viewer such as "image map" are set to be responsive. The CSS "calc" expressions work too. The default values are: 

		{
			top: {
				paddingTop: 0, paddingRight: '60px', paddingBottom: 0, paddingLeft: 0
			},
			right: {
				paddingTop: '60px', paddingRight: 0, paddingBottom: 0, paddingLeft: 0
			},
			bottom: {
				paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: '130px'
			},
			left: {
				paddingTop: 0, paddingRight: 0, paddingBottom: '80px', paddingLeft: 0
			},
		}
cropSliderOverlayMapPadding true Automatically calculate padding for responsive map size. If map size is responsive, it is nearly impossible to set the offset by using padding or margin with CSS only.
cropAxZmThumbSliderParam {...} Thumbnails slider configuration. You can find the full documentation and examples here.
cropSliderPosition "auto" Position of the product tour slider, possible values: "top", "right", "bottom", "left" and "auto". If "auto", the scripts sets it to the right or bottom depending on the screen proportions / viewport.
cropSliderDimension 86 Width or height of the thumbnails slider.
cropSliderMinSize 0 Disable thumbnails slider if the width or height of the window is below this value. Set to 0 to disable hiding the slider at any resolution.
cropSliderThumbAutoSize true Calculate the size of the thumbnails automatically depending on the cropSliderDimension option.
cropSliderThumbAutoMargin 10 Margin between the thumbnails.
cropSliderThumbDescr true Show thumbnails description if present.
cropSliderThumbDescrMargin 0 Offset space for the thumbnails description element.
cropLoadObj {...} This extension also manages the $.axZmImageCropLoad extension. You can pass options to $.axZmImageCropLoad extension via cropLoadObj option. The most important are "cropJsonURL" or "cropJson". 

		{
			cropJsonURL: "", // url of the JSON with crop data
			cropJson: "" // JSON data coming from elsewhere
		}
hotspots "" Hotspots object or link to a file that contains the hotspots object. You can create the hotspots via the AJAX-ZOOM hotspots editor, or you can use the documentation to import an existing information and build the hotspots dynamically. The latter is for developers.
callbacks {} Object that may contain AJAX-ZOOM callbacks / hook functions. For more information on the AJAX-ZOOM callbacks, please see this page.
Last updated: 2019-03-26
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