Link to the plugin page: will be late
Demo to preview the plugin:
Introduction
The Image Zoom for Bubble Mobile plugin is designed to provide advanced image zooming and scaling functionality for mobile applications built on the Bubble platform. This plugin allows users to interact with images through pinch-to-zoom, double-tap zooming, and provides fine-grained control over zoom limits and behavior. It’s specifically optimized for mobile devices and provides a native-like image viewing experience.
The plugin is perfect for applications that need to display images that users might want to examine in detail, such as photo galleries, product catalogs, maps, or any visual content that benefits from zoom functionality.
Prerequisites
This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app available at:
https://testflight.apple.com/join/njge8JcQ
Please note that the testing app is currently available for iOS only.
How to setup
Setting up the Image Zoom for Bubble Mobile plugin is straightforward:
- Install the plugin from the Bubble Plugin Marketplace
- Add the “Image Container” element to your page
- Configure the image source and zoom parameters in the element properties
- The plugin will automatically handle touch gestures for zooming and panning
No additional configuration or API setup is required. The plugin works immediately after installation.
Plugin Element Properties
The plugin contains an Image Container visual element that should be used on a page to display scalable images.
Image Container
Fields:
Title | Description | Type |
Image Source | Image URL to be displayed in the container | image |
Min Zoom | Minimum zoom value when zooming out (default: 0.5) | number |
Max Zoom | Maximum zoom value when zoomed in (default: 4) | number |
Initial Zoom | Initial zoom value when image loads (default: 1) | number |
Zoom Step | The step of zooming in with a double-tap (default: 1) | number |
Container Background | Container background color (default: rgba(0,0,0,1)) | Color |
Content Fit | Determines how the image should be resized to fit its container (options: cover, contain, none) | Dropdown |
Element Actions
This plugin does not contain specific element actions. The zoom and pan functionality is handled automatically through touch gestures on mobile devices.
Exposed states
Name | Description | Type |
Current Scale | Returns the current zoom/scale level of the image | Number |
Element Events
Name | Description |
Image Loaded | Triggered when the image has finished loading and is ready for interaction |
Workflow example
Here’s a basic workflow example showing how to implement the Image Zoom for Bubble Mobile plugin:
Step 1: Add the Image Container Element
- Drag the “Image Container” element onto your page
- Set the element size according to your design needs
Step 2: Configure Image Source
- Set the “Image Source” field to your desired image URL or use a dynamic value from your database
Step 3: Customize Zoom Settings
- Adjust “Min Zoom” and “Max Zoom” values based on your requirements
- Set “Initial Zoom” to control how the image appears initially
- Configure “Zoom Step” for double-tap zoom behavior
Step 4: Handle Image Loading
- Use the “Image Loaded” event to trigger any actions you want to perform after the image has loaded
- You can access the “Current Scale” state to track the user’s zoom level
