Script to write zoom function

[SunnyB]

Hello,

I have a datapage that loads the image from the table. Now the picture is too small. Is there a javascript that i can use in the datapage that will zoom the picture when i hover the mouse over it.

here's an example.

http://shop.beaumontenterprise.com/ROP/ ... vid=895318

I know its enhancing seperate sections of the image, but if i could enhance the whole image, that will do.

Please help...

[bahar_vm]

Hello,

This is possible with Java Script programming. There is no generic script for this but if you are a programmer you can write it yourself. You need to find the event listener so when hover the mouse over each cell, call the function to open a layer. w3schools.com has a good Java Script source. Caspio also have some simple Java Script examples which give you an idea how to integrate Java Scripts within your Caspio DataPages.

If you would like Caspio to write the script for you, you can contact the Professional Service department to get a price quote http://www.caspio.com/services/services.asp

Best,

Bahar M.

[SunnyB]

Thankyou for your response. I could not find any examples on w3schools.com. Please tell me if you come across one. I really appreciate your help.

[futurist]

Hi all, 

This can actually be done simply with CSS.

I did this using a Tabular Report DataPage. I added a Header & Footer, selected the Header and disabled the HTML editor, and pasted the following:

<style>
.cbResultSetData img:hover{
transform: scale(2);
  transition: transform 0.25s ease;

}
</style>

 

 

[futurist]

If you also want the image to be zoomed in when clicked instead of when hovered over, you can do the following steps:

1. Edit your DataPage and go to Configure Results Page Fields screen. Add a Header and Footer. Select the Header and click on Advanced tab. Disable HTML editor. Go back to Standard tab and add the following code snippet:

<style>

.click-zoom input[type=checkbox] {
  display: none
}

.click-zoom img {
  margin: 100px;
  transition: transform 0.25s ease;
  cursor: zoom-in
}

.click-zoom input[type=checkbox]:checked~img {
  transform: scale(2);
  cursor: zoom-out
}
</style>
 

2. Add an HTML block, select it and click on the Advanced tab. Disable HTML editor. Go back to Standard tab and add the following code snippet:

<div class="click-zoom">
  <label>
    <input type="checkbox">
    <img src="[@field:FileImage/]">
  </label>
</div>

 

Replace [@field: FileImage/] in the code above with the image file field from your table.

[PotatoMato]

Hi! Just to add, you may also check this howto article: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/zooming-images-in-report-datapages/