I have purchase the Megazoom Image Viewer and want to add featured image dynamically in Megazoom Image Viewer jQuery script bellow, Please help me how can I use this script, here is the script of jQuery.
<div id="productHolder"></div>
<script type="text/javascript">
var megazoom;
FWDUtils.onReady(function(){
init();
setupZoomer("round_silver_graphics/imageToZoom.jpg", "megazoomPlayList", "round_silver_graphics/navigatorImage.jpg", 4324, 2530);
});
function setupZoomer(imagePath, playListAndSkinId, navigatorImagePath, imageWidth, imageHeight){
if(megazoom){
megazoom.destroy();
megazoom = null;
}
megazoom = new FWDMegazoom({
//----main----//
parentId:"productHolder",
playListAndSkinId:playListAndSkinId,
displayType:"responsive",
skinPath:"skin_round_silver/skin/",
imagePath:imagePath,
preloaderText:"Loading image...",
useEntireScreen:"yes",
addKeyboardSupport:"yes",
addDoubleClickSupport:"yes",
imageWidth:imageWidth,
imageHeight:imageHeight,
zoomFactor:1.4,
doubleClickZoomFactor:1,
startZoomFactor:"default",
panSpeed:8,
zoomSpeed:.1,
backgroundColor:"#FFFFFF",
preloaderFontColor:"#585858",
preloaderBackgroundColor:"#FFFFFF",
//----lightbox-----//
lightBoxWidth:800,
lightBoxHeight:550,
lightBoxBackgroundOpacity:.8,
lightBoxBackgroundColor:"#000000",
//----controller----//
buttons:"moveLeft, moveRight, moveDown, moveUp, scrollbar, hideOrShowMarkers, hideOrShowController, info, fullscreen",
buttonsToolTips:"Move left, Move right, Move down, Move up, Zoom level: , Hide markers/Show markers, Hide controller/Show controller, Info, Full screen/Normal screen",
controllerPosition:"bottom",
inversePanDirection:"yes",
startSpaceBetweenButtons:10,
spaceBetweenButtons:10,
startSpaceForScrollBarButtons:20,
startSpaceForScrollBar:6,
hideControllerDelay:3,
controllerMaxWidth:800,
controllerBackgroundOpacity:1,
controllerOffsetY:3,
scrollBarOffsetX:0,
scrollBarHandlerToolTipOffsetY:4,
zoomInAndOutToolTipOffsetY:-4,
buttonsToolTipOffsetY:0,
hideControllerOffsetY:2,
buttonToolTipFontColor:"#585858",
//----navigator----//
showNavigator:"yes",
navigatorImagePath:navigatorImagePath,
navigatorPosition:"topright",
navigatorOffsetX:6,
navigatorOffsetY:6,
navigatorHandlerColor:"#FF0000",
navigatorBorderColor:"#FFFFFF",
//----info window----//
infoWindowBackgroundOpacity:.6,
infoWindowBackgroundColor:"#FFFFFF",
infoWindowScrollBarColor:"#585858",
//----markers-----//
showMarkersInfo:"no",
markerToolTipOffsetY:2,
//----context menu----//
showScriptDeveloper:"no",
contextMenuLabels:"Move left, Move right, Move down, Move up, Zoom in/Zoom out, Hide markers/Show markers, Hide controller/Show controller, Info, Full screen/Normal screen",
contextMenuBackgroundColor:"#d1cfcf",
contextMenuBorderColor:"#8f8d8d",
contextMenuSpacerColor:"#acacac",
contextMenuItemNormalColor:"#585858",
contextMenuItemSelectedColor:"#FFFFFF",
contextMenuItemDisabledColor:"#b7b4b4"
});
}
</script>