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