At first glance this example seems to be a little overloaded. It is however meant to show some possibilities of the API. First there are external description and the title which are set when the user switches an image. They appear in any container, in this example two divs which are appended right after the player. Also the titles of the thumbs are set dynamically from external source. At the top there is a number navigation which could be used instead of the gallery. As everywhere navigation can be completly hidden and there are tons of other parameters and css to customize the player.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
</head>
<body>
<!-- Div for numbers navigation-->
<DIV id="testNumNav" style="min-height: 25px; font-size: 10pt; color: #FFFFFF; width: 500px; padding-top: 5px; float: left;"></DIV>
<!-- Divs for prev / next API -->
<DIV style="min-height: 25px; font-size: 10pt; color: #FFFFFF; width: 230px; padding-top: 5px; float: left;">
<DIV class="alternNavi" style="width: 30px; text-align: center; float: right;" onclick="jQuery.fn.axZm.zoomPrevNext('next')">>></DIV>
<DIV class="alternNavi" style="width: 30px; text-align: center; float: right;" onclick="jQuery.fn.axZm.zoomPrevNext('prev')"><<</DIV>
</DIV>
<!-- Div where AJAX-ZOOM is loaded into -->
<DIV id="test" style="min-height: 462px; margin: 0; clear: both;">Loading, please wait...</DIV>
<!-- Divs for external description -->
<DIV style="padding: 5px 10px 10px 10px; width: 710px; background-color: #1D1D1A; margin-top: 5px">
<DIV id="testTitleDiv" style="min-height: 40px; font-size: 16pt; color: #D3D3D3; width: 700px;"></DIV>
<DIV id="testDescrDiv" style="min-height: 50px; font-size: 10pt; color: #FFFFFF; width: 700px;"></DIV>
</DIV>
<script type="text/javascript">
// Init (php array like) js objects to store descriptions and titles
var testTitle = {}; // Object with titles
var testDescr = {}; // Object with longer descriptions
var thumbTitle = {}; // Object with thumb descriptions
testTitle["test_animals1.png"] = "Some title for image test_animals2.png";
testDescr["test_animals1.png"] = "Some description for image with the filename test_animals1.png. ...";
thumbTitle["test_animals1.png"] = "Thumb title 1";
testTitle["test_animals2.png"] = "Some title for image test_animals2.png";
testDescr["test_animals2.png"] = "Some description for image with the filename test_animals2.png. ...";
thumbTitle["test_animals2.png"] = "Thumb title 2";
// Simple function to put descriptions in a div with fade effect
function ajaxZoomAnimateDescr(title, descr){
jQuery("#testTitleDiv").fadeTo(300,0, function(){
$(this).empty().html(title).fadeTo(300,1);
});
jQuery("#testDescrDiv").fadeTo(300,0, function(){
$(this).empty().html(descr).fadeTo(300,1);
})
}
// Set numbers navigation
function ajaxZoomSetNumbers(){
if (!jQuery.axZm){return false;}
jQuery("#testNumNav").empty();
jQuery.each(jQuery.axZm.zoomGA, function (k, v){
jQuery("<div />")
.addClass("alternNavi")
.html(k)
.attr("id", "alternNavi_"+k)
.bind("click", function(){jQuery.fn.axZm.zoomSwitch (k)})
.appendTo("#testNumNav");
});
}
var ajaxZoom = {}; // Init ajaxZoom object...
ajaxZoom.path = "../axZm/"; // Path to the axZm folder
ajaxZoom.parameter = "zoomDir=/pic/zoom/animals&example=25"; // Parameter passed to the player
ajaxZoom.divID = "test"; // The id of the DIV where ajax-zoom has to be inserted into.
// Callbacks
ajaxZoom.opt = {
onLoad: function(){
// Get loaded image name, as not necessarily the first image
// must be loaded at first into the gallery
var getImgName = jQuery.axZm.zoomGA[jQuery.axZm.zoomID]["img"];
// Set title and description
ajaxZoomAnimateDescr(testTitle[getImgName], testDescr[getImgName]);
// Set titles of the thumbs in the gallery
// jQuery.fn.axZm.setDescr is API function of AJAX-ZOOM
jQuery.each(thumbTitle, function (fName, descr){
jQuery.fn.axZm.setDescr(fName, testTitle[fName], descr);
});
// Put the zoom level on different place... not needed
jQuery("#zoomLogHolder").appendTo("#zoomLayer").css({position: "absolute", right: 38, top: -6, overflow: "visible"});
jQuery("#zoomLevel").css({"textAlign": "right"});
// Set numbers navigation
ajaxZoomSetNumbers();
jQuery("#alternNavi_"+jQuery.axZm.zoomID).css({backgroundColor: "green"});
},
onImageChange: function(info){
/* Set title and description on image change
Note: there are many variations possible, e.g. the descriptions could be loaded
via ajax request, you could extend this example to change the image sets like in example4.php
*/
var getImgName = jQuery.axZm.zoomGA[jQuery.axZm.zoomID]["img"];
//testTitle[info.fileName]
ajaxZoomAnimateDescr(testTitle[getImgName], testDescr[getImgName]);
jQuery(".alternNavi").css({backgroundColor: "#1D1D1A"});
jQuery("#alternNavi_"+jQuery.axZm.zoomID).css({backgroundColor: "green"});
}
};
</script>
<!-- Insert the loader file that will take the above settings (ajaxZoom) and load the player -->
<script type="text/javascript" src="../axZm/jquery.axZm.loader.js"></script>
</body>
</html>
|
See AJAX-ZOOM in action on
Magento
Integration quide |
|
See AJAX-ZOOM in action on
xt:Commerce (xtcModified, Gambio, VEYTON 4)
Integration quide |
|
See AJAX-ZOOM in action on
Oxid eSales
Integration quide |
| See AJAX-ZOOM in action on hybris multichannel commerce (no php) |
| More coming soon... |
 | 6.0+ |  | 2.0+ |  | 2.0+ |  | 1.0+ |  | 9.5+ |  | 2.0+ |  | 4.0+ |  | Pinch zoom, tap zoom, swipe |
| Name (required): | | |
| Email (required): | ||
| Website: |
|
Your comment (no html): | |
| Looking for a place to add a personal image? Visit www.gravatar.com to get Your own gravatar, a globally-recognized avatar. After you're all setup, Your personal image will be attached every time you comment. | |
