“MegaZoom & Pan Image Viewer Wordpress & WooCommerce Plugin” Help by FWDesign

“MegaZoom & Pan Image Viewer Wordpress & WooCommerce Plugin”

Version: 5.0
By:© FWD (FUTURE WEB DESIGN)
Email: tibi_diablo@yahoo.com

Thank you for purchasing our script. If you have any questions that are beyond the scope of this help file, please feel free to email via our email. Thanks so much!

A) IMPORTANT NOTES - make sure you read this! - top

I strongly advice to optimize your images with tinypng.com this will reduce the loading time and also greatly improve performance.

There is no limit in the images width and height or size but for best loading time and performance try not to go over 6000px in width and height for your images.

B) Wordpress Installation and usage - top

To install the MegaZoom & Pan Image Viewer Wordpress & WooCommerce Plugin in your Wordpress site, you just need to follow the video tutorial using the "fwdzoomer.zip" file, or you can also upload and install it manually if you need to, just unzip the file and copy the "fwdzoomer" folder to your "wp-content/plugins/" directory.

To open the zoomer in lightbox when a button or image is clicked use the code below and make sure to set in your preset the display type to lightbox. If more instances are used change the setupFWDZoomer0 to setupFWDZoomer1, setupFWDZoomer2, setupFWDZoomer3 etc, based on how many zoomer instances are added in the page.

1	`<button` `onclick="setupFWDZoomer0()">Open in lightbox</button>`

To auto open the zoomer in lightbox when the page is loaded and ready use the code below. If more instances are used change the setupFWDZoomer0 to setupFWDZoomer1, setupFWDZoomer2, setupFWDZoomer3 etc, based on how many zoomer instances are added in the page.

<script>
    document.addEventListener('DOMContentLoaded', function(){
        setupFWDZoomer0();
    });
</script>

D) API specifications - top

In this section the API (exposed methods) are explained, basically these are functions that can be called when pressing a html element (button, image etc) to control the zoomer. We provided a .html file called API.html for reference, open this file with a text editor. Below are listed all methods, they are self explanatory.

API - public methods:

Function	Method	Description
zoomIn	zoomIn():Void	Zoom in.
zoomOut	zoomOut():Void	Zoom out.
goFullScreen	goFullScreen():Void	Go fullscreen.
goNormalScreen	goNormalScreen():Void	Go normalscreen.

API - event listeners:

Event	Prefix	Description
ready	FWDM.READY	Dispatched when the zoomer API is ready to be used.
fullscreen	FWDM.GO_FULLSCREEN	Dispatched when the zoomer goes in fullscreen mode.
normalscreen	FWDM.GO_NORMALSCREEN	Dispatched when the zoomer goes in normalscreen mode.
zoom	FWDM.ZOOM	Dispatched when all image is zoomed, this returns an object with a few useful properties like the current scale.

You can access the zoomer instances by their order in the page with the "FWDZOOMER" name with its order after it, starting from 0. For example if you have 2 instances their names are "FWDZOOMER0" and "FWDZOOMER1". Here is an example how to use the API in the Wordpress editor:

<script type="text/javascript">
    addEvents();
    function addEvents(){
        if (!window.FWDZOOMER0){
            setTimeout(addEvents, 100);
        }else{
            FWDZOOMER0.addListener(FWDM.READY, onReady);
        }
    }
    function onReady(){
        console.log("zoomer ready");
    }
    function zoomIn(e){
       
        FWDZOOMER0.zoomIn();
    }
  
    function zoomOut(e){
         FWDZOOMER0.zoomOut();
    }
</script>
 
<button onclick="zoomIn()">Zoom in</button>
<button onclick="zoomOut()">Zoom out</button>

E) WooCommerce - top

Please look into the WordPress section to understand how to configure the viewer.

Here is a video tutorial explaining how to use in WooCommerce, please note that the lightbox display type will not work with the WooCommerce version, video tutorial.

F) Sources and Credits - top

This component was made by Tibi from FWD (FWDesign) FUTURE WEB DESIGN, for more information and support contact us at tibi_diablo@yahoo.com

Once again, thank you so much for purchasing this item. As I said at the beginning, I'd be glad to help you if you have any questions regarding this MegaZoom & Pan Image Viewer Wordpress & WooCommerce Plugin and I'll do my best to assist.

FWDesign

Go To Table of Contents