Zoom in image on click

[Volomeister]

Hi there!

I was looking to add a zoom on click option for my images on details report page, but there  was no default option in caspio, so I came up with the next workaround using JavaScript and CSS:

1) Add next styles in the header of "Search and Report Wizard - Configure Details Page Fields"
 

<style>
input#zoomCheckbox {
  display: none;
}
.appendedContainer {
overflow-x: scroll;
}
.appendedContainer img {
  width: 100%;
  transition: width 0.8s ease;
  cursor: zoom-in;
  overflow-x: scroll;
  max-width: 90%!important;
}

input#zoomCheckbox:checked ~ label > img {
  max-width: 300%!important;
  width: 170%;
  cursor: zoom-out;
}

</style>

2) Add next JavaScript in the header of "Search and Report Wizard - Configure Details Page Fields"

<script>
const imageSelector = '.cbFormData img';

document.addEventListener('DataPageReady', _=>{

const image = document.querySelector(imageSelector)

const zoomImageTemplate = (HTMLimgElement)=> {

  return `<div class="appendedContainer">
  <input type="checkbox" id="zoomCheckbox">
  <label for="zoomCheckbox">
    ${HTMLimgElement.parentElement.innerHTML}
  </label>
  </div>`
}

image.parentElement.innerHTML = zoomImageTemplate(image)
})

</script>

You can change the value of imageSelector variable so it matches the CSS selector of the required image you need to zoom. 

Hope this helps

[Kurumi]

Hi! Just an update on this, Caspio has a new Tech tip called Zooming in and out of Images in Report DataPages. To know more on how to implement it in the DataPage, you can check it here: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/zooming-images-in-report-datapages/

[GoodBoy]

Hello! You may also try to open the image in a lightbox so it will be displayed in a larger scale.

- https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/create-a-lightbox-view-for-images/

[ParkLoey]

Hi! You may also be interested in zooming the image on hover: