Click to enlarge an image with JS | XM Community
Solved

Click to enlarge an image with JS

  • 4 March 2024
  • 3 replies
  • 186 views

Badge +3

 

I've included an image, and I'm looking to implement a feature where users can enlarge the image by clicking on it. Is there a way to achieve this using JavaScript?

icon

Best answer by ahmedA 4 March 2024, 06:57

View original

3 replies

Userlevel 7
Badge +21

You can use the following js code:

Qualtrics.SurveyEngine.addOnReady(function () {
const quest = this;
const qc = quest.getQuestionContainer();
const images = qc.querySelectorAll("img");
const startingWidths = [];
const imageMaxWidth = "${e://Field/imageMaxWidth}" || "unset";
images.forEach((image, index) => {
startingWidths.push(image.style.width);
image.onclick = function () {
const currentState = image.style.width;
if (currentState == "unset" || currentState == "") {
image.style.width = startingWidths[index];
} else {
image.style.width = imageMaxWidth;
}
};
});
});

 

If you want to control the maximum size upon expansion, you can set an ED with the name imageMaxWidth to a certain pixel value (such as 200px).

 

Badge +3

Thanks for the answer @ahmedA !

 

Does it appear to be correct? Unfortunately, it doesn't seem to work with my current setup. The image I want to enlarge is located in section 5 of the Text/Graphic page.

 

Userlevel 7
Badge +21

Maybe your images are already at their full width.

Leave a Reply