Click to enlarge an image with JS | XM Community
Skip to main content

 

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?

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).

 


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.

 


Maybe your images are already at their full width.


Leave a Reply