How to add dynamic image of wordpress function to jQuery Zoomer

I have purchased MegaZoom Image Viewer and want to add image tags dynamically in MegaZoom Image Viewer JQuery script below, please help me how can I use this script, here is jQuery script.

<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>

      

+3


source to share





All Articles