Hello,For my survey, I am giving survey-takers a set amount of time to view an image. The image is a large poster which I would like viewers to be able to zoom in on. I have searched extensively on Qualtrics community to find a solution to this, but unfortunately with my inability to code using JavaScript/HTML/CSS, I cannot find a solution that I am able to make work.Based on my searches, I have two options, both of which have a major issue:Option 1: Use the code provided by w.patrick.gale in the following link: https://jsfiddle.net/Taqi_Shah/0zshgg1a/ which allows for a very cool mouseover/hover option.

Hi @romeoT, thatpost was unfortunately affected by the Community Platform migration so the HTML piece is not displaying correctly. I’ve updated it below.To give it a try, first create a question in the survey Builder. Using the Rich Content Editor's HTML/Source view "<>", update the Question Text with the below:Zoom in on the coffee below:<br><div class="wrapper"><div class="left"><img src="https://raw.githubusercontent.com/ivanmmarkovic/misc/master/images/large/beverage-caffeine-cappuccino-1660916.jpg"></div><div class="right"><div id="inner" class="inner"><img src="https://raw.githubusercontent.com/ivanmmarkovic/misc/master/images/large/beverage-caffeine-cappuccino-1660916.jpg"></div></div></div>Next, add the below to the question's JavaScript in the OnReady section:const inner = document.getElementById("inner");const left = document.querySelector(".left");left.addEventListener("mousemove", handleMousemove, false);function handleMousemove(event) { let { width, height } = this.getBoundingClientRect(); let xAxis = Math.round(event.offsetX / width * 100); let yAxis = Math.round(event.offsetY / height * 100); jQuery(inner).css({"transform":"translate(-"+xAxis+"%,-"+yAxis+"%)"});}Finally, add the below CSS to the Style section of the survey's Look & Feel:* { box-sizing: border-box; margin: 0; padding: 0;}.wrapper { display: flex; height: 100vh; width: 600px; height: 400px; margin: 10px auto;}.left,.right { flex: 1 1 auto; border: 1px solid dimgray; max-width: 50%;}.left { display: flex; justify-content: center; align-items: center;}.left > img { width: 100%; height: auto; pointer-events: none;}.right { position: relative; overflow: hidden;}.inner { position: absolute; width: 400%; height: 400%; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center;}.inner > img { width: 100%; height: auto;}Also, though you'd have to add some pieces to get it to work with a Timer, Lightbox is a useful library for enlarging pictures. There is anexample here.

Hi there, hope your Masters project went well! For Option 1, I was able to adapt similar code from a codepen by Ivan Markovic and get it to work within Qualtrics.To give it a try, first create a question in the survey Builder. Using the Rich Content Editor's HTML/Source view "", update the Question Text with the below:Zoom in on the coffee below:Next, add the below to the question's JavaScript in the OnReady section:const inner = document.getElementById("inner");const left = document.querySelector(".left");left.addEventListener("mousemove", handleMousemove, false);function handleMousemove(event) {let { width, height } = this.getBoundingClientRect();let xAxis = Math.round(event.offsetX / width * 100);let yAxis = Math.round(event.offsetY / height * 100);jQuery(inner).css({"transform":"translate(-"+xAxis+"%,-"+yAxis+"%)"});}Finally, add the below CSS to the Style section of the survey's Look & Feel:* {box-sizing: border-box;margin: 0;padding: 0;}.wrapper {display: flex;height: 100vh;width: 600px;height: 400px;margin: 10px auto;}.left,.right {flex: 1 1 auto;border: 1px solid dimgray;max-width: 50%;}.left {display: flex;justify-content: center;align-items: center;}.left > img {width: 100%;height: auto;pointer-events: none;}.right {position: relative;overflow: hidden;}.inner {position: absolute;width: 400%;height: 400%;left: 50%;top: 50%;transform: translate(-50%, -50%);display: flex;justify-content: center;align-items: center;}.inner > img {width: 100%;height: auto;}Also, though you'd have to add some pieces to get it to work with a Timer, Lightbox is a useful library for enlarging pictures. There is an example here.

Options for ability to zoom in on a large detailed image?

Options for ability to zoom in on a large detailed image? | Experience Community

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded