Image Zoomer

Details

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. Furthermore, this Plugin allows to you add small images to your page which can be zoomed on upon when clicked. 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.
For a demo of this Plugin please visit: https://webpagezoom.bubbleapps.io/
This Plugin is based upon Zoomerang.js.

Categories

Media, Technical, Blog, Visual Elements

Types

Element

Links

Service Link:

https://www.rapidevelopers.com

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
*Please note that that the Image Zoomer Element will have to be within your main page and should not be enclosed within any other group. If you put the Element into another group the Plugin won't work.
*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.

‍