Possible to zoom in on picures offered as selection option?

Question

Hello, I am currently working on a questionnaire evaluating an environmental education project to promote wild bees. Is it possible to zoom in on photos that are offered as a selection option? I have read that the image is automatically enlarged as soon as it is selected - but I would like to be able to zoom in during the decision process to better identify the wild bee.

Answer 1

Here's a little HTML code that will enlarge a picture.

<div>Some Text with an image:
  <a href="#" class="s2zoom2x">
  <img src="filename.jpg" style="width: 80px"></a>.
</div>

<style>
a.s2zoom2x img {
    transition: transform .2s;
}
a.s2zoom2x:focus img,
a.s2zoom2x:hover img {
    transform: scale(2);
}
</style>

Note, that the CSS code (the part within <style>) should better be located in the layout's <style> section. We will add this to the SoSci Survey defaults with the next update.

The <a> tag is necessary to allow zoom on touch devices like smartphones.

Die 80px makes the image smaller, configure the proper size you want to use in the non-zoomed view.

Comments

Thank you a lot for your help. I am not very used to the program, could me help me out and tell me where I have to insert the HTML Code? I tried the page where the survey is put together ("Fragebogen zusammenstellen") but it did not really do anything. Does it go right behind the item when editing the question? Many thanks in advance!

---

There are two parts. The second part, the <style> definition, is already part of SoSci Survey (at least on www.soscisurvey.de) by now, so you need not to take care about that any more.

For the first part, is depends where you have put the image. If you just dragged it into the questionnaire, you can instead drag an "HTML code" element into the page, and paste the code there. If you used the image within an item, replace the <img> tag by the <div>+<a>+<img> part of the above code.

---

Thank you, I replaced the <img> part by the code you provided me and this part worked. But when I run the questionnaire, a magnifying glass is shown but the size of the picture does not increase when I click on it. What did I miss? Many thanks in advance!

---

I did not configure a magnifying glass symbol in the CSS code ... interesting.

Would you mind creating a pretest URL for just that page, and post it here, so I can take a look at the issue in context?

---

Sorry for my delayed answer. In the pretest link in the section " Fragebogen zusammenstellen" the Zoom now worked, it just did not function when I used the "show in questionnaire" link where you create the question itself. So many thanks for your help, I think you solved the issue!