Zoom images on answers with a click

Compatibility:IdSurvey 6IdSurvey 7

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

You need to insert the script as global script and it’s compatible with CATI, CAWI and CAPI.

 

INSTRUCTIONS

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

<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("<div class='backImage'><i class='icon-remove'></i><img id='preview' class='fullscreen' src='"+$(this).attr('src')+"'/></div>");     
              $(".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>

zoom-image

Leave A Comment?