Custom slider image size | XM Community
Skip to main content
Michael_Cooksey
Administrator
25 days ago
Solved

Custom slider image size

  • January 30, 2025
  • 2 replies
  • 16 views
W
Forum|alt.badge.img+1

I‘ve been able to create a custom slider image using the javascript below, but it only renders in the same size as the original qualtrics slider image. Is there a way to customise the image size that is displayed when the survey runs?

Or is there another way to make a full sized image change when a user moves a slider underneath it?

Thanks in anticipation

 

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

});

Qualtrics.SurveyEngine.addOnReady(function()
{
    var imgs = jQuery("#"+this.questionId+" div.SSImage > div.SSImage");
imgs[0].style.background = "url(https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_3DqVvahlCICMbY3) no-repeat";


    var imgs = jQuery("#"+this.questionId+" div.SSImage > div.SSImage");
imgs[1].style.background = "url(https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_VITYBA7atozuYkv) no-repeat";

    
    var imgs = jQuery("#"+this.questionId+" div.SSImage > div.SSImage");
imgs[2].style.background = "url(https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_EB2X8G3NzzwgRlt) no-repeat";
    
    
    var imgs = jQuery("#"+this.questionId+" div.SSImage > div.SSImage");
imgs[3].style.background = "url(https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_93ZgLvd1W27StSX) no-repeat";
    
    
    var imgs = jQuery("#"+this.questionId+" div.SSImage > div.SSImage");
imgs[4].style.background = "url(https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_GeNz5jWmcaRdn0e) no-repeat";
    
    
    var imgs = jQuery("#"+this.questionId+" div.SSImage > div.SSImage");
imgs[5].style.background = "url(https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_CqYg0vd9dgLcwFr) no-repeat";
    
    var imgs = jQuery("#"+this.questionId+" div.SSImage > div.SSImage");
imgs[6].style.background = "url(https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1fnT4sktxcaSyQs) no-repeat";
    
        var imgs = jQuery("#"+this.questionId+" div.SSImage > div.SSImage");
imgs[6].style.background = "url(https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1fnT4sktxcaSyQs) no-repeat";
    
        var imgs = jQuery("#"+this.questionId+" div.SSImage > div.SSImage");
imgs[7].style.background = "url(https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1fnT4sktxcaSyQs) no-repeat";
    
        var imgs = jQuery("#"+this.questionId+" div.SSImage > div.SSImage");
imgs[8].style.background = "url(https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1fnT4sktxcaSyQs) no-repeat";
    
        var imgs = jQuery("#"+this.questionId+" div.SSImage > div.SSImage");
imgs[9].style.background = "url(https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1fnT4sktxcaSyQs) no-repeat";
    
        var imgs = jQuery("#"+this.questionId+" div.SSImage > div.SSImage");
imgs[10].style.background = "url(https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1fnT4sktxcaSyQs) no-repeat";
    
});


Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/

});

Best answer by TomG

You can change the size of the image containers with CSS. Here is a more efficient way:

Qualtrics.SurveyEngine.addOnReady(function() {
  var newImages = [
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_3DqVvahlCICMbY3",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_VITYBA7atozuYkv",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_EB2X8G3NzzwgRlt",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_93ZgLvd1W27StSX",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_GeNz5jWmcaRdn0e",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_CqYg0vd9dgLcwFr",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1fnT4sktxcaSyQs",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1fnT4sktxcaSyQs",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1fnT4sktxcaSyQs",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1fnT4sktxcaSyQs",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1fnT4sktxcaSyQs",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1fnT4sktxcaSyQs" 
  ];
  var imgs = jQuery("#"+this.questionId div.SSImage > div.SSImage');  
  imgs.css({"width":"280px","height":"155px"}).each(function(i) {
    this.style.background = "url("+newImages[i]+") no-repeat";
  });
});

Change width and height as needed.

View original

2 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5929 replies
  • Answer
  • January 30, 2025

You can change the size of the image containers with CSS. Here is a more efficient way:

Qualtrics.SurveyEngine.addOnReady(function() {
  var newImages = [
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_3DqVvahlCICMbY3",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_VITYBA7atozuYkv",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_EB2X8G3NzzwgRlt",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_93ZgLvd1W27StSX",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_GeNz5jWmcaRdn0e",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_CqYg0vd9dgLcwFr",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1fnT4sktxcaSyQs",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1fnT4sktxcaSyQs",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1fnT4sktxcaSyQs",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1fnT4sktxcaSyQs",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1fnT4sktxcaSyQs",
    "https://aruspsych.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1fnT4sktxcaSyQs" 
  ];
  var imgs = jQuery("#"+this.questionId div.SSImage > div.SSImage');  
  imgs.css({"width":"280px","height":"155px"}).each(function(i) {
    this.style.background = "url("+newImages[i]+") no-repeat";
  });
});

Change width and height as needed.

W
1 person likes this
  • W
    wcubbin
W
Forum|alt.badge.img+1
  • wcubbin
  • Author
  • 2 replies
  • January 30, 2025

Thankyou ​@TomG That has solved my problem perfectly. Thanks for taking the time to help - much appreciated :-)

TomG
1 person likes this
  • TomG
    TomG

Leave a Reply


Terms & Conditions