How do I allow respondents to "click to enlarge" an image

I'm bumping this up because I noticed that you can put the Lightbox script within a question. Is there a simpler way to do this rather than putting the JS for Lightbox in every single question where you expect to have the thumbnail show?

So Tom I put the CSS in the add Custom CSS area. The Headers and Footers are a Text Box, so are you saying to add the JS file in the Custom CSS or somewhere else?

Hi! I was trying to do something similar today - having thumbnails in a question that can be enlarged when clicking on them. I tried to follow the suggestions mentioned in this thread, but when I implement it with either of the suggested approaches (see below), I get this error message:
"Base64 encoded images are not allowed and have been stripped from this question. Try using image links instead. Example: <img src="myimage.jpg"> Uploading images to your Qualtrics Graphics Library is an easy way to accomplish this."

It seems that the problem stems from this part in the lightbox.js file:
`$('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));`

What is the issue here? What am I doing wrong? Thanks for your help!


First approach:
1. Literally copy the code in lightbox.js into the html editor of the header, wrapped between a <script type="text/javascript"> </script>. (We can't upload .js files into the File Library, right?)
2. Similarly copy the content of lightbox.css into the css editor in Look & Feel.
3. Add the data-lightbox and data-title attributes to <a > wrapper of the image in the corresponding question.

The second approach is basically the same, except that I did not include the file contents in Look & Feel, but directly in the HTML editor of the corresponding question (using the <style> </style>, and <script> </script> wrap).

Oh great! Thanks @Shashi for this fast and super useful response! Works wonderfully.

All roads about enlarging an image lead to this post, so I’ll add my question here. I don’t know JS so I’m piecing together how to do this as best as possible.
So far the steps as explained above are:
1.     Go to Look & Feel > General > Edit Header > Source button to view header code
2.     Paste in this:

https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css" rel="stylesheet" />
3.     Then, go to the question where you have a graphic, click gear icon, and select Add JavaScript, where you will add this:
Image #1
Additional questions from a non-coder:
1.     In the Question’s JavaScript, are we adding it to the Onload section, the first of the three sections pre-filled in the script?
2.     Do we also need to add the addOnClick script from the Qualtrics Java Script directory?
Finally, my specific question is:
1.     The question type I am using is graphic. How must the addOnClick code be adapted for that? I believe it would involve changing the element.type to something other than radio, but I don’t know what it is.
2.     How/where does the lightbox script get incorporated with the addOnClick script?

Thank you!

Frank_Barbeite and DimMas ,
If you've added Lightbox to the header, you don't need to add any JavaScript to the question. Just add the html you question text (in HTML view):

Image #1
The script is triggered by adding the data-lightbox attribute to the link.

https://www.qualtrics.com/community/discussion/comment/31836#Comment_31836You weren't in source mode <> when you pasted the script.

Hello,
I have the lightbox working properly. However, they do not zoom in big enough. I need the zoom feature to be huge (exceeding the size of the computer screen). Does anyone know how to accomplish this?
Thank you!

Hi there,
I followed these steps to add a header in the look and feel and the HTML. I can see the image displayed at the bottom of the question in the builder mode, however, it won't display in the preview.
Is there a solution for this?

Hello all, 

In my survey, I am interested to see how participants change the width and height of a given image intendent of each other (i.e., not in scale) by clicking on the image and dragging the mouse (something similar to PowerPoint). For this, I have the following code to be pasted in question’s HTML. This code works perfectly in OnlineGDB.com, but when I paste it in Qualtrics and preview the question, though it lets participants change the image size, it does not let them change width and height independent of each other. Would appreciate if you can help me fix the problem. The code is as follows:

-------------------------------------------------------------------------------------

<div id="instructions">
  <p>Questiona instruction.</p>
  <br><br>
</div>

<div id="image-container" style="position: relative;">
  <img id="resizable-image" src="IMAGE LINK" alt="Your Image" />
</div>

<script>
  const image = document.getElementById('resizable-image');

  let isResizingWidth = false;
  let isResizingHeight = false;
  let initialWidth, initialHeight;
  let startX, startY;

  image.addEventListener('mousedown', (e) => {
    if (e.target === image) {
      isResizingWidth = e.clientX <= (image.getBoundingClientRect().left + image.offsetWidth);
      isResizingHeight = e.clientY <= (image.getBoundingClientRect().top + image.offsetHeight);

      initialWidth = image.offsetWidth;
      initialHeight = image.offsetHeight;
      startX = e.clientX;
      startY = e.clientY;

      document.addEventListener('mousemove', resizeImage);
      document.addEventListener('mouseup', stopResize);
    }
  });

  function resizeImage(e) {
    if (isResizingWidth) {
      const newWidth = initialWidth + (e.clientX - startX);
      const minWidth = 20;
      const maxWidth = 400;
      image.style.width = Math.min(maxWidth, Math.max(minWidth, newWidth)) + 'px';
    }

    if (isResizingHeight) {
      const newHeight = initialHeight + (e.clientY - startY);
      const minHeight = 20;
      const maxHeight = 400;
      image.style.height = Math.min(maxHeight, Math.max(minHeight, newHeight)) + 'px';
    }
  }

  function stopResize() {
    isResizingWidth = false;
    isResizingHeight = false;
    document.removeEventListener('mousemove', resizeImage);
    document.removeEventListener('mouseup', stopResize);
  }
</script>

------------------------------------------------------------------------------------------------------
Thank you