Hover over the image on the left to see a zoomed-in version appear over this div container window
Click on the image to see it appear in a jQuery LightBox window. This is optimized for mobile/responsive functionality.
AJAX-ZOOM with real high resolution tiled view opens at several modes, try it:
| This will change "ajaxZoomOpenMode" option |
---|---|
Open AJAX-ZOOM at fullscreen mode | |
Open AJAX-ZOOM in responsive "Fancybox" | |
Open AJAX-ZOOM in regular "Fancybox" | |
Open AJAX-ZOOM in "Colorbox" | |
|
Enable monitor size fullscreen:
- enable
- disable
|
|
360°/3D "preview" mode:
- enable
- disable
|
|
Disable scroll animation:
- enable
- disable
|
|
Tint filter:
|
|
Mouseover Zoom:
- enabled
- disabled
|
|
Prev, next arrows:
- enabled
- disabled
|
360 + images |
only images |
only one 360 | two 360 or more |
only one image | no 360 no images |
Hover over the image and see a zoomed-in version in a separate window
<script id="replaceImages1">
$('#color_1').bind('click', function(){
$.mouseOverZoomInit.replaceImages({
divID: 'az_mouseOverZoomContainer',
images360Overlay: true,
images360Thumb: true,
images360: {
1: {path: "pic/zoom3d/Uvex_Occhiali", position: "first", spinReverse: false, spinDemoTime: 4500}
},
images: {
1: {img: "pic/zoom/foot_scan/foot_scan_large.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/fashion008.jpg", title: "Test Title 5"},
6: {img: "pic/zoom/fashion/fashion_010.jpg", title: "Test Title 6"}
}
});
});
</script>
Hover over the image and see a zoomed-in version in a separate window
<script id="replaceImages1">
$('#color_2').bind('click', function(){
$.mouseOverZoomInit.replaceImages({
divID: 'az_mouseOverZoomContainer',
images360: {
// You could put a different 360 in here
},
images: {
1: {img: "pic/zoom/foot_scan/foot_scan_large.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"}
}
});
});
</script>
Hover over the image and see a zoomed-in version in a separate window
<script id="replaceImages2">
$('#color_2').bind('click', function(){
$.mouseOverZoomInit.replaceImages({
divID: 'az_mouseOverZoomContainer',
images360: {
1: {path: "pic/zoom3d/Uvex_Occhiali", position: "first", spinReverse: false, spinDemoTime: 4500}
},
images: {
// no images
}
});
});
</script>
Hover over the image and see a zoomed-in version in a separate window
<script id="replaceImages3">
$('#color_3').bind('click', function(){
$.mouseOverZoomInit.replaceImages({
divID: 'az_mouseOverZoomContainer',
images360: {
1: {path: "pic/zoom3d/Uvex_Occhiali", position: "first", spinReverse: false, spinDemoTime: 4500}
},
images: {
// no images
}
});
});
</script>
Hover over the image and see a zoomed-in version in a separate window
<script id="replaceImages4">
$('#color_4').bind('click', function(){
$.mouseOverZoomInit.replaceImages({
divID: 'az_mouseOverZoomContainer',
images360Overlay: false,
images360Thumb: true,
images360: {
1: {path: "pic/zoom3d/Uvex_Occhiali", position: "first", spinReverse: false, spinDemoTime: 4500}
2: {path: "pic/zoom3d/grey_shoe", position: "second", spinReverse: false, spinDemoTime: 4500}
},
images: {
// no images
}
});
});
</script>
Hover over the image and see a zoomed-in version in a separate window
<script id="replaceImages5">
$('#color_5').bind('click', function(){
$.mouseOverZoomInit.replaceImages({
divID: 'az_mouseOverZoomContainer',
images360: {
// no 360
},
images: {
1: {img: "pic/zoom/fashion/fashion_009.jpg", title: "Test Title 1"},
}
});
});
</script>
Hover over the image and see a zoomed-in version in a separate window
<script id="replaceImages6">
$('#color_6').bind('click', function(){
$.mouseOverZoomInit.replaceImages({
divID: 'az_mouseOverZoomContainer',
images360: {
// no 360
},
images: {
// no images
}
});
});
</script>
A common situation is that the images in mouseover zoom have to be changed, e.g. depending on users color selection of the article.
With jQuery.mouseOverZoomInit.replaceImages
you can easily change images and / or 360° objects...
Click here to see the code which
is executed when you click on the second colored circle above.
The last cirle does not have any images or 360. Click on it to see what happens.
With jQuery.mouseOverZoomInit.prev
and jQuery.mouseOverZoomInit.next
images and 360 can be switched one after each other...
6.0+ | 2.0+ | 2.0+ | 1.0+ | 9.5+ | 2.0+ | 4.0+ | Pinch, tap zoom, swipe |
Prior to Ver. 4.0 of this AJAX-ZOOM mousehover zoom extension it was responsive for the flyout window only. The actual "preview image" was not really responsive. In this new extension everything is absolutely responsive now. A positive side effect caused by the added responsiveness is that a single image can be used as "preview image" - the image which is hovered and the big "flyout image". But this is optional and not necessarily needed.
It has been tested in various Browsers including IE7. If you discover any bugs please do not hesitate to report. We will fix them with highest priority.
The integrated 360°/3D object spin support is optional! You do not need to have a 360° for every product. However you can put more than one 360° into the gallery and configure it to either open at place of the mousehover zoom or open at various modes directly. You can try it by changing 360°/3D "preview" mode above.
In Ver. 4.1 of this extension there is a new feature for "touch slide" images in order to switch between them. It can be enabled for all devices by setting "noMouseOverZoom" option to true. For touch enabled devices this feature is instantly enabled on default when the image space takes almost the whole width of the window. This is adjustable over "touchScroll" option which is set to 0.8 on default. Thus if you always want to enable this "touch slide" feature but only for touch devices, then you should set "touchScroll" option to 0.
The sliding thumbnail gallery below the mousehover image is optional. It can be replaced or disabled so you have only thumbs floating somewhere else. On default we use jQuery.axZmThumbSlider which is one of AJAX-ZOOM extensions. It is highly configurable, skinable, responsive and touch friendly. You can also configure it to be displayed vertically and placed to the side of mouseover zoom container.
The version packaged with AJAX-ZOOM is 1.3.4. It was modified to work with AJAX-ZOOM. However everything will also work with Fancybox 2.x which is available separately.
On default only the high resolution "master images" (source images) need to be defined, see "images" object / array in the example code below. This "images" object is basically the only thing which needs to be replaced dynamically by your application.
All thumbnails and flyout view images are instantly generated by AJAX-ZOOM "image server" which is located at your place (server). The size of the flyout image can be set to e.g. 1200x1200px, which are at most 1.44 Mio. pixels. For a 21 megapixels master image made by e.g. Canon EOS 5D these are around 5-7% of the actual resolution and size.
Alternatively to AJAX-ZOOM PHP based "image server" the paths to these flyout "preview" images can be hardset (see "images" option below) to point to some static (already scaled) images.
By clicking on the lens your users can explore the details of the entire big image with AJAX-ZOOM, which
utilizes image tiles technology (simmilar to google maps where the view "gets sharp" when you zoom in),
so the big master image never loads into browsers cache;
it can be even protected from direct access over http e.g. with .htaccess - (simply put
.htaccess file with this code and nothing else into the top directory with your master images: deny from all
).
Same as with thumbnails all image tiles can be generated instantly on-the-fly or pregenerated with AJAX-ZOOM special batch tool...
The width of the container in the left column of this responsive page layout is set to 32% of the window width. Consequently the child elements in the left column are 100% width and do change their width instantly depending on window width. So does AJAX-ZOOM mouseover zoom extension.
But what about the height of this mouseover zoom? It can be set to a fixed pixel value; if your responsive layout takes into account the height it can also be set to some variable value; but most likely you would just want to preserve a certain proportion of the height depending on width. In this case just set the new "heightRatio" option e.g. to 1.0 and the height of mouseover will be instantly adjusted making the mouseover square. If your images are mostly portrait orientated (common for fashion retailers), then you could set "heightRatio" value to e.g. 1.5; setting "heightRatio" to 'auto' will set the proportion instantly to the proportion of the actual image. Be aware though that if proportion of the images in the gallery is different the height will change on image switching, which might be unwanted behavior.
Setting "heightRatio" option may result in that the height of the mouseover zoom is bigger than window height and the image is not fully visible. To prevent this you can limit the calculated height with the "maxSizePrc" option. The value of 1.0 would limit the height to 100% of window height; a value of 0.8 to 80% of window height; you can also define two values, e.g. '1.0|-120' which would be window height minus 120px.
This responsive example page layout "collapses" the three column layout
when the width of the browser window is less than a certain amount of pixels.
This is done over CSS "media queries" and max-width condition which is common in modern templates,
e.g. @media only screen and (max-width: 960px){...}
With the new options called "heightMaxWidthRatio" and "widthMaxHeightRatio" you can take account of these changes
and adjust e.g. "heightRatio" depending on max-width, e.g. heightMaxWidthRatio: ["960|0.8", "700|0.7"]
.
The above basically means that below 960px of window width the "heightRatio" option turns into 0.8 and below 700px
"heightRatio" turns into 0.7;
The "flyout" window with bigger image is set to cover the middle column div (the text over gray background) - "zoomWidth" and "zoomHeight" options of "mouseOverZoomParam" are set to the selector '#middleSideContent' which is simply the id of the middle column. In case the browsers window is less than 960px the design of this example page changes in the way that the width of mouse over image is 100%; consequently there is no room for the flyout window, so this mousehover changes the "position" option of "mouseOverZoomParam" from 'right' to 'inside' (inner zoom).
Notes: this responsive page layout is not well elaborated and is only meant to show how the new responsiveness of AJAX-ZOOM mouseover zoom extension does work. Resize the browser window to see the effect.
<!-- 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/axZmMouseOverZoom/jquery.axZm.mouseOverZoom.4.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../axZm/extensions/axZmMouseOverZoom/jquery.axZm.mouseOverZoom.4.js"></script>
<script type="text/javascript" src="../axZm/extensions/axZmMouseOverZoom/jquery.axZm.mouseOverZoomInit.4.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>
<!-- Please call pinit.js only once per page -->
<script data-pin-build="parsePinBtns" type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<!-- IE < 9 @media query support -->
<script src="../axZm/plugins/css3-mediaqueries.min.js"></script>
<style type="text/css">
/******************************
AJAX-ZOOM mouseover block
******************************/
/* wrapper for all html */
#az_mouseOverZoomParent{
position: relative;
width: 100%;
}
#az_mouseOverZoomContainer{
position: relative;
background-color: #FFFFFF;
border: #AAA 1px solid;
}
#az_mouseOverZoomGallery{
position: relative;
margin-top: 20px;
height: 76px;
width: 100%;
display: none;
}
</style>
<!-- AJAX-ZOOM mouseover block -->
<div id="az_mouseOverZoomParent">
<!-- Container for mouse over image -->
<div id="az_mouseOverZoomContainer">
Mouseover Zoom loading...
</div>
<!-- gallery with thumbs (will be filled with thumbs by javascript) -->
<div id="az_mouseOverZoomGallery">
Gellery loading...
</div>
</div>
<!-- AJAX-ZOOM mouseover block END -->
You do not need all the options below to be listed as many are set to their default values.
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 jQuery.mouseOverZoomInit(options) which acts like a proxy to the other plugins.
Needed plugins:/axZm/plugins/demo/colorbox/example2/colorbox.css