Show pop up with enlarged picture


When respondents have to select images, they should be able to “zoom” an image to look at it more closely. Example: clicking a glass-symbol in the corner of an image brings a pop-up with an enlarged copy of the image, clicking an “X” in the upper right corner of this pop-up will close it. (This is the way some research institutes are doing this job).

How to do that?

strasser90 answered

    SurveyGizmo offer some workaround options for implementing hover over capability:

    I know this is not quite what you are looking for, but what you are looking for would likely involve a bit of custom implementation with the use of HTML and likely CSS as well. There is not a built in feature for this in SurveyGizmo, but if you have developers/designers on your team, it should be possible with some customization.

    I hope this helps clarify!

    Dominic Sharpe answered

      Thank you for your tips!

      Finally, I have found an easy solution I’d like to share with you:

      1. Add an id to the picture (example: <img id=”zoomable” src=… />)
      2. Add CSS for the id, either in the “Style” tab or directly in the source code of the question (with <style>…</style>).
      3. In this CSS, set a size for the normal picture; example: #zoomable {height:30vh}
      4. Set a size for the hovered picture; example: #zoomable:hover {height:70vh} 

      Now, the picture will enlarge every time the mouse is hovering over it.

      strasser90 answered

        Hi Strasser,

        I would also recommend looking into Javascript/Jquery Lightboxes. There are a ton of different options available out there.

        You can find a ton of great open source options by searching google.

        Jacob H (Moderator) answered


          Question stats

          • Active
          • Views12546 times
          • Answers3 answers
          • Followers1 follower