Tech Tip: Adding a Zoom Window to Images
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.
Testing and Formatting
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.
<img src="BridgeServer/dpImages.asp?appkey=AppKey&file=[@Static Image Parameter]"
data-zoomsrc="BridgeServer /dpImages.asp?appkey=AppKey&file=[@Zoom Window Image Parameter]"
data-zoomalwaysshow="false" id="myimage" style="padding:0px; border:0px;" mce_style="padding:0px; border:0px;"/>