Javascript won't load scene to scene

Ok, I have this website. On 5 scenes (starting with ‘‘Travail > TP’’ and downward) there is a pictures slideshow that works fine using a very good code that I found on that forum. But for a reason that escape my scheme of competences, the other slideshows on the other 4 scenes won’t load.

I’ve copied the exact same code for the 4 other scenes/slideshows renaming them with the right picture liked but it’s not working. What do I do wrong?

Thank you very mush!

Here’s the website : https://www.dropbox.com/sh/kg9ustvswy6bw7i/AACye7rHs_YK3dbgd3gWJXI0a?dl=0

There are a few things going on.

On your first gallery scene you get the picture frame by ID.
But do not have any ID or other means to get the picture frame on the other scenes.

The same with the arrow buttons. You use an ID for the arrow buttons.
But what about the other buttons on the other scenes.

an ID can only apple to one element. NO other element can use the same ID.

This is why we have class names.

We can give all our arrow buttons the same class names (arrow_right, arrow_left) and picture frames for that matter.

But there are some hoops or I should say some loops we would have to go through the always get the correct ones.

Must of this can be explained better on the www and javascript tutorials.

What I have done here is try to keep it kind of simple

I have removed all your functions and have all scenes on load run a single function

At the top of the function you will see,

var thisScene = hypeDocument.currentSceneName().split(’> ')[1]

This takes the current Scene Name and gets the end word which we can then use as an key name to find the relative objects, i.e the associated image array etc.

We create a global object that can be access throughout all of hypes functions.

hypeDocument.customData

We then use this object to add and declare all you objects that you originally place in vars.

We then declare all your image arrays Adding them to the hypeDocument.customData object using an object key name at the end of the hypeDocument.customData

i.e

hypeDocument.customData.TPimages

We can then later easily access an array for example using hypeDocument.customData.TPimages

We then get the correct picture frame using the

var thisScene = hypeDocument.currentSceneName().split(’> ')[1]

In the scene editor each picture frame has been given it’s own ID.

i.e
picture_frameFC
picture_frameTP

and in the case of scene’s 4e

picture_frame_4e

Note the underscore. We had to do that because the key 4e would not work as it cannot start with a number. This also means the scene name was changed to Travail > _4e

Which after the split() javascript would give use _4e

You will see through out that the hypeDocument.customData object and it’s objects are used to access them.

if (typeof hypeDocument.customData == 'undefined' ){
    	
    	hypeDocument.customData = {}
    	
    	}
    	
    hypeDocument.customData.TPimages = ["TP_1","TP_2","TP_3","TP_4","TP_5","TP_6","TP_7","TP_8","TP_9","TP_10","TP_11","TP_12","TP_13"]; // array of image names in resource folder
    hypeDocument.customData.Encimages = ["Enc_1","Enc_2","Enc_3","Enc_4","Enc_5","Enc_6","Enc_7","Enc_8","Enc_9","Enc_10"]; // array of image names in resource folder
    hypeDocument.customData.FCimages = ["FC_1","FC_2","FC_3","FC_4","FC_5","FC_6","FC_7"]; // array of image names in resource folder
    hypeDocument.customData._4eimages = ["4e_1","4e_2","4e_3","4e_4","4e_5","4e_6","4e_7","4e_8","4e_9","4e_10","4e_11","4e_12","4e_13","4e_14","4e_15","4e_16"];// array of image names in resource folder
    hypeDocument.customData.Budaimages = ["Buda_1","Buda_2","Buda_3","Buda_4","Buda_5","Buda_6","Buda_7","Buda_8","Buda_9","Buda_10","Buda_11","Buda_12","Buda_13","Buda_14","Buda_15","Buda_16","Buda_17"]; 	
    	
    	
    	var picture_frame = document.getElementById("picture_frame" + thisScene);
    	
    	
    hypeDocument.customData.img = document.createElement("IMG");
    	picture_frame.appendChild(hypeDocument.customData.img);

    	hypeDocument.customData.img.width = "725";  // images dimensions
    	hypeDocument.customData.img.height = "625"; //
    	
    	hypeDocument.customData.img.src = "${resourcesFolderName}/"  + thisScene + "_1.jpg"; // the first image to show on load
    	
    	hypeDocument.customData.counter = 0;
    hypeDocument.customData.images = hypeDocument.customData[thisScene + "images"]; // array of image names in resource folder

The arrow keys now all have a corresponding class name for right and left.
The also all call a single function, arrows()

This simply determines the class of arrow that called it and then runs the corresponding code to change the image.
See how we access the hypeDocument.customData object and it’s objects by key name

i.e
hypeDocument.customData.img.src,

hypeDocument.customData.images[hypeDocument.customData.counter]

	 if(element.classList.contains('arrow_right')){
	 	hypeDocument.customData.counter  += 1; // when clicked counter variable increases by 1
		if (hypeDocument.customData.counter >= hypeDocument.customData.images.length) { // checks to see if counter variable is greater than the array of filenames
			hypeDocument.customData.counter = hypeDocument.customData.images.length-1; // if it is greater or equal to it then we set the counter to this value
		} else {
			hypeDocument.customData.img.src = "${resourcesFolderName}/" + hypeDocument.customData.images[hypeDocument.customData.counter] + ".jpg"; // if it isn't greater than it then we show the image corresponding to the array number
		}
	 }
	 
	 
	 
	 if(element.classList.contains('arrow_left')){
	 	hypeDocument.customData.counter -= 1;
		
		if (hypeDocument.customData.counter < 0) { // checks to see if counter variable is less than 0
			hypeDocument.customData.counter = 0; // if it is then set the counter to 0
		} else {
			hypeDocument.customData.img.src = "${resourcesFolderName}/" + hypeDocument.customData.images[hypeDocument.customData.counter] + ".jpg"; // if it isn't then show the corresponding image
		}
	 }

So I can upload the example here I have taken out all your images.
You should just be able to drop them back in your end.

SITE 2019_MHv1.hypetemplate.zip (1.5 MB)


Note, There a so many ways to fix this project and this way (above) is just what I quickly through together. It by no means addresses all the issues I see but should help point you in the right directions. I would suggest you look through some beginners Javascript tutorials to help.

And do not be intimidated by the hypeDocument.customData global object. It is just used here as a holder for your objects instead of only local vars which cannot be accessed from else where outside the parent function.

2 Likes

This is simply amazing, I’ll look up for the Java tutorials for shure! But for now, you helped me quite a lot. I’ll go through the code to understand it better with your explanations. Thank you very much!