Zoom sulle immagini con un click

Compatibilità:IdSurvey 6IdSurvey 7

Questo javascript può essere utilizzato per effettuare uno zoom sulle immagini contenute nel testo di una risposta, cliccando direttamente sull’immagine.

Va impostato come script globale dell’indagine, ed è compatibile sia con CATI e CAWI che con CAPI.

 

ISTRUZIONI

Nelle impostazioni dell’indagine, seleziona la casella Avanzate. Clicca su “Modifica Script” e incolla il codice nell’editor. Seleziona ok per uscire dall’editor e salva le modifiche alla pagina.

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

Leave A Comment?