# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://anticode.gitbook.io/templates/plugins/bubble-image-zoomer-plugin.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.