Mega Zoom & Pan Image Viewer

Here is an example of how to configure Mega Zoom & Pan Image Viewer:

Image Viewer Settings

Image Viewer Settings allow you to control the overall behavior of the image viewer.

{ "imageViewer": { "width": 800, "height": 600, "zoomFactor": 2, "panSpeed": 5, "panBorderWidth": 10, "panBorderColor": "#666666" } }

Mouse Wheel Zoom Settings

Mouse Wheel Zoom Settings allow you to customize the zoom behavior when using the mouse wheel.

{ "mouseWheelZoom": { "zoomFactorIncrement": 0.5, "maxZoomFactor": 5, "minZoomFactor": 0.5, "wheelDeltaMultiplier": 5 } }

Pan Settings

Pan Settings allow you to customize the pan behavior.

{ "pan": { "pannable": true, "draggable": true, "snapToGrid": true, "gridSize": 10 } }

Image Loading Settings

Image Loading Settings allow you to customize the way images are loaded.

{ "imageLoading": { "loadTimeout": 5000, "lazyLoading": true, "imagePlaceholders": ["https://via.placeholder.com/350x150.png"] } }

CSS Customization

CSS Customization allows you to customize the appearance of the image viewer.

{ "css": { "background": "#333333", "border": "2px solid #666666", "overlay": "rgba(0, 0, 0, 0.5)" } }

Miscellaneous Settings

Miscellaneous Settings allow you to customize various other settings.

{ "misc": { "animateZoom": true, "animatePan": true, "showZoomIcon": true, "showPanIcon": true } }

Note: You can mix and match these settings to create a customized image viewer that suits your needs.

Here are the features of the Mega Zoom & Pan Image Viewer plugin:

1. Powerful image zoomer: Rich-feature and unique tool that allows to display and zoom/scale large images/products with unparalleled control and features.
2. Hardware acceleration: The zoomer was specially made to display large-quality images with great details, this is possible using the latest CSS/Javascript techniques to render the image using hardware acceleration for outstanding performance instead of the default browser image rendering.
3. Responsive layout: Fully responsive and adaptable regardless of which device is used.
4. Easy to use and install: This plugin is a veteran with more than 14 years in the making, we had enough time to understand our clients and package the best image zoomer!
5. Mobile and desktop optimized: The zoomer will adapt to any screen size and any device, whether it is used on your desktop browser or your mobile phone.
6. Graphics image.png skin or vector skin: Two included skins with a.png image skin or a vector svg skin, visually the skins look the same. Figma/.fig files included plus video tutorial about how to use the graphics and vector skin.
7. Unlimited skin design possibilities: Because the zoomer has the option of a graphigs/.png skin there are literally no limitations in the skin design, just replace the.png files used for the skin with your own and create magic example here and video tutorial.
8. Lazy scrolling or lazy loading: Initialize The zoomer on scroll when it is visible in the page, this way if the zoomer is in a page section that is not visible it will not be initialized, instead it will be initialized only when the user will scroll to that page section.
9. High image quality: Support for high image quality without losing performance.
10. Markers or hotspots: Three hotspots types (link, small info window and detailed info window) allowing to display information about the product on specific regions. Once created a hotspot can be used on more then one image.
11. Deep zooming: When the image is zoomed, markers/hotspots can be added at a specific scale/zoom and position, and they will appear only when that specific zoom/scale is reached, example here.
12. Customizable markers or hotspots: The markers or hotspots can be of any size or shape and they can vary, for example if you want to add three link type hotspots each of them can have a different size or graphics, this applies to all markers/hotspots types.
13. Customizable markers or hotspots position: Built-in tool for finding the correct position for the marker.
14. Navigator window: Customizable small navigator window that allows panning the image when it is zoomed. The window size can be set to any size and also the navigator image is drawn automatically from the original image, example here.
15. Right click menu: Customizable right click context menu that allows to control the zoomer, pan, fullscreen, etc...
16. Control buttons bar: Complete control buttons bar with buttons. The control buttons bar can be positioned vertical top or bottom and horizontal left, center or right.
17. Customizable buttons: All buttons are optional and can be easily removed if one or more are not required, the buttons order can be set as you wish and the buttons geometry (spacing and position) can be set individually offering fine tune control.
18. Pan left, right, top and bottom buttons: This buttons will allow to pan/move the image horizontally or vertically, they are optional and can be removed individually.
19. Zoom in and zoom out buttons plus scrollbar: Precise control while zooming in or out the image.
20. Customizable zoom factor: The zoom factor can be customized allowing to fine tune the zoom level, this way the image can be zoomed in or zoomed out as much as you want, example here.
21. Customizable zoom speed: Customizable zoom speed allowing fine-tune control over the zoom-in speed and zoom-out speed, this can be individually customized based on the image type or image size, example here.
22. Pinch and zoom gestures: Pinch and zoom gestures support for touch-enabled mobile devices like Iphone/IOS and Smasung S+/Android, the image can be zoomed with two-finger or panned using one finger.
23. Double click and zoom: When the image is double clicked, it will be zoomed in the point where it was double clicked, also it is possible to set the zoom factor for this feature.
24. Fullscreen button: This button will set the zoomer display type in native fullscreen/normalscreen.
25. Info window button & info window: Info window button for showing a detailed custom made window that supports any HTML content and can be styled as you want to fit your design.
26. Customizable buttons tooltips: Optional buttons tooltips and customizable tooltip text.
27. Keyboard support: Use arrows to move/pan the zoomer image.
28. Mouse wheel support: Use mouse wheel to zoom in or zoom out the zoomer image, example here.
29. Powerful API: Complete API for all features and more, plus events support, this methods and events can be called outside the zoomer.
30. Detailed documentation & video tutorials: The plugin comes with a detailed documentation as well as various video tutorials.
31. Direct support from the developer: Once you buy MegaZoom & Pan Image Viewer you will also receive direct support and attention from the plugin developer, Tibi @ FWD.

Additionally, the plugin has an updates log with the following versions:

• Version 3.1 Release Date 21.02.2023:
  • Added support for.webp Images, now the zoomer supports.jpg,.jpeg,.png,.webp.
  • Fixed bugs related to the lightbox, it was not working correctly.
  • Added option to close the lightbox when clicking outside the viewer area.
• Version 3.0 Release Date 21.10.2020:
  • Upgrade and update the entire UI/User Interface and UX/User Experience and skins to make it more modern and adaptable.
  • Remove the old skins and replace them with two new modern skins.
  • Improved markers styling and usage.
  • Added support for vector skins, all icons like buttons, markers, etc can now be vector SVG and style directly using CSS, example here.
  • Optimize the code to load faster and perform better.
  • Added various settings to fine tune the image control.
  • Fixed various bugs
  • Please note that because of the major changes in the viewer CORE structure this update is not compatible with the older versions, so if you want to update you will have to start from scratch with your products... I have tried to make it compatible but it was impossible because of the too many differences between the old version style and the new updated version.