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?
Solved
Click to enlarge an image with JS
+3Best answer by ahmedA
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).
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).
+3Thanks for the answer
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.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.