My goal was to have a single page display bulk amounts of media without the need to load new pages. I also wanted it to be able to load fast, so the generator uses a JavaScript array to display one item at a time. The user can move through the array backwards and forwards with the use of two buttons.
Images, video and audio can be added as strings in the following ways:
'<video controls source src="FILE.mp4" type="video/mp4"></video>',
'<img src="FILE.png">',
'<audio controls source src="FILE.mp3" type="audio/mpeg"></audio>',
const array = (
'',
'<p>Text<br>Hello I am text</p>',
'<video controls source src="https://codereview.stackexchange.com/FILE.mp4" type="video/mp4"></video>',
'<img src="FILE.png">',
'<audio controls source src="FILE.mp3" type="audio/mpeg"></audio>',
);
//variables
const arrayLength = array.length;
var For = -1;
function backForth(ev) {
if(ev.target.className == "buttonS") {
const output = document.querySelector('output');
let increment = (ev.target.textContent == "Back" ? -1 : 1);
For = (For + increment + arrayLength) % arrayLength;
output.innerHTML = array(For);
document.getElementById('counter').innerHTML = For + ' / ' + (arrayLength - 1);
}}
document.addEventListener('click', backForth);
backForth({target:{className: "buttonS"}});
<body>
<output></output>
<div>
<button class="buttonS">Back</button>
<b><span id="counter"></span></b>
<button class="buttonS">Forth</button>
</div>
</body>