Tech Tip: Adding a Zoom Window to Images

If you would like your end-users to be able to view images in closer detail, you can integrate a mouse over zoom window directly into your DataPage.  The JavaScript solution used in this article is called MojoZoom.  You can download the latest JavaScript and CSS files directly from their website for free.  This article gives step-by-step instructions on how to integrate this solution into a details page of an existing Report.

Setup and Preparation:

1.  Add the MojoZoom CSS code to your web page

If you are using the embedded deployment model you will need to add the MojoZoom CSS to your web page.  You can upload and reference the external file, or you can copy and paste the CSS code into your web page header directly after your page’s CSS code.  If you are pasting the code into the header, make sure that the CSS is surrounded by an opening and a closing style tag.

If you are using the frame or direct from Caspio deployment method, the CSS code can be added directly to the DataPage’s Style.  In the Caspio Bridge Explorer window, go to the Styles view.  Select the your DataPage’s style and open it by pressing the Edit button.  On the first screen of the Style wizard check Enable Advanced Options (CSS Source).  Click Next twice.  On the final screen, click on the Source Tab.  Select User-Defined Styles and paste the CSS into the panel on the right.

2.  Add a full-sized image field to your table

For each record you will need two versions of the image.  A smaller version of the image will be displayed statically as a DataPage element.  A dynamic portion of the full-sized version of the image will be displayed in the zoom window.

Go to the Tables view.  Select the base table of your DataPage.  Open the table in the Design view by pressing the Design button.  Add an extra field called “Full_Sized_Image” and set the data type to File.  Close the table and press Yes when prompted to save.  You will need to upload two separate images for each record to see the zoom window.

Steps to integrating the zoom window

1.  Add the image fields to the details page

Go to the DataPages view.  Select the DataPage you would like to alter.  Press the Edit Button to open the DataPage wizard.  Enable Advanced Options and Parameters.  Proceed to the Select Details Page Fields screen.  Move both image fields from the left to the right-hand panel using the arrow button.  Press Next.

2.  Insert an HTML Block before and after the two image fields

If they are not already located together, use the arrow buttons at the bottom left of the DataPage Elements panel to place the two image fields together.  Then, using the Insert button, insert two HTML blocks.  Move one HTML block before the image fields and one after.

3.  Hide the two image files

Now we are going to hide these two image files so they won’t display in the DataPage.  The fields need to be included in the DataPage Elements so we can reference the images stored in the Caspio Files section.  We will create the image the end-user will actually see in a later step.

Create an HTML table in the first HTML Block and set its display style to none.  Then open a table data tag (td).  In the second HTML Block close both the table data tag and the table tag.  Now if you were to open the DataPage, these two images would not be visible.

4.  Create the zoom-able image tag

Now we will create the zoom-able image tag.  This will be the static image the end-user sees and use as a zoom control.  You can place this image tag in any formatting block in your DataPage.  In this example we are placing it immediately after the hidden image fields.

Replace the Bridge Server and App Key portions of the sample image tag with the appropriate data from your Caspio Account.  If you are unclear about where to find this data it is explained in Referencing an Image Stored in Caspio Bridge.

Replace the Static Image Parameter and the Zoom Window Image Parameter using the insert button of your HTML Block.

5.  Add the MojoZoom JavaScript solution before the first HTML table tag

Now select the first HTML block.  Insert the MojoZoom JavaScript code before the table tag we created in step four.  Make sure that the JavaScript is surrounded by opening and closing script tags.  Press Finish to save your DataPage.

Testing and Formatting

By default the zoom window will display to the right of the image.  The default width and default height values are located near the beginning of the MojoZoom JavaScript.  The website for this solution also explains how you can create a static zoom window panel.

Note: If you are using a very large image file for the full sized image, it may take a few seconds to load before the zoom window becomes visible.

HTML Reference

Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.