| Compatibility: | IdSurvey 7 | IdSurvey 8 |
| √ | √ |
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
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.
<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("![]("+$(this).attr()
");
$(".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>