Jump to content

Script to write zoom function


Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 12 years later...

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>

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...
  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...