Question

I’m customizing an awesome plugin allowing easy declared cue points for an HTML5 Video. (It’s called cuepoint.js)

It came stock with declared variables; and once those variables are triggered / it displays the text in the form of a caption on the screen. Which is fine; BUT I would like to figure out how to call images within the code already written.

I’ve tried squeezing a getElementbyID and the standard HTML img tag, as well as get a #div but it’s not rendering. Any pointers at using this same code and calling images; as opposed to text.

$(document).ready(function(){
//Slides object with a time (integer) and a html string
var slides = {
0: "I would like to display an Image here, though",
2: "This is 2 Seconds.",
3: "This is 3 Seconds.",
6: "This is what 6 Seconds looks like.",
10: "This is 10 Seconds.",
}

Answer 1

If you want HTML to appear as a slide, just add that HTML as a string.

var slides = {
  0: "<img src='http://example.com/image.jpg' />",
  2: "This is 2 Seconds.",
  3: "This is 3 Seconds.",
  6: "This is what 6 Seconds looks like.",
  10: "This is 10 Seconds."
}