Image Zoom Function: `magnifyImage(imgID, zoom)`¶

Overview¶

The magnifyImage(imgID, zoom) function is a lightweight and efficient way to implement an image zoom effect on your product images, reports, or dashboards inside Merciglobal Cloud ERP.

This function enables users to zoom into an image element by hovering over it, providing a closer look without opening a new view.

Function Signature¶

magnifyImage(imgID, zoom)

Parameters¶

Parameter	Type	Description
`imgID`	String	The `id` attribute of the image element you want to apply the zoom effect to.
`zoom`	Number	The magnification level (e.g., 2 = 200%, 3 = 300%).

eatures¶

Smooth zoom-in on hover.
Works seamlessly across modern browsers.
Zero dependencies – pure JavaScript.
Responsive to user interaction.
Ideal for product detail views, inventory items, and image-heavy dashboards.

How It Works¶

The function creates a magnifying glass effect using a DIV element positioned over the image. As the user moves their mouse, the magnifier displays the zoomed-in portion of the image in real time.

Usage Example¶

<img id="product-image" src="/assets/item123.png" width="300" height="240">
<script>
  magnifyImage("product-image", 2);
</script>

Integration Tips for Merci Developers¶

Ensure the image is fully loaded before calling the function.
The parent container should have position: relative to keep the magnifier aligned.
Combine with inventory or sales modules to enable zoom on product thumbnails.

Use Cases in Merciglobal Cloud ERP¶

Product Management Module: Allow users to zoom into product thumbnails for better quality inspection.
Sales Reports: Inspect high-res data charts or region-based maps.
Warehouse Module: Zoom into barcode or QR labels for accuracy verification.

Final Notes¶

Using magnifyImage() can significantly enhance the UX across several ERP modules. It's best suited for visual-heavy contexts and can be customized further if required.

For advanced use cases, contact the Merciglobal Cloud ERP developer support team.

Image Zoom Function: magnifyImage(imgID, zoom)¶