Can anybody shine a bit of light on my darkest hour
I’m remaking my web site in Hype and want to add an image gallery. I know how to achieve what I want using scenes and timelines, but I set myself the task of achieving it with JavaScript.
I want to take an existing image in the gallery scene and replace it with another image simply by clicking a button to go backwards or forwards through an amount of images in the resource folder.
I couldn’t believe my luck when I found an article, which describes exactly what I want to do.
This is the link to the article I found by a chap called Martin Webb:
http://www.irt.org/articles/js132/#2
I chose the latter option.
However, being a novice to JavaScript I am clearly missing something vital as I can’t get it to work in Hype. (In the article above there is a demonstration at the end clearly showing that it does work).
I’ve given the image in the scene a unique id of “myimage” as per the script.
Apart from changing new Object to new Array, I’m at a loss as to what I have done wrong.
If anyone could point me in the right direction I would be extremely grateful.
I will upload the Hype file and script – just in case.
ImageGalleryWithJS.zip (2.1 MB)
This is the script I’ve added my script to the Resources Folder:
${resourcesFolderName}
which_image_loaded = 0;
NUMBER_OF_IMAGES = 20;
ImageNames = new Array();
ImageNames.length = NUMBER_OF_IMAGES - 1;
for (counter = 0; counter < NUMBER_OF_IMAGES; counter++){
file_number = counter + 1;
filename = ("image" + file_number + ".jpg");
ImageNames[counter] = filename;
}
function changeImage(direction) {
which_image_loaded += direction;
if (which_image_loaded < 0)
which_image_loaded = NUMBER_OF_IMAGES - 1;
if (which_image_loaded == NUMBER_OF_IMAGES)
which_image_loaded = 0;
if (document.images)
document.myimage).src = ImageNames[which_image_loaded];
}
And I’ve set the relevant functions associated with the corresponding arrows used as buttons
On Mouse Click (Tap)
Run JavaScript
Function NextImage
changeImage(1);
On Mouse Click (Tap)
Run JavaScript
Function PreviousImage
changeImage(-1);