What do you need help with?

Zoom images on answers with a click

< 1 min read

AI Doc Summarizer AI Summary

This javascript can be used to zoom images included in the body of an answer by clicking on the image itself.

You will have to insert the script as global script. It is compatible with CATI, CAWI and CAPI.

Instructions #

zoom-image

In the survey settings section, select “Advanced” on top left. Click on “Edit Script” and copy the script into the editor. Select “Ok” to close the editor and save editing.

IdCode
<script>
      $(function(){
          $(document).on("core.pageRendered", function(e, opts){
             $(".survey-page-wrapper .sub-elements-wrapper img").closest(".sub-elements-wrapper").find('.response-option-overlay').remove();
              $("img").off("click").on("click",function(){
                 $(".backimage").remove();
    $(".sub-elements-wrapper").append("
");     
              $(".icon-remove").off("click").on("click",function(e){
                  e.stopPropagation();
                  $("body").toggleClass("overHidden").toggleClass("fullscreen");
              });                
                  $("body").toggleClass("overHidden").toggleClass("fullscreen");
                });
          });
        });
</script>
<style>
      body.overHidden,
      body.overHidden #body{
          overflow:hidden;
      }
         .backImage{
        display:none;
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        right:0;
        background:#FFF;
        z-index: 9999;
           overflow:auto;
      }
      .backImage .icon-remove{
          display:none;
          position:absolute;
          top:0px;
          right:0;
          font-size: 50px;
          color: rgba(70, 70, 70, 0.48);
          z-index: 999999;
      }
      .fullscreen .backImage .icon-remove,
      .fullscreen .backImage{
          display:block;
      }
      img.fullscreen{
          max-width:100%;
          background:#FFF;
          width:auto;
          height:auto;
          margin: 0 auto;
          z-index:99999;
      }
      .review{
          display:none;
      }
      .fullscreen.review{
          display:block;
      }
</style>
<style>
    .scrollholder {
        position: relative;
        width: 310px; height: 350px;
        overflow: auto;
        z-index: 1;
    }
</style>
What are your feelings
Table of contents