I found a Popup Gallery tutorial on YouTube and would like to reverse what is displayed on screen first.
As of now when the user opens the website in their browser they are presented with a photo gallery preview and can click on a picture to view the full image. I want to change this and have the first picture displayed the full image.
I have only tried re-ordering the divs, for I do not know where to begin to accomplish my goal. Can anyone help? Thanks in advance.
const images = [...document.querySelectorAll('.image')];
const popup = document.querySelector('.popup');
const closeBtn = document.querySelector('.close-btn');
const imageName = document.querySelector('.image-name');
const largeImage = document.querySelector('.large-image');
const imageIndex = document.querySelector('.index');
const leftArrow = document.querySelector('.left-arrow');
const rightArrow = document.querySelector('.right-arrow');
let index = 0;
images.forEach((item, i) => {
item.addEventListener('click', () => {
updateImage(i);
popup.classList.toggle('active');
})
})
const updateImage = (i) => {
let path = `img/img${i+1}.png`;
largeImage.src = path;
imageName.innerHTML = path;
imageIndex.innerHTML = `0${i+1}`;
index = i;
}
closeBtn.addEventListener('click', () => {
popup.classList.toggle('active');
})
leftArrow.addEventListener('click', () => {
if (index > 0) {
updateImage(index - 1);
}
})
rightArrow.addEventListener('click', () => {
if (index < images.length - 1) {
updateImage(index + 1);
}
})* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*:focus {
outline: none;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #ff7a2d;
font-family: 'roboto', sans-serif;
}
.gallery {
width: 80%;
height: 90vh;
max-width: 1600px;
max-height: 800px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.gallery-image {
width: 30%;
height: calc(50% - 20px);
min-width: 300px;
min-height: 200px;
margin: 10px;
overflow: hidden;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
transition: 1s;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 80%;
max-width: 1600px;
height: 90vh;
max-height: 800px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.75);
display: flex;
justify-content: center;
align-items: center;
z-index: 5;
overflow: hidden;
transition: 1s;
opacity: 0;
}
.popup.active {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
.popup.active .close-btn,
.popup.active .image-name,
.popup.active .index,
.popup.active .large-image,
.popup.active .arrow-btn {
opacity: 1;
transition: opacity .5s;
transition-delay: 1s;
}
.top-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
background: #000;
color: #fff;
text-align: center;
line-height: 50px;
font-weight: 300;
}
.image-name {
opacity: 0;
}
.close-btn {
opacity: 0;
position: absolute;
top: 15px;
right: 20px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #f00;
cursor: pointer;
}
.arrow-btn {
opacity: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 10px;
border-radius: 50%;
border: none;
background: none;
cursor: pointer;
}
.left-arrow {
left: 10px;
}
.right-arrow {
right: 10px;
transform: translateY(-50%) rotate(180deg);
}
.arrow-btn:hover {
background: rgba(0, 0, 0, 0.5);
}
.index {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 80px;
font-weight: 100;
color: rgba(255, 255, 255, 0.4);
opacity: 0;
}
.large-image {
margin-top: 5%;
width: 80%;
height: 80%;
object-fit: contain;
opacity: 0;
}<div class="popup">
<div class="top-bar">
<p class="image-name">img1.png</p>
<span class="close-btn"></span>
</div>
<button class="arrow-btn left-arrow"><img src="img/arrow.png" alt=""></button>
<button class="arrow-btn right-arrow"><img src="img/arrow.png" alt=""></button>
<img src="img/img1.png" class="large-image" alt="">
<h1 class="index">01</h1>
</div>
<div class="gallery">
<div class="gallery-image">
<img src="img/img1.png" alt="" class="image">
</div>
<div class="gallery-image">
<img src="img/img2.png" alt="" class="image">
</div>
<div class="gallery-image">
<img src="img/img3.png" alt="" class="image">
</div>
<div class="gallery-image">
<img src="img/img4.png" alt="" class="image">
</div>
<div class="gallery-image">
<img src="img/img5.png" alt="" class="image">
</div>
<div class="gallery-image">
<img src="img/img6.png" alt="" class="image">
</div>
</div>>Solution :
To do what you require you can extract the logic in your click handler and invoke it on the 0th image when the page loads:
const setPopupImage = index => {
updateImage(index);
popup.classList.toggle('active');
}
setPopupImage(0);
Here’s a full working example:
const images = [...document.querySelectorAll('.image')];
const popup = document.querySelector('.popup');
const closeBtn = document.querySelector('.close-btn');
const imageName = document.querySelector('.image-name');
const largeImage = document.querySelector('.large-image');
const imageIndex = document.querySelector('.index');
const leftArrow = document.querySelector('.left-arrow');
const rightArrow = document.querySelector('.right-arrow');
let index = 0;
images.forEach((item, i) => {
item.addEventListener('click', () => setPopupImage(i));
})
const updateImage = (i) => {
let path = `img/img${i+1}.png`;
largeImage.src = path;
imageName.innerHTML = path;
imageIndex.innerHTML = `0${i+1}`;
index = i;
}
closeBtn.addEventListener('click', () => {
popup.classList.toggle('active');
})
leftArrow.addEventListener('click', () => {
if (index > 0) {
updateImage(index - 1);
}
})
rightArrow.addEventListener('click', () => {
if (index < images.length - 1) {
updateImage(index + 1);
}
})
const setPopupImage = index => {
updateImage(index);
popup.classList.toggle('active');
}
setPopupImage(0);* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*:focus {
outline: none;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #ff7a2d;
font-family: 'roboto', sans-serif;
}
.gallery {
width: 80%;
height: 90vh;
max-width: 1600px;
max-height: 800px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.gallery-image {
width: 30%;
height: calc(50% - 20px);
min-width: 300px;
min-height: 200px;
margin: 10px;
overflow: hidden;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
transition: 1s;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 80%;
max-width: 1600px;
height: 90vh;
max-height: 800px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.75);
display: flex;
justify-content: center;
align-items: center;
z-index: 5;
overflow: hidden;
transition: 1s;
opacity: 0;
}
.popup.active {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
.popup.active .close-btn,
.popup.active .image-name,
.popup.active .index,
.popup.active .large-image,
.popup.active .arrow-btn {
opacity: 1;
transition: opacity .5s;
transition-delay: 1s;
}
.top-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
background: #000;
color: #fff;
text-align: center;
line-height: 50px;
font-weight: 300;
}
.image-name {
opacity: 0;
}
.close-btn {
opacity: 0;
position: absolute;
top: 15px;
right: 20px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #f00;
cursor: pointer;
}
.arrow-btn {
opacity: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 10px;
border-radius: 50%;
border: none;
background: none;
cursor: pointer;
}
.left-arrow {
left: 10px;
}
.right-arrow {
right: 10px;
transform: translateY(-50%) rotate(180deg);
}
.arrow-btn:hover {
background: rgba(0, 0, 0, 0.5);
}
.index {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 80px;
font-weight: 100;
color: rgba(255, 255, 255, 0.4);
opacity: 0;
}
.large-image {
margin-top: 5%;
width: 80%;
height: 80%;
object-fit: contain;
opacity: 0;
}<div class="popup">
<div class="top-bar">
<p class="image-name">img1.png</p>
<span class="close-btn"></span>
</div>
<button class="arrow-btn left-arrow"><img src="img/arrow.png" alt=""></button>
<button class="arrow-btn right-arrow"><img src="img/arrow.png" alt=""></button>
<img src="img/img1.png" class="large-image" alt="">
<h1 class="index">01</h1>
</div>
<div class="gallery">
<div class="gallery-image">
<img src="img/img1.png" alt="" class="image">
</div>
<div class="gallery-image">
<img src="img/img2.png" alt="" class="image">
</div>
<div class="gallery-image">
<img src="img/img3.png" alt="" class="image">
</div>
<div class="gallery-image">
<img src="img/img4.png" alt="" class="image">
</div>
<div class="gallery-image">
<img src="img/img5.png" alt="" class="image">
</div>
<div class="gallery-image">
<img src="img/img6.png" alt="" class="image">
</div>
</div>