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.