Demo to preview the plugin:
Introduction
The Simple Image Zoom On Click plugin adds smooth and interactive image zoom functionality to your Bubble app. With just a click, any image can be enlarged, centered on the screen, and displayed with a customizable background overlay perfect for blogs, portfolios, galleries, or any content where images should stand out.
The mouse cursor of the user is changed to a zoom symbol when an image is hovered.
You can specify the duration of the transition effect, the background color and the max width/height of the zoomed image.
Key Features
Prerequisites
Before using the Simple Image Zoom On Click plugin, make sure you have:
- A Bubble Application – Install the Simple Image Zoom On Click plugin into your Bubble app.
- Enable ID Attribute – In Bubble, go to Settings → General and check “Expose the option to add an ID attribute to HTML elements.” This allows you to assign unique IDs to images that will use the zoom effect.
- Images on Your Page – Ensure you already have images placed in your Bubble editor that you want to apply the zoom effect to.
- Basic Knowledge of HTML Attributes – You should know how to assign an ID attribute to each image, since the plugin uses that ID to enable the zoom functionality.
How to setup
Step 1 – Install the Plugin
Step 2 – Add the Plugin Element to Your Page
Step 3 – Configure the Image Zoomer Plugin Element
Plugin Element Properties
Image Zoomer
Fields:
Title | Description | Type |
Element Id | The unique ID of the image element you want to apply the zoom effect on. | Text |
Transition Duration | The time (in milliseconds) it takes for the zoom transition to complete. | Number |
Background Color | The background color displayed behind the zoomed image. | Color |
Max Width | The maximum width (in pixels) that the zoomed image can expand to. | Number |
Max Height | The maximum height (in pixels) that the zoomed image can expand to. | Number |
Zoom Duration | The length of time (in milliseconds) the zoom animation takes. | Number |
Zoom Level | The scale factor applied when zooming in (e.g., 2 = twice the original size). | Number |
