Forum Discussion

JohnCooper-be3c's avatar
JohnCooper-be3c
Community Member
2 years ago

Loading an image at run time in Storyline

Back in 2013, I wrote an article entitled "Gamification in e-Learning design". Alongside the article I created some demonstrations to illustrate some of the points being made. One of these demos was...
storyline 360
MathNotermans-9's avatar
MathNotermans-9
Community Member
2 years ago

Using an image as WebObject and changing the source of that works fine..and i use that regularly to dynamically change images. Using Cloudinary, AWS or Firestore you can even use it to upload images and make a complete dynamic setup.

When you add images upfront to the external files folder in Storyline you can use this approach.
Semicode below, but i do have it working like this.

function addImage2Stage(_color,_i){
var zInd =  1500;
var currentImage;
var tmpEl;
var indexString;
var bodyRect = document.body.getBoundingClientRect();
var elemRect;
var offsetTop;
var offsetLeft;
var urlArray = [
'story_content/external_files/avatar1.png',
'story_content/external_files/avatar2.png',
'story_content/external_files/avatar3.png'
];
 
 
//for(var i = 0; i < imagesArray.length;i++){
zInd++;
currentImage = shapesCollection[_i];
console.log("showArrayIndex2: "+_i);
tmpEl = document.getElementById(currentImage.id);
var image = new Image();
image.src = urlArray[_i];
var $newdiv1 = $( "<div id='ispr' class='indexImageArr' style='background: "+_color+";width: 60px;height: 60px;border-radius: 50%;z-index:1500;position:absolute;font-family:Arial, sans-serif;text-align:center;padding:5px;font-size:20px;color:#FFFFFF;font-weight:normal;left:0;top:0;visibility: inherit'>"+(_i+1)+"</div>" );
    elemRect = tmpEl.getBoundingClientRect(),
  offsetTop   = elemRect.top - bodyRect.top;
offsetLeft  = elemRect.left - bodyRect.left;
$('body').append($newdiv1);
$newdiv1.append(image);
$newdiv1.css('top', offsetTop);
$newdiv1.css('left',offsetLeft);
}