We Keep Coding

Display previous images stored in an array

I have a gallery that will open a modal when you click on an image or video. I am now trying to implement a previous and next button. I've been unable to get it working completely, I can only get it to display ONLY the previous image/video that the user initially clicked. I cannot get it to continually display the previous or after images/videos.
I feel like some sort of loop could do the trick, but I personally couldn't figure out the condition of a loop in order for it to loop properly.
Here is a https://jsfiddle.net/Boros/r9nsyw0m/
If you click on any image or video itself(not the play button), then click the previous arrow, you will see it displays the correct previous image/video. However, if you try to press the previous button again, nothing happens. Another issue is the next button doesn't even work. I have no idea why since it should be the exact same code as the previous button except it just adds one to the index instead of subtracting one like the previous button code. You may need to refresh after closing the modal after you clicked the previous button since it will display the incorrect image/video if you re-open the modal.
Line 50: Previous button
$("#previous").addEventListener("click", evt => {
slides[g].style.display = "none";
slides[g - 1].style.display = "initial";
});
Line 55: Next button
$("#next").addEventListener("click", evt => {
slides[g].style.display = "none";
slides[g + 1].style.display = "initial";
});
I've been learning JS for a couple months now so the code might be all over the place but I am happy I was able to get this far on this project.

I had a little look at the newer version of the code and whilst it is better it still has issues - the main being that the navigation still does not work. There appears to be a lot of repetition within the various parts of the code and I ended up approaching from a different direction to achieve what I hope was the stated goal. I may not have implemented all the things I see in the original - such as removing the tabindex attributes or other such. I also could not understand why there is duplication of the images/videos on the page other than to provide content for the modal - so these items were removed explicitly from the modal so that they can be copied/cloned later when actually needed.
(function(){
'use strict';
let index;
const d=document;
const q=(e,n=d)=>n.querySelector(e);
const qa=(e,n=d)=>n.querySelectorAll(e);
const col=qa('#gallery img,#gallery video');
const _length=col.length-1;
const modal=q('#my_modal');
const receiver=q('.receiver',modal);
const setdisplay=(n,s)=>n.style.display=s;
const setoverflow=(n,s)=>n.style.overflow=s;
const setindex=(i)=>qa('[data-type="nav"]').forEach(n=>n.dataset.index=i);
const pausevideos=()=>qa('video').forEach(n=>n.pause());
const clearstyle=(c)=>qa('[data-type="nav"]').forEach(n=>n.classList.remove(c));
const warn=(e,a,b,c)=>{
clearstyle(c);
if( a==b )e.target.classList.add(c)
};
const setinitialstate=(i,c)=>{
clearstyle(c);
if( i==0 )q('[data-task="prev"]').classList.add(c)
if( i==_length )q('[data-task="next"]').classList.add(c)
}
const _CN='red';
/*
Define all the event handlers for
the modal buttons etc
*/
const closeclickhandler=(e)=>{
receiver.innerHTML='';
pausevideos();
setdisplay(modal,'none');
setoverflow(d.body,'initial');
return true;
};
/*
The prev/next handlers could be a single function
that processes the dataset to fork the logic within.
Find the index from the button and use that to determine
and display the next/prev item. The `setcontent` function
takes the item and clones it so it can be displayed.
*/
const previousclickhandler=(e)=>{
index=e.target.dataset.index;
if( index > 0 ){
index--;
warn(e,index,0,_CN);
setindex(index);
setcontent(col[index]);
}
return true;
};
const nextclickhandler=(e)=>{
index=e.target.dataset.index;
if( index < _length){
index++;
warn(e,index,_length,_CN);
setindex(index);
setcontent(col[index])
}
return true;
};
const bttnclickhandler=(e)=>{
/*
This is a `delegated` event handler
bound to the modal but operating
only on elements with a data-task
attribute.
*/
switch( e.target.dataset.task ){
case 'close': return closeclickhandler(e);
case 'prev': return previousclickhandler(e);
case 'next': return nextclickhandler(e);
}
};
/*
assign initial slide to the modal and
then set the index to the navigation
buttons.
*/
const slideclickhandler=(e)=>{
setcontent(e.target);
setindex(e.target.dataset.index);
setinitialstate(e.target.dataset.index,_CN);
};
const keyuphandler=(e)=>{
/* close modal if the user presses the ESC/Enter key */
if( e.keyCode == 27 || e.keyCode == 13 )closeclickhandler.call(this,e);
};
const setcontent=(item)=>{
let clone=item.cloneNode(true);
let div=d.createElement('div');
div.className=clone instanceof HTMLImageElement ? 'img_slides' : 'video_slides';
div.append( clone );
if( clone instanceof HTMLVideoElement ){
div.append( item.nextElementSibling.cloneNode( true ) );
clone.controls=true;
clone.muted=true;
}
receiver.innerHTML='';
receiver.appendChild( div );
setdisplay(div,'initial');
setdisplay(modal,'initial');
};
/*
Assign all the listeners
*/
col.forEach((n,i)=>{
n.dataset.index=i; // !!important!!
n.setAttribute( 'alt', n.src.split('/').pop() );
n.addEventListener('click',slideclickhandler);
});
modal.addEventListener('click',bttnclickhandler);
d.addEventListener('keyup',keyuphandler);
})();
* { box-sizing: border-box; }
html {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: white;
font-size: 16px;
background-color: black;
}
#gallery {
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#gallery img, video {
width: 100%;
max-width: 360px;
height: 480px;
object-fit: cover;
cursor: pointer;
image-rendering: -webkit-optimize-contrast;
}
.video_container {
position: relative;
display: inline-block;
width: 100%;
max-width: 360px;
height: 480px;
margin: 0;
padding: 0;
cursor: pointer;
}
/* Prevents video from moving when hovered on chrome */
.video_container video {
filter: brightness(1);
}
.fa-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
cursor: pointer;
font-size: 2rem;
color: white;
}
#gallery img:hover, .video_container:hover {
transition: opacity 0.3s;
opacity: 0.8;
}
.fa-play:hover {
transition: color 0.5s;
color: #181818;
}
#keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
#my_modal {
animation-name: fadeIn;
animation-duration: 0.5s;
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
overflow: auto;
margin: 0;
padding: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
.img_slides,
.video_slides {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.img_slides img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
}
.video_slides video{
height: auto;
max-height: 100%;
width: auto;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
}
#close_button,
[data-task='close']{
cursor: pointer;
text-align: center;
font-size: 4rem;
width: 4rem;
position: absolute;
right: 0;
border-radius: 16px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#previous,
[data-task='prev']{
cursor: pointer;
text-align: center;
font-size: 3rem;
width: 4rem;
position: absolute;
left: 0;
bottom: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#next,
[data-task='next']{
cursor: pointer;
text-align: center;
font-size: 3rem;
width: 4rem;
position: absolute;
right: 0;
bottom: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#close_button:hover,
[data-task='close']:hover{
transition: opacity 0.1s;
opacity: 0.5;
}
#previous:hover,
[data-task='prev']:hover{
transition: opacity 0.1s;
opacity: 0.5;
}
#next:hover,
[data-task='next']:hover{
transition: opacity 0.1s;
opacity: 0.5;
}
/* new */
.receiver{
display:flex;
flex-direction:column;
align-content:center;
align-items:center;
justify-content:center;
}
.receiver img,
.receiver video{
margin:auto
}
.red{
color:red;
}
[data-char]:after{
content:attr(data-char)
}
<div id='gallery'>
<img src='//i.imgur.com/gyVTo26.jpg' alt='' tabindex='1' />
<img src='//i.imgur.com/bEo04qh.jpg' alt='' tabindex='1' />
<img src='//i.imgur.com/iRENtzp.jpg' alt='' tabindex='1' />
<img src='//i.imgur.com/ElkQu54.jpg' alt='' tabindex='1' />
<img src='//i.imgur.com/Aj25iuv.jpg' alt='' tabindex='1' />
<div class='video_container'>
<video src='//i.imgur.com/kKGF9Az.mp4' tabindex='1' muted></video>
<i class='fas fa-play'></i>
</div>
<div class='video_container'>
<video src='//i.imgur.com/p7ohLnA.mp4' tabindex='1' muted></video>
<i class='fas fa-play'></i>
</div>
<img src='//i.imgur.com/PxWajo9.jpg' alt='' tabindex='1' />
<img src='//i.imgur.com/CAh7F8p.jpg' alt='' tabindex='1' />
</div>
<div id='my_modal'>
<div class='receiver'></div>
<span data-task='close' data-char='×' tabindex='0'></span>
<span data-task='prev' data-char='<' data-type='nav' tabindex='0'></span>
<span data-task='next' data-char='>' data-type='nav' tabindex='0'></span>
</div>
Update
Following from your comments regarding beginner status and still learning I worked a similar solution to that I proposed before but without the cloneNode approach and without modifying your HTML structure at all (apart from removing the scheme from image/video urls )
"use strict";
let index;
const d=document;
const body=d.body;
const q=(e,n=d)=>n.querySelector(e);
const qa=(e,n=d)=>n.querySelectorAll(e);
let modal=q('#my_modal');
let gallery=q('#gallery');
let bttns=qa('span',modal);
let videos=qa('video');
let collection=qa('[tabindex="1"]',gallery);
let items=qa('div[ class$="_slides" ]',modal);
let _length=items.length - 1;
const setdisplay=(nodes,style)=>{
if( nodes instanceof Array || nodes instanceof NodeList )nodes.forEach(n=>n.style.display=style);
else if( nodes instanceof HTMLElement )nodes.style.display=style;
};
const setoverflow=(n,value)=>n.style.overflow=value;
const setattribs=(col,attr,value)=>col.forEach(n=>n.setAttribute(attr,value));
const pausevideos=(col)=>col.forEach(n=>n.pause());
const removetabs=(col)=>col.forEach(n=>n.removeAttribute('tabindex'));
const setindices=(col,i)=>col.forEach(n=>n.dataset.index=i);
const closeModal = e => {
if ( e.target == q('#close_button') || e.keyCode==27 || e.keyCode==13 ) {
setoverflow(body,'initial')
setdisplay(modal,'none');
setdisplay(items,'none');
setattribs(collection,'tabindex',1);
pausevideos(videos);
}
};
const bttnclickhandler=(e)=>{
switch(e.target.id){
case 'previous':
if( index > 0 )index--;
break;
case 'next':
if( index < _length )index++;
break;
}
setindices(bttns,index);
setdisplay(items,'none');
setdisplay(items[index],'initial');
return true;
}
// set the dataset attribute on all items within modal & gallery
qa('#gallery > *').forEach((n,i)=>n.dataset.index=i);
qa('#my_modal > *').forEach((n,i)=>n.dataset.index=i);
// assign event listener to each item in the gallery which displays
// that item & sets the global index.
qa('img,div',gallery).forEach( n=>n.addEventListener('click',function(e){
// Find which index the clicked item has and set the global index variable
index=Number( this.dataset.index );
// Find the respective item from the modal collection of nodes
let item=items[index];
// set properties
setdisplay(modal,'initial');
setdisplay(item,'initial');
setindices(bttns,index);
removetabs(collection);
}));
bttns.forEach(bttn=>bttn.addEventListener('click',e=>{
switch( e.target.id ){
case 'close_button':return closeModal(e);
default: return bttnclickhandler(e);
}
}));
d.addEventListener( 'keyup', closeModal );
* { box-sizing: border-box; }
html {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: white;
font-size: 16px;
background-color: black;
}
#gallery {
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#gallery img, video {
width: 100%;
max-width: 360px;
height: 480px;
object-fit: cover;
cursor: pointer;
image-rendering: -webkit-optimize-contrast;
}
.video_container {
position: relative;
display: inline-block;
width: 100%;
max-width: 360px;
height: 480px;
margin: 0;
padding: 0;
cursor: pointer;
}
/* Prevents video from moving when hovered on chrome */
.video_container video {
filter: brightness(1);
}
.fa-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
cursor: pointer;
font-size: 2rem;
color: white;
}
#gallery img:hover, .video_container:hover {
transition: opacity 0.3s;
opacity: 0.8;
}
.fa-play:hover {
transition: color 0.5s;
color: #181818;
}
#keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
#my_modal {
animation-name: fadeIn;
animation-duration: 0.5s;
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
overflow: auto;
margin: 0;
padding: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
.img_slides, .video_slides {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.img_slides img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
}
.video_slides video{
height: auto;
max-height: 100%;
width: auto;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
}
#close_button {
cursor: pointer;
text-align: center;
font-size: 4rem;
width: 4rem;
position: absolute;
right: 0;
border-radius: 16px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#previous {
cursor: pointer;
text-align: center;
font-size: 3rem;
width: 4rem;
position: absolute;
left: 0;
bottom: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#next {
cursor: pointer;
text-align: center;
font-size: 3rem;
width: 4rem;
position: absolute;
right: 0;
bottom: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#close_button:hover {
transition: opacity 0.1s;
opacity: 0.5;
}
#previous:hover {
transition: opacity 0.1s;
opacity: 0.5;
}
#next:hover {
transition: opacity 0.1s;
opacity: 0.5;
}
<div id="gallery">
<img src="//i.imgur.com/gyVTo26.jpg" alt="" tabindex="1">
<img src="//i.imgur.com/bEo04qh.jpg" alt="" tabindex="1">
<img src="//i.imgur.com/iRENtzp.jpg" alt="" tabindex="1">
<img src="//i.imgur.com/ElkQu54.jpg" alt="" tabindex="1">
<img src="//i.imgur.com/Aj25iuv.jpg" alt="" tabindex="1">
<div class="video_container">
<video src="//i.imgur.com/kKGF9Az.mp4" tabindex="1" muted></video>
<i class="fas fa-play"></i>
</div>
<div class="video_container">
<video src="//i.imgur.com/p7ohLnA.mp4" tabindex="1" muted></video>
<i class="fas fa-play"></i>
</div>
<img src="//i.imgur.com/PxWajo9.jpg" alt="" tabindex="1">
<img src="//i.imgur.com/CAh7F8p.jpg" alt="" tabindex="1">
</div>
<div id="my_modal">
<div class="img_slides">
<img src="//i.imgur.com/gyVTo26.jpg" alt="">
</div>
<div class="img_slides">
<img src="//i.imgur.com/bEo04qh.jpg" alt="">
</div>
<div class="img_slides">
<img src="//i.imgur.com/iRENtzp.jpg" alt="">
</div>
<div class="img_slides">
<img src="//i.imgur.com/ElkQu54.jpg" alt="">
</div>
<div class="img_slides">
<img src="//i.imgur.com/Aj25iuv.jpg" alt="">
</div>
<div class="video_slides">
<video src="//i.imgur.com/kKGF9Az.mp4" controls muted></video>
</div>
<div class="video_slides">
<video src="//i.imgur.com/p7ohLnA.mp4" controls muted></video>
</div>
<div class="img_slides">
<img src="//i.imgur.com/PxWajo9.jpg" alt="">
</div>
<div class="img_slides">
<img src="//i.imgur.com/CAh7F8p.jpg" alt="">
</div>
<span id="close_button" tabindex="0">×</span>
<span id="previous" tabindex="0"><</span>
<span id="next" tabindex="0">></span>
</div>
The idea remains the same in principal. Items within the gallery and items within the modal are assigned a data-index attribute when the page loads ( this could be done another way but this is, imo, easier & less cluttered )
The global index variable is changed according to whether the previous or next buttons is clicked and that new index value is used to select the item within the modal with that same data-index value. The buttons data-index attribute is changed to that new index value so that the next time a button is clicked the process can repeat. If the index is approaching the limits ( 0 or _length ) then the index remains unchanged so no error occurs trying to select an invalid index. Alternatively at that point the index could be reset to the opposite value perhaps so the process becomes cyclic - not tested though. Plus 1?

Why isn't this scrollLeft JS function working on my local wordpress site?

It works fine in codepen, I'm not getting any errors in console, and other JS is working on the same page. I'm adding it using the header footer code manager plug in.
The mouseover function is working, and in codepen, with this scrollLeft function, I'm able to scroll through my gallery by clicking the button. But in my locally hosted wordpress site, clicking the button does nothing. I included the jQuery.noConflict bit after reading similar questions and seeing that that worked for other people, but it hasn't worked for me. Here's the code:
const videos = document.querySelectorAll(".polystar");
for (const video of videos) {
video.addEventListener('mouseover', function() {
video.play()
}, false);
video.addEventListener('mouseout', function() {
video.pause()
}, false);
}
jQuery.noConflict();
(function($) {
$(function() {
var button = document.getElementById("slide");
button.onclick = function() {
document.getElementById("container").scrollLeft += 310;
};
var back = document.getElementById("slideBack");
back.onclick = function() {
document.getElementById("container").scrollLeft -= 310;
};
});
})(jQuery);
div {
position: relative;
width: 300px;
display: inline-block;
margin: 0px;
}
#container {
display: flex;
overflow-x: auto;
width: 900px;
height: 160px;
background-color: black;
}
video {
width: 300px;
height: auto;
}
img {
width: 100%;
width: 300px;
height: auto;
object-fit: cover;
position: absolute;
inset: 0;
z-index: 1;
}
.first:hover img {
display: none;
}
.second:hover img {
display: none;
}
.third:hover img {
display: none;
}
.fourth:hover img {
display: none;
}
.fifth:hover img {
display: none;
}
.sixth:hover img {
display: none;
}
.overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translatex(-50%) translatey(-50%);
font-size: 1em;
color: white;
z-index: 2;
text-align: center;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1.5px 1px #000;
font-family: arial;
}
.first:hover .overlay-text {
display: none;
}
.second:hover .overlay-text {
display: none;
}
.third:hover .overlay-text {
display: none;
}
.fourth:hover .overlay-text {
display: none;
}
.fifth:hover .overlay-text {
display: none;
}
.sixth:hover .overlay-text {
display: none;
}
#slideBack {
position: absolute;
display: inline-block;
height: 20px;
left: 0;
right: 0;
top: 30%;
bottom: 0;
z-index: 3;
margin: 0;
}
#slide {
position: absolute;
display: inline-block;
height: 20px;
left: 60%;
right: 0;
top: 30%;
bottom: 0;
z-index: 3;
margin: 0;
}
.first:hover,
.second:hover,
.third:hover,
.fourth:hover,
.fifth:hover,
.sixth:hover {
animation: fadeIn .4s;
-webkit-animation: fadeIn .4s;
-moz-animation: fadeIn .4s;
-o-animation: fadeIn .4s;
-ms-animation: fadeIn .4s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
.overlayzinho {
background-color: black;
width: 300px;
height: 190px;
z-index: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="first">
<video muted="" loop="" class="polystar">
<source src="http://jackmullinkosson.local/wp-content/uploads/2021/09/ChWorker.mp4" type="video/mp4">
</video>
<img src="http://jackmullinkosson.local/wp-content/uploads/2021/08/MosEgo.jpg">
<div class="overlay-text">"Group"</div>
</div>
<div class="second">
<video muted="" loop="" class="polystar">
<source src="https://player.vimeo.com/external/432406907.hd.mp4?s=f35b5f202d573efa75d9293d213fc3be0927fd85&profile_id=172&oauth2_token_id=57447761" type="video/mp4">
</video>
<img src="http://jackmullinkosson.local/wp-content/uploads/2021/09/best-e1631205169449.png">
<div class="overlay-text">"That's a Lie"</div>
</div>
<div class="third">
<video muted="" loop="" class="polystar">
<source src="http://jackmullinkosson.local/wp-content/uploads/2021/09/ChWorker.mp4" type="video/mp4">
</video>
<img src="http://jackmullinkosson.local/wp-content/uploads/2021/08/birds-thumbnail.png">
<div class="overlay-text">"Birds"</div>
</div>
<div class="fourth">
<video muted="" loop="" class="polystar">
<source src="http://jackmullinkosson.local/wp-content/uploads/2021/09/ChWorker.mp4" type="video/mp4">
</video>
<img src="http://jackmullinkosson.local/wp-content/uploads/2021/08/Escalator.png">
<div class="overlay-text">"Chinese Worker"</div>
</div>
<div class="fifth">
<video muted="" loop="" class="polystar">
<source src="https://player.vimeo.com/external/432406907.hd.mp4?s=f35b5f202d573efa75d9293d213fc3be0927fd85&profile_id=172&oauth2_token_id=57447761" type="video/mp4">
</video>
<img src="http://jackmullinkosson.local/wp-content/uploads/2021/09/STILL-10-e1631205191960.png">
<div class="overlay-text">"Divided"</div>
</div>
<div class="sixth">
<video muted="" loop="" class="polystar">
<source src="https://player.vimeo.com/external/432406907.hd.mp4?s=f35b5f202d573efa75d9293d213fc3be0927fd85&profile_id=172&oauth2_token_id=57447761" type="video/mp4">
</video>
<img src="http://jackmullinkosson.local/wp-content/uploads/2021/09/ForTheSetEdit5-e1631205229115.png">
<div class="overlay-text">"For the Set"</div>
</div>
</div>
<button id="slideBack" type="button">Prev</button>
<button id="slide" type="button">Next</button>

In case anyone finds this question, the problem was that I didn't change the container id when I put it on my website, so the javascript that wasn't working was probably referring to a preexisting container already built into my wordpress theme. When I changed the id of the container to something unique, the scroll button began to work.

Popup cannot close once opened multiple times

I have a simple popup that plays a movie and have a cross to close the popup and movie.
This works fine once, however if reopened, you cannot close the popup again. We could have multiple videos on here, for some reason the cross button t close is working first, but not if the popup is reopened.
Anyone have any suggestions? It seems as though the cross function is only working once.
$('.video-popup').click(function(e) {
$('.overlay').fadeIn();
$(this).parent('.video-img').find('.video-container, .close-video').fadeIn();
e.stopPropagation();
});
$('.close-video').click(function(f) {
vimeoWrap = $('.video-container');
vimeoWrap.html(vimeoWrap.html());
$('.overlay, .video-container, .close-video').fadeOut();
f.stopPropagation();
});
.video-container {
position: fixed;
z-index: 99;
max-width: 800px;
left: 50%;
top: 50%;
height: 500px;
display: none;
width: 100%;
padding: 0 15px;
}
.overlay {
position: fixed;
height: 100%;
width: 100%;
background: rgba(0, 14, 60, 0.8);
z-index: 9;
display: none;
top: 0;
left: 0;
right: 0;
}
.close-video {
position: absolute;
z-index: 99;
top: -50px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pdf-video-block">
<div class="video-img">
<img src="https://d1e4pidl3fu268.cloudfront.net/66963e4a-ccba-4fdd-ba18-d5862fb4dba7/test.png" class="video-popup">
<div class="video-container">
<div class="close-video">X</div>
<iframe src="https://player.vimeo.com/video/8733915" width="100%" height="500" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
</div>
Thanks

You need to change your close function like:
$('body').on('click', '.close-video', function(f) {
//instead of
//$('.close-video').click(function(f) {
Because after you change parent element (like below) you can't access this element anymore.
vimeoWrap = $('.video-container');
vimeoWrap.html(vimeoWrap.html());

It works like this for me:
$('.video-popup').click(function(e) {
$('.overlay').fadeIn();
$('.video-container, .close-video').fadeIn();
e.stopPropagation();
e.stopPropagation();
});
$('.close-video').click(function(f) {
//vimeoWrap = $('.video-container');
//vimeoWrap.html(vimeoWrap.html());
$('.overlay, .video-container, .close-video').fadeOut();
f.stopPropagation();
});
.video-popup {
width: 100px;
height: 100px;
}
.video-container {
position: fixed;
z-index: 99;
max-width: 800px;
left: 50%;
top: 50%;
margin-top: 0;
margin-left: 0;
height: 500px;
display: none;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: 100%;
padding: 0 15px;
}
.overlay {
position: fixed;
height: 100%;
width: 100%;
background: rgba(0, 14, 60, 0.8);
z-index: 9;
display: none;
top: 0;
left: 0;
right: 0;
}
.close-video {
position: absolute;
z-index: 99;
top: 100px;
left: 20px;
display: none;
cursor: pointer;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://d1e4pidl3fu268.cloudfront.net/66963e4a-ccba-4fdd-ba18-d5862fb4dba7/test.png" class="video-popup">
<div class="overlay"></div>
<div class="video-container">
<div class="close-video" style="display: block;">X</div>
<iframe src="https://player.vimeo.com/video/317230912" width="100%" height="500" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

Your current click-listener becomes obsolete by vimeoWrap.html(vimeoWrap.html());.
Just put the listener on the parent and it will work even when you reset the html (just changed the first line):
$('.video-container').on("click",".close-video", function(f) {
...
});

Text is briefly hidden behind video

I am using fullpage.js to create full screen pages.
If you scroll to the next section(s) and scroll back to the first section (with video background and the overlay text), the text is briefly "hidden" behind the video before showing up again.
This problem only happens on my Chrome(Version 49.0.2623.112) so far.
HTML:
<div id="fullpage">
<div class="section">
<div class="text">1233123123</div>
<div class="video-background">
<video autoplay muted loop>
<source data-src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/>
</video>
</div>
</div>
<div class="section">
<div class="slide" data-anchor="slide1">
<img src="" data-src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/examples/imgs/iphone-blue.png" />
</div>
<div class="slide" data-anchor="slide2">Two 2</div>
</div>
<div class="section">
<img src="" data-src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/examples/imgs/intro.png" />
</div>
<div class="section">Four</div>
</div>
CSS:
.section {
text-align:center;
font-size: 3em;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.text {
font-size: 123px;
z-index: 2;
position: absolute;
margin: 0 auto;
background-color: red;
}
div.video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
overflow: hidden;
z-index: 1;
}
div.video-background video {
min-width: 100%;
min-height:100%;
}
Javascript:
$('#fullpage').fullpage({
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
});
Demo:
http://codepen.io/anon/pen/jqxqqj

Use translate3d(0,0,0) for the text:
.text {
font-size: 123px;
z-index: 2;
position: absolute;
margin: 0 auto;
background-color: red;
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

CSS/HTML: Unable to hide element in Safari

I am trying to implement a modal overlay on a webpage.
The intention is for the overlay to be hidden until the user clicks a particular . This works fine in Chrome and FF. However, in Safari whilst the overlay is hidden, the #feature within it is visible at all times.
Why is this? Dropping visibility:hidden explicitly into #feature does nothing.
Any help would be appreciated!
I have this:
<div id="overlay">
<div id="overlay-background" onclick="overlay()"></div>
<div id="feature-wrapper">
<iframe id="feature" src="https://player.vimeo.com/video/74891452?color=ffffff&title=0&byline=0&portrait=0" width="750" height="422" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div id="description"></div>
<div id="close" onclick="overlay()"><p>close</p></a>
</div>
</div>
<script>
function overlay() {
document.body.style.overflow = (document.body.style.overflow == "hidden") ? "auto" : "hidden";
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
With:
#overlay {
visibility: hidden;
}
#overlay-background {
width: 100%;
height: 100%;
z-index: 100;
top: 0px;
position: fixed;
background-color: #000;
opacity: 0.9;
}
#feature-wrapper {
opacity: 1.0;
z-index: 100;
position: fixed;
top: 10%;
width: 100%;
height: 200%;
left: 50%;
-ms-transform: translate(-50%,0); /* IE 9 */
-webkit-transform: translate(-50%,0); /* Safari */
transform: translate(-50%,0);
text-align: center;
}
#feature {
z-index: 999;
max-width: 90vw;
max-height: 50vh;
border-style: solid;
border-color: #fff;
border-width: 20px;
margin: 2em auto;
visibility: hidden;
}

Try display: none; or opacity: 0;