How do I show one image on a page, have it disappear and then show another image on the same page? | XM Community
Skip to main content
Michael_Cooksey
Administrator
1 month ago
Solved

How do I show one image on a page, have it disappear and then show another image on the same page?

D
Level 1 ●
Forum|alt.badge.img+2

Short story:
I'd like to be able to present an image for 500 ms, directly followed by another image (on the same page) that is presented for 2 seconds.

Longer story:
I plan to show respondents 50 images each. The keep things manageable I am doing this using the loop & merge function (which pipes in a link to an embedded image), with one image shown at a time. I plan to show each image for exactly 2 seconds, which I can do using the setTimeout function in Javascript.

However, before each image is presented I would like to show respondents the same static image for 500 milliseconds. I'd like to do this all on the same page (i.e., respondents do not auto-advancing to a new page between the first and second image). This is the part I haven't been able to figure out --- how to show one image on a page, have it disappear and then show another image on the same page.

Any suggestions would be much appreciated.

Best answer by JesperAndersen

I have not tested this, but something like this should work:

First create 2 placeholders for the images:

<div id="image-container">
  <img src="image1.jpg" id="image1">
  <img src="image2.jpg" id="image2">
</div>

Then use CSS to hid the second image:

<style>
  #image2 {
    display: none;
  }
</style>

And finally use Javascript to make the change:

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/

setTimeout(function() {
      document.getElementById('image1').style.display = 'none';
      document.getElementById('image2').style.display = 'block';
    }, 500); // Change this value to adjust the duration of each image

});

View original

6 replies

JesperAndersen
QPN Level 4 ●●●●
Forum|alt.badge.img+11
  • JesperAndersen
  • QPN Level 4 ●●●●
  • 93 replies
  • Answer
  • April 30, 2023

I have not tested this, but something like this should work:

First create 2 placeholders for the images:

<div id="image-container">
  <img src="image1.jpg" id="image1">
  <img src="image2.jpg" id="image2">
</div>

Then use CSS to hid the second image:

<style>
  #image2 {
    display: none;
  }
</style>

And finally use Javascript to make the change:

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/

setTimeout(function() {
      document.getElementById('image1').style.display = 'none';
      document.getElementById('image2').style.display = 'block';
    }, 500); // Change this value to adjust the duration of each image

});

qualtrics_nerd
krbhavya
2 people like this
  • qualtrics_nerd
    qualtrics_nerd
  • krbhavya
    krbhavya
qualtrics_nerd
Level 5 ●●●●●
Forum|alt.badge.img+19
  • qualtrics_nerd
  • Level 5 ●●●●●
  • 225 replies
  • April 30, 2023

Hi @davetannenbaum ,

Just to add in @JesperAndersen code , add another interval function set the display none for second image after 2 sec  has elapsed:
 

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/

setTimeout(function() {
  document.getElementById('image1').style.display = 'none';
  document.getElementById('image2').style.display = 'block';

  setTimeout(function() {
    document.getElementById('image2').style.display = 'none';
  }, 2000); // Hide image2 after 2 seconds
}, 500); // Change this value to adjust the duration of each image


});


One more thing , is this for only two images or you will be showing all 50 images at 2 sec intervals??

Hope this resolves your query😊!!
 

krbhavya
1 person likes this
  • krbhavya
    krbhavya
D
Level 1 ●
Forum|alt.badge.img+2

Many thanks @JesperAndersen and @qualtrics_nerd, this is extremely helpful.

To your question @qualtrics_nerd, yes I was hoping to show all 50 images at 2 second intervals (so Image 1 stays the same each time, but Image 2 cycles through all 50 images). Long study, I know.

Is it possible to do this using loop & merge? The code you and Jesper provided works great when both Image 1 and Image 2 are linked directly to an image. But when I try to pipe-in a link to Image 2 (using Loop & Merge) it breaks. Any thoughts?

D
Level 1 ●
Forum|alt.badge.img+2

Just a follow-up, I was able to get it to work using Loop & Merge by removing the <div> tags inside the Loop & Merge (so that way it pipes in the url with nothing else). Many thanks to both of you for all of your help, I really appreciate it!

MikeW
JesperAndersen
qualtrics_nerd
3 people like this
  • MikeW
    MikeW
  • JesperAndersen
    JesperAndersen
  • qualtrics_nerd
    qualtrics_nerd
qualtrics_nerd
Level 5 ●●●●●
Forum|alt.badge.img+19
  • qualtrics_nerd
  • Level 5 ●●●●●
  • 225 replies
  • May 1, 2023
davetannenbaum wrote:

Many thanks @JesperAndersen and @qualtrics_nerd, this is extremely helpful.

To your question @qualtrics_nerd, yes I was hoping to show all 50 images at 2 second intervals (so Image 1 stays the same each time, but Image 2 cycles through all 50 images). Long study, I know.

Is it possible to do this using loop & merge? The code you and Jesper provided works great when both Image 1 and Image 2 are linked directly to an image. But when I try to pipe-in a link to Image 2 (using Loop & Merge) it breaks. Any thoughts?

Hi @davetannenbaum ,

Yes ,I will recommend you to use automated Slideshow where you can set the time interval by which it will loop through all the images. See below example

Slideshow

Hope this resolves your query😊!!

D
Level 1 ●
Forum|alt.badge.img+2

Very cool, many thanks @qualtrics_nerd!

Leave a Reply


Terms & Conditions