Another responsive example of AJAX-ZOOM where settings are set the way that the user has only the possibility to spin at not zoomed state; zoom on click goes down to 100%; an other click at zoomed state will zoom out again; additionally a button appears for zoom out; with "prevNextAllData" option enabled it is farthermore posssible to switch between different types of data (video, 360, plain images) over left/right buttons, also at fullscreen mode.
| Option | Default | Description |
|---|---|---|
| axZmPath | 'auto' | Path to /axZm directory, e.g. /test/axZm/ |
| gallery3dDir | '' | Path to the folder where in subfolders are images for several 360s/3D So if under this path there are any other subfolders, then the first image will be loaded into the gallery. Do not use "gallery3dDir" and "galleryData" at the same time. |
| first3dDir | '' | Path under gallery3dDir to the folder with 360 or 3D which will be loaded first |
| example3dDir | 17 | Configuration set value which is passed to ajax-zoom, e.g. 17 or "spinIpad" some default settings from /axZm/zoomConfig.inc.php are overridden in /axZm/zoomConfigCustom.inc.php after elseif ($_GET['example'] == 17){ |
| galleryData | '' |
While "gallery3dDir" option simply loads many 360s or 3D from a given folder,
with "galleryData" option you can precisely define which 360s or 3D have to beloaded.
Additionally you can also define regular 2D images and videos located at some
straming platform like youtube, iframed content or load content over ajax, e.g.
"image360" is data type for both, 360 and 3D images. The only difference between regular 360 spin and 3D multirow is that original images are placed in subfolders of the target folder. E.g. the target folder is "/pic/zoomVR/nike"; Now if it is 3D multirow and not one row 360, then images of each row are placed in subfolders of the target path, e.g. /pic/zoomVR/nike/0, /pic/zoomVR/nike/15, /pic/zoomVR/nike/30, /pic/zoomVR/nike/45, /pic/zoomVR/nike/60, /pic/zoomVR/nike/75, /pic/zoomVR/nike/90; It is not important how these subfolders are named and you also do not need to define these subfolder names anywhere. AJAX-ZOOM will instantly detect them and procede all the images in them. Every image must have an unique filename!!! This is also the case if images are prepared for completly different 360s or 3D; If all your sourceimages happen to have the same filenames (e.g. spin001.jpg, spin002.jpg, [...], spin036.jpg), you could then prefix each image of a spin e.g. with the product ID or something else logical to ensure this uniqueness, e.g. /360_source_images/123/123_spin001.jpg, /360_source_images/123/123_spin002.jpg, /360_source_images/123/123_spin003.jpg, [...], /360_source_images/123/123_spin036.jpg |
| firstToLoad | null | What should be loaded at first if "galleryData" option is used - null (first item in "galleryData"), name of 360, text, video or "imageZoom" for regular images. |
| prevNextAllData | {} |
Object containing some settings to enable previous / next button to switch
not only between images, but also images and 360/3d; at time
videos and external content is not supported in fullscreen mode.
|
| galleryHotspots | {} |
AJAX-ZOOM supports "hotspots" which can be optionally loaded for
3D/360 or 2D (plain images). Hotspots can be configured manually in
example33.php which produces a separate
JS file with all possible settings. If you have already done this
you can define which of these JS hotspot files will be loaded
together with your content, e.g.
|
| exampleData | 'spinAnd2D' | Configuration set value which is passed to ajax-zoom when using "galleryData"; some default settings from /axZm/zoomConfig.inc.php are overridden in /axZm/zoomConfigCustom.inc.php after elseif ($_GET['example'] == 'spinAnd2D'){...; additionally to $_GET['example'], image360 is passed over query string as a paramter when 360 or 3D are loaded, so it is available in the config file as $_GET['image360'] and the configuration set can be differed from plain images. |
| zoomSwitchAnm | 'SwipeHorz' | When clicked on the thumbs the image inside AJAX-ZOOM will be switched with one of the following effects, possible values: "Center", "Top", "Right", "Bottom", "Left", "StretchVert", "StretchHorz", "SwipeHorz", "SwipeVert", "Vert", "Horz" |
| zoomSwitchSpeed | 300 | Speed of switching between images in the gallery. |
| azOptions | {} | Not all but some of the AJAX-ZOOM options which are normally set in zoomConfig.inc.php and zoomConfigCustom.inc.php can be set directly as js var in onBeforeStart AJAX-ZOOM callback. The property of the object is the name of the option and value its correstponding value. |
| divID | 'axZmPlayerContainer' | The ID of the element (placeholder) where AJAX-ZOOM has to be inserted into |
| embedResponsive | false | If "divID" is responsive, set this to true |
| spinGalleryContainerID | 'spinGalleryContainer' | Parent container of "spinGalleryID" |
| spinGalleryID | 'spinGallery' | Container where thumbs gallery will be loaded into |
| spinGallery_tempID | 'spinGallery_temp' | Temp container which some text which will be removed just before gallery appears. |
| spinGalleryLoadCallback | 'onSpinPreloadEnd' | Possible values: "onSpinPreloadEnd" or "onLoad"; "onLoad" would make sense if you configure $zoom['config']['spinNoInit'] to be enabled, so the user needs to click somewhere to load all other images of 360/3D; |
| backgroundColor | '#FFFFFF' | Background color of the player, possible values: #hex color or "auto". If "auto" AJAX-ZOOM will try to determin the background color. Use "auto" only if you have e.g. black and white on different 360s. |
| checkReverse | true | Set true to check spinReverse / spinReverseZ settings upon the below options - "toReverseArr" and "toReverseArrZ" |
| toReverseArr | [] | Array with folder names where spinReverse option should be applied |
| toReverseArrZ | [] | Array with folder names where spinReverseZ option should be applied |
| toBounceArr | [] | Array with folder names where spinBounce option should be set to "bounce". |
| fullScreenApi | false | Try to open AJAX-ZOOM at browsers fullscreen mode if available (requestFullScreen) |
| thumbsAtFullscreen | false | Show 360 thumb gallery at fullscreen mode, possible values: "bottom", "top", "left", "right" or false; Please note that if you have different content e.g. 360/3D, regular images or video, this option will not work (not implementet yet). It only works for the same content types - if you have only 360/3D or only 2D; |
| axZmThumbSlider | true |
Use $.axZmThumbSlider extension for the thumbs, set false to disable.
Requires: /axZm/extensions/axZmThumbSlider/skins/default/jquery.axZm.thumbSlider.css /axZm/extensions/axZmThumbSlider/lib/jquery.axZm.thumbSlider.js |
| axZmThumbSliderParam | {} |
Options passed to $.axZmThumbSlider
For more information see /axZm/extensions/axZmThumbSlider/,
e.g.
|
| axZmCallBacks | {} |
Object with AJAX-ZOOM callbacks,
http://www.ajax-zoom.com/index.php?cid=docs#onBeforeStart,
e.g
|
| axZmPar | '' | Additional parameter which can be passed to AJAX-ZOOM |
| thumbWidth | 120 | Width of the thumbnail image |
| thumbHeight | 120 | Height of the thumbnail image |
| thumbRetina | true | true will double the resolution of the thumbnails images but keep "thumbWidth" and "thumbHeight" on screen |
| thumbsCache | true | Cache thumbnails |
| thumbQual | 90 | jpg quality of the thumbnail image |
| thumbMode | false | possible values: "contain", "cover" or false |
| thumbBackColor | '#FFFFFF' | Background color of the thumb if "thumbMode" is set to "contain" |
| thumbPadding | null | Quickly overwrite the css padding of the thumbs |
| thumbMarginRight | null | Quickly overwride the css margin to the right of the thumbs |
| thumbMarginBottom | null | Quickly overwride the css margin to the bottom of the thumbs |
| thumbCss | {} | Quickly overwride any other CSS |
| thumbPreloadingImg | 'ajax-loader-map-white.gif' | Image located in /axZm/icons directory which will appear before the thumbs are loaded |
| thumbDescr | true | Show thumb description, if true and thumbDescrObj is not defined, then for 360/3D number of frames will be shown. |
| thumbDescrObj | {} |
Object containing descriptions of the thumbs, e.g.
|
| thumbImgObj | {} |
Alternativly to dynamically generated thumbs you can define a list of thumbs.
"thumbWidth" and "thumbHeight" options still determin the css of the thumbs. E.g.
|
| thumbIcon | true | Show 360, 3D or some other icon for the thumbs |
| thumbIconFile | {..} |
Filenames for icons located in /axZm/icons directory, default:
|
| videoThumb | {..} |
Paths for video thumbs. Depending on the video streaming platform images will be retieved instantly, default:
|
| videoUrl | {..} |
Url for the videos, default:
|
| videoSettings | {..} |
Parameters which are passed to the video players, defaults:
|
| $.axZm360Gallery documentation last updated: 2015-06-11 | ||
elseif ($_GET['example'] == [someValue])