Bubble - Image Zoomer Plugin

Overview

This Plugin allows you to zoom into your images on click and center them on your page whilst changing the background color. This Plugin is ideal for writing Blogs and enhancing the user experience during reading. You can specify the duration of the transition effect, the background color and the max width/height of the zoomed image.

For a demo of this Plugin please visit: https://webpagezoom.bubbleapps.io/ This Plugin is based upon Zoomerang.js.

Instructions

To initiate the zooming effect, you will have to go to settings->general and check the option "Expose the option to add an id attribute to HTML elements.". Next, you have to add an "Image Zoomer" Element onto your Editor and an Image that should be used to for the effect. Specify an Element ID (any text you can think of) and add it as an ID attribute to the Image you have just added, as well as to the Field "Element Id" within the element inspector of the Image Zoomer Element. You can now specify the transition duration (in seconds), the background colour, and the max width/height (in pixels). Please note that the max width/height that you use for a desktop view might be to big for mobile use. To solve this you can add a conditional to the Image Zoomer Element that says -> When current page width < 600 then change the max width/height to a lower value. Please also note that the Image Zoomer Element and the Image itself have to be brought to the front of the page (right click on the element and click "bring to front") as otherwise other elements will overlap. You might be able to use this Plugin with other Elements which are not Images, however we did not test this and cannot guarantee anything.