Please note that depending on configuration not all of these js and css files are needed! See "Dependencies" below;
<!-- jQuery core, needed if not already present! -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- AJAX-ZOOM core, needed! -->
<link href="../axZm/axZm.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>
<!-- Include mousewheel script, optional -->
<script type="text/javascript" src="../axZm/extensions/axZmThumbSlider/lib/jquery.mousewheel.min.js"></script>
<!-- Include thumbSlider JS & CSS, optional -->
<link href="../axZm/extensions/axZmThumbSlider/skins/default/jquery.axZm.thumbSlider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../axZm/extensions/axZmThumbSlider/lib/jquery.axZm.thumbSlider.js"></script>
<!-- Preloading spinner, optional -->
<script type="text/javascript" src="../axZm/plugins/spin/spin.min.js"></script>
<!-- AJAX-ZOOM mouse over zoom extension, needed! -->
<link href="../axZm/extensions/jquery.axZm.mouseOverZoom.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.mouseOverZoom.js"></script>
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.mouseOverZoomInit.js"></script>
<!-- Fancybox lightbox javascript, please note: it has been slightly modified for AJAX-ZOOM, only needed if ajaxZoomOpenMode below is set to "fancyboxFullscreen" or "fancybox", optional -->
<link href="../axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.js"></script>
<!-- AJAX-ZOOM extension to load AJAX-ZOOM into maximized fancybox, requires jquery.fancybox-1.3.4.css and jquery.fancybox-1.3.4.js, optional -->
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.openAjaxZoomInFancyBox.js"></script>
<!-- Colorbox plugin, only needed if ajaxZoomOpenMode below is set to "colorbox", optional -->
<link href="../axZm/plugins/demo/colorbox/example2/colorbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../axZm/plugins/demo/colorbox/jquery.colorbox-min.js"></script>
jQuery.fn.mouseOverZoomInit({
axZmPath: "auto", // Path to AJAX-ZOOM, e.g. /zoomTest/axZm/
divID: "az_mouseOverZoomContainer", // DIV for mouseover zoom
galleryDivID: "az_mouseOverZoomGallery", // DIV id of the gallery
// Objecct containing absolte paths to the master images, optional with titles. Start with 1, not 0
// Your master image can be as big as you want, it never loads into cache
// You can also protect the directory with .htaccess or other http access restrictions.
// Alternatively you can link to your static images with these keys:
// "zoom" - big mouseover image, "preview" - preview image and "thumb" - image for the gallery.
// "img" - your master image is needed anyway to open AJAX-ZOOM on click
images: {
1: {img: "/pic/zoom/fashion/fashion_004.jpg", title: "Test Title 1"},
2: {img: "/pic/zoom/fashion/fashion_003.jpg", title: "Test Title 2"},
3: {img: "/pic/zoom/fashion/fashion_001.jpg", title: "Test Title 3"},
4: {img: "/pic/zoom/fashion/fashion_002.jpg", title: "Test Title 4"},
5: {img: "/pic/zoom/fashion/fashion_008.jpg", title: "Test Title 5"},
6: {img: "/pic/zoom/fashion/fashion_010.jpg", title: "Test Title 6"}
}
// Optionally include AJAX-ZOOM 360/3D into the same layout
images360: {
1: {path: "/pic/zoom3d/Uvex_Occhiali", position: "first"}
},
// If you want to show 360 first set images360firstToLoad to true
images360firstToLoad: true
});
Several different plugins are used in this mouseover zoom tool.
Depending on the configuration not all of them are needed but they all
are included in the download package.
The options below refer to $.mouseOverZoomInit(options) which acts like a proxy to the other plugins.
| Value | Default | Description |
|---|
| axZmPath | 'auto' |
Path to AJAX-ZOOM, e.g. '/zoomTest/axZm/';
'auto' might not always work so if you experience any difficulties
please set the path manually as first.
|
| divID | '' | DIV (container) ID for mouseover zoom |
| galleryDivID | '' | DIV (container) id of the gallery, set to false to disable gallery |
| hideGalleryOneImage | true | Ver. 4.2.1+ Instantly hide gallery if there is only one image or one 360/3D |
| galleryAxZmThumbSlider | true | Use $.axZmThumbSlider on gallery thumbnails or not |
| galleryAxZmThumbSliderParam | {} | $.axZmThumbSlider parametrs if "galleryAxZmThumbSlider" is enabled;
for full list of options see under:
/axZm/extensions/axZmThumbSlider/ or
http://www.ajax-zoom.com/axZm/extensions/axZmThumbSlider/
|
| thumbW | 50 | Gallery thumb width |
| thumbH | 80 | Gallery thumb height |
| thumbRetina | true | Ver. 4.2.1+ double resolution of the thumb image |
| images | {} |
Object containing absolte paths to the master images, optional with titles. Start with 1, not 0.
Your master image "img" can be as big as you want, it never loads into cache
You can also protect the directory with .htaccess or other http access restrictions.
images: {
1: {
img: "/pic/fashion_001.jpg",
title: "Test Title 1"
},
2: {
img: "/pic/fashion_002.jpg",
title: "Test Title 2"
},
3: {
img: "/pic/fashion_003.jpg",
title: "Test Title 3"
}
}
Alternatively you can link to your static images with these keys:
- "zoom" - big mouseover image
- "preview" - preview image
- "thumb" - image for the gallery
- "img" - your master image is needed anyway to open AJAX-ZOOM on click; this image can be in a directory with restricted access over http;
- "title" - optional title
So the images object would look like this:
images: {
1: {
zoom: "/cache/fashion_001_1200x1200.jpg",
preview: "/cache/fashion_001_350x400.jpg",
thumb: "/cache/fashion_001_80x100.jpg"
img: "/pic/fashion_001.jpg",
title: "Test Title 1"
},
2: {
zoom: "/cache/fashion_002_1200x1200.jpg",
preview: "/cache/fashion_002_350x400.jpg",
thumb: "/cache/fashion_002_80x100.jpg",
img: "/pic/fashion_002.jpg",
title: "Test Title 2"
},
3: {
zoom: "/cache/fashion_003_1200x1200.jpg",
preview: "/cache/fashion_003_350x400.jpg",
thumb: "/cache/fashion_003_80x100.jpg",
img: "/pic/fashion_003.jpg",
title: "Test Title 3"
}
}
In case "zoom", "preview" and "thumb" are not defined, AJAX-ZOOM will generate these images out of "img" instantly on-the-fly.
Ver. 4.2.1 + images can be an array, e.g.
images: [
{ img: "/pic/fashion_001.jpg",
title: "Test Title 1"
},
{ img: "/pic/fashion_002.jpg",
title: "Test Title 2"
},
{ img: "/pic/fashion_003.jpg",
title: "Test Title 3"
}
]
|
| firstImageToLoad | 1 | Image from "images" option which should be loaded at first; see also "images360firstToLoad" option below |
| images360 | {} |
Ver. 4.2.1+ object or an array with paths to the folders which contain 360 degree images;
mostly you would want to add only one 360 spin but the "images360" object can contain as many as you like;
images360: {
1: {
path: "/pic/zoom3d/Uvex_Occhiali",
position: "first"
}
}
Other possible keys are:
- "thumb" - direct link to thumb image displayed in the gallery. In case "thumb" is not present AJAX-ZOOM will internally request first image of your 360 and generate the thumb.
You can disable this by setting "images360Thumb" option below to false so you will only get a 360 degree icon which is ok too.
- "thumbImg" - instead of "thumb" you can also directly link to an image under "path" out of which AJAX-ZOOM will generate the gallery thumb
- "title" - optional title
- "hotspotFilePath" - optional path to the file which contains data for hotspots. For more information see
example33.php
- "spinReverse" - reverse the direction of the spin
- "spinDemoTime" - time in ms during which AJAX-ZOOM will make one turn
- "anyThingElse..." - any other key see "images360Opt" below
|
| images360firstToLoad | false | Ver. 4.2.1+ in case present load 360 from "images360" first and not an image from "images" |
| images360Opt | [] | Ver. 4.2.1+
Some (not all) options from '/axZm/zoomConfig.inc.php' and '/axZm/zoomConfigCustom.inc.php'
can be set during runtime or in 'onBeforeStart' AJAX-ZOOM callback.
"images360Opt" is a list of what possibly could be set in "images360" objects, e.g. ['spinReverseZ', 'spinWhilePreload'] and so on.
Default is: ['spinReverse', 'spinReverseZ', 'spinBounce', 'spinDemoRounds', 'spinDemoTime', 'spinWhilePreload']
|
| images360Thumb | false | Ver. 4.2.1+ Show first image of the spin as thumb |
| images360Preview | true | Ver. 4.2.1+ Normally plain images are opened in some kind of lightbox or fullscreen;
By setting this option to true the 360's will load into "divID" at first and can be expanded to fullscreen.
|
| images360PreviewResponsive | true | Ver. 4.2.1+ this option is set to true for convinience reasons;
In case your "divID" has fixed width and height, set $zoom['config']['picDim'] option in '/axZm/zoomConfigCustom.inc.php'
after elseif ($_GET['example'] == 'mouseOverExtension360'){
|
| images360examplePreview | 'mouseOverExtension360' | Ver. 4.2.1+
In case "images360Preview" is set to true, the value of this parameter will be sent to AJAX-ZOOM as "options set" (example=mouseOverExtension360)
|
| preloadMouseOverImages | false | Preload all preview and mouseover images, possible values: false, true, 'oneByOne' |
| noImageAvailableClass | 'axZm_mouseOverNoImage' |
Ver. 4.2.1+ In case there are no images in "images", nor there are any in "images360", a div with some image as background can be appended to the
container and receive this options value as css class
|
| width | 'auto' | Width of the preview image or 'auto' (depending on parent container size - "divID", see above); this is also the value which will be passed to your AJAX-ZOOM imaging server to generate this image on-the-fly. |
| height | 'auto' | Height of the preview image or 'auto' (depending on parent container size - "divID", see above); this is also the value which will be passed to your AJAX-ZOOM imaging server to generate this image on-the-fly. |
| mouseOverZoomWidth | 1200 |
Max width of the image that will be shown in the zoom window;
this is the value which will be passed to your AJAX-ZOOM imaging server to generate this image on-the-fly.
To set the width of the fly out window see "zoomWidth" under "mouseOverZoomParam".
|
| mouseOverZoomHeight | 1200 |
Max height of the image that will be shown in the zoom window;
this is the value which will be passed to your AJAX-ZOOM imaging server to generate this image on-the-fly.
To set the height of the fly out window see "zoomHeight" under "mouseOverZoomParam".
|
| ajaxZoomOpenMode | 'fancyboxFullscreen' | Ver. 4.1.5+ Determines how AJAX-ZOOM
is opened when the user clicks on preview images / lens,
possible values: 'fullscreen' (see also "fullScreenApi" option below), 'fancyboxFullscreen', 'fancybox', 'colorbox';
By editing $.mouseOverZoomInit you can extend the plugin to be used with different types of modal boxes to load AJAX-ZOOM into.
|
| fancyBoxParam | {} | If fancybox is used in "ajaxZoomOpenMode" option, Fancybox options |
| colorBoxParam | {} | If colorbox is used in "ajaxZoomOpenMode" option, Colorbox options |
| example | 'mouseOverExtension' | Ver. 4.1.5+ configuration set which is passed to ajax-zoom when ajaxZoomOpenMode is 'fullscreen' |
| exampleFancyboxFullscreen | 'mouseOverExtension' | Ver. 4.1.5+ configuration set which is passed to ajax-zoom when ajaxZoomOpenMode is 'fancyboxFullscreen' |
| exampleFancybox | 'modal' | Ver. 4.1.5+ configuration set which is passed to ajax-zoom when ajaxZoomOpenMode is 'fancybox' |
| exampleColorbox | 'modal' | Ver. 4.1.5+ configuration set which is passed to ajax-zoom when ajaxZoomOpenMode is 'colorbox' |
| disableScrollAnm | true | Ver. 4.2.1+ disable animation while zooming with AJAX-ZOOM |
| fullScreenApi | false | Try to open AJAX-ZOOM at browsers fullscreen mode, possible on modern browsers except IE < 10 and mobile |
| axZmCallBacks | {} | AJAX-ZOOM has several callbacks, http://www.ajax-zoom.com/index.php?cid=docs#onBeforeStart |
| quality | 90 | Jpeg quality of the preview image and |
| qualityZoom | 80 | Jpeg quality of the zoom image shown in the flyout window |
| onLoad | null | Callback function |
| onImageChange | null | Callback function |
| onMouseOver | null | Callback function |
| onMouseOut | null | Callback function |
| | | |
| spinner | true | Use ajax loading spinner without gif files etc |
| spinnerParam | {} | Spinner options, for more info see: http://fgnass.github.com/spin.js/ |
| | | |
| mouseOverZoomParam | {} | JS object containing specific options to this mouseover zoom, see below: |
| Value | Default | Description |
|---|
| position | 'right' | Position of the flyout zoom window, possible values: 'inside', 'top', 'right', 'bottom', 'left' |
| posAutoInside | 150 | applies when width (left, right) or height (top, bottom) of zoom window are less than this px value (zoomWidth || zoomHeight are set to auto); if zoomWidth || zoomHeight are fixed, applies when zoom window is out of page border |
| autoFlip | 120 | Flip right to left and bottom to top if less than int px value or false to disable |
| biggestSpace | false | Overrides position option and instantly chooses the direction, disables autoFlip; playes nicely when zoomWidth and zoomHeight are set to 'auto' |
| zoomFullSpace | false | Uses full screen height (does not align to the map / disables adjustY) if position is right or left || uses full screen width (does not align to the map / disables adjustX) if position is top or bottom |
| zoomWidth | 'auto' | Width of the zoom window e.g. 540 or 'auto' or Ver. 4.1.5+ jQuery selector|correction value, e.g. '#refWidthTest|+20';
so if you want to have a width of the zoom window same as for example a responsive container to the right (so it is fully covered)
and max possible height, then define the id of this container to the right,
e.g. 'myArticleData', set "zoomWidth" to '#myArticleData|+10' and "zoomHeight" to 'auto'.
|
| zoomHeight | 'auto' | Height of the zoom window e.g. 375, or 'auto' or or Ver. 4.1.5+ jQuery selector|correction value, e.g. '#refWidthTest|+20' |
| autoMargin | 15 | If zoomWidth or zoomHeight are set to 'auto', the margin to the edge of the screen |
| adjustX | 15 | Horizontal margin of the zoom window |
| adjustY | -1 | Vertical margin of the zoom window |
| lensOpacity | 0.30 | Opacity of the selector lens |
| zoomAreaBorderWidth | 1 | Border thickness of the zoom window |
| galleryFade | 300 | Speed of inner fade or false |
| shutterSpeed | 150 | Speed of shutter fadein or false; applies only if image proportions are different from container |
| showFade | 300 | Speed of fade in for mouse over |
| hideFade | 300 | Speed of fade out for mouse over |
| flyOutSpeed | false | Ver. 4.0.10+ speed for flyout or false to disable |
| flyOutTransition | 'linear' | Ver. 4.0.10+ transition of the flyout |
| flyOutOpacity | 0.6 | Ver. 4.0.10+ initial opacity for flyout |
| flyBackSpeed | false | Ver. 4.0.10+ speed for fly back or false to disable |
| flyBackTransition | 'linear' | Ver. 4.0.10+ transition of the fly back |
| flyBackOpacity | '0.2' | Ver. 4.0.10+ final opacity of fly back |
| smoothMove | 2 | Integer bigger than 1 indicates smoother movements; set 0 to disable |
| tint | false | Color value around the lens or false |
| tintOpacity | 0.5 | Opacity of the area around the lens when tint is not false |
| showTitle | true | Enable / disable title on zoom window |
| titleOpacity | 0.5 | Opacity of the title container |
| titlePosition | 'top' | Position of the title, top or bottom |
| cursorPositionX | 0.5 | Cursor over lens horizontal offset, 0.5 is middle |
| cursorPositionY | 0.55 | Cursor over lens vertical offset, 0.5 is middle |
| touchClickAbort | 500 | Ver. 4.1.5+ time in ms after which click is aborted without touch movement and mousehover is initialized |
| loading | true | Display loading information, CSS .mouseOverLoading |
| loadingMessage | 'Loading...' | Loading message, not needed, can be just the spinner - see below |
| loadingWidth | 90 | Width of loading container |
| loadingHeight | 20 | Height of loading container |
| loadingOpacity | 1.0 | Opacity of the loading container (the transparent background is set via png image on default, see css class) |
| zoomHintEnable | true |
Ver. 4.2.1+ Enable zoom icon which disappears on mouse hover; css class .axZm_mouseOverZoomHint;
If you want to change the position or the icon simply change the css class;
|
| zoomHintText | 'Zoom' | Ver. 4.2.1+ Text which will be appended next to the icon enabled by "zoomHintEnable" |
|
