New to Twine, please look at this JavaScript

jh79

Update: Ok so this code works, for anyone trying to keep javascript in one passage. Thank you to the Gentleman below for his assistance helping me understand the way passages work.

(function() {

// configuration
var activePassage = "Start"; // title of the passage where slide is active
var intervalLength = 575;    // length of slide interval (in milliseconds)
var images = [              // list of images to slide
"images/person1.png",
"images/person2.png",
"images/person3.png",
"images/person4.png",
"images/person5.png",
"images/person6.png",
"images/person7.png",
"images/person8.png",
"images/person9.png",
"images/person10.png"
];

// core image slide code
var pic = 0;
var intervalId = null;
var imageSlide = function () {
var el = document.getElementById("img");
if (el === null) return; // non-existent element, so bail out

pic = (pic === images.length - 1) ? 0 : pic + 1;
el.src = images[pic];
};

// setup and teardown
postrender["setupImageSlide"] = function () {
if (passage() === activePassage) {
intervalId = setInterval(imageSlide, intervalLength);
}
};
postrender["teardownImageSlide"] = function () {
if (intervalId !== null && passage() !== activePassage) {
clearInterval(intervalId);
intervalId = null;
}
};

}());

TheMadExile

1. You should always specify which story format you're using.

2. The following code will:

• Start the image slide whenever the specified passage is the active passage, and only then.  That does mean the image slide will restart if you go back to the specified passage.
• Stop the image slide whenever the specified passage is not the active passage.
• Attempt to perform the image slide only if it finds the appropriate element.

If that's not what you were looking for, let me know.


(function() {

// configuration
var activePassage = "Start"; // title of the passage where slide is active
var intervalLength = 575; // length of slide interval (in milliseconds)
var images = [ // list of images to slide
"images/person1.png",
"images/person2.png",
"images/person3.png",
"images/person4.png",
"images/person5.png",
"images/person6.png",
"images/person7.png",
"images/person8.png",
"images/person9.png",
"images/person10.png"
];

// core image slide code
var pic = 0;
var intervalId = null;
var imageSlide = function () {
var el = document.getElementById("img");
if (el === null) return; // non-existent element, so bail out

pic = (pic === images.length - 1) ? 0 : pic + 1;
el.src = images[pic];
};

// setup and teardown
postrender["setupImageSlide"] = function () {
if (passage() === activePassage) {
intervalId = setInterval(imageSlide, intervalLength);
}
};
postrender["teardownImageSlide"] = function () {
if (intervalId !== null && passage() !== activePassage) {
clearInterval(intervalId);
intervalId = null;
}
};

}());