ZoomableProdViewer

1. Introduction

The ZoomableProductViewer component enables users to zoom in on product images interactively, enhancing visual details for better product examination.

2. Features

• Interactive zoom functionality with various modes (hover, click, both)

• Customizable zoom lens shape and size

• Adjustable zoom level for detailed views

• Option to display a hint and zoom indicator for user guidance

• Configurable styles including background color and shadow effects

3. Installation & Setup

To add the ZoomableProductViewer component to your Framer project.

• Open your Framer project.

• Navigate to the Marketplace and search for "ZoomableProductViewer".

• Click the "Install" button to add the component to your project.

• Drag the ZoomableProductViewer component onto your canvas.

4. How to Use

• Select the Component: Click on the ZoomableProductViewer component on the canvas.

• Upload an Image: In the properties panel, upload a high-resolution image for better zoom quality.

• Configure Zoom Settings:- Set the zoom level, lens size, and shape according to your preference.

• Adjust Style: Modify the background color, border radius, and shadow settings to match your design.

• Customize UI Elements: Enable or disable the hint and zoom indicator as needed.

• Set Interaction Preferences: Choose how the zoom is activated (hover, click, or both) and adjust smooth follow settings.

• Preview: Test the component in preview mode to ensure the zoom functionality works as expected.

5. Property Controls Reference

zoomConfigures the zoom functionality of the component.

• level (Number, Default: 2.5) - The magnification level applied to the image when zoomed.

• lensSize (Number, Default: 150) - The diameter of the zoom lens in pixels.

• lensShape (Enum, Default: "circle") - Determines the shape of the zoom lens (circle or square).

• showLensBorder (Boolean, Default: true) - Whether to display a border around the zoom lens.

• lensBorderColor (Color, Default: "rgba(255, 255, 255, 0.8)") - Color of the lens border.

• lensBorderWidth (Number, Default: 3) - Thickness of the lens border in pixels.

• safePadding (Number, Default: 32) - Extra padding to prevent lens clipping at edges.

styleControls the visual appearance of the component.

• backgroundColor (Color, Default: "#0a0a0a") - Background color of the component.

• borderRadius (Number, Default: 12) - Corner roundness in pixels.

• showShadow (Boolean, Default: true) - Whether to display a shadow around the component.

• shadowColor (Color, Default: "rgba(0, 0, 0, 0.3)") - Color of the shadow.

• shadowBlur (Number, Default: 30) - Blur effect of the shadow in pixels.

uiConfigures user interface elements of the component.

• showHint (Boolean, Default: true) - Whether to display a hint when the user hovers over the image.

• hintText (String, Default: "Hover to zoom") - Text displayed in the hint.

• hintPosition (Enum, Default: "top-left") - Position of the hint relative to the component.

• showZoomIndicator (Boolean, Default: true) - Whether to display the zoom level indicator.

• cursorStyle (Enum, Default: "crosshair") - Style of the cursor when hovering over the component.

interactionConfigures user interaction settings.

• zoomMode (Enum, Default: "hover") - Determines how the zoom is activated (hover, click, or both).

• smoothFollow (Boolean, Default: true) - Enables smooth following of the mouse cursor within the zoom area.

• followSpeed (Number, Default: 0.15) - Speed of the smooth follow effect.