How to make captions in a gallery of images based on the text content of other divs in JavaScript?
I have a gallery of images with some information appearing when you hover on each of them. When you click on each image, the full size is shown. I want to add a caption under the full-size versions based on the the information that appears when you hover on them.
For that purpose, I have made an array of caption texts. However, I am not able to figure out how I can assign the related caption to the respective image. I would also like to remove paragraph spacing from the caption.
To clarify, I added some images.
The texts that you see when you hover. Not the issue here.
The caption under the zoomed image. My Question:
Here is my code:
// Modal Images
var modal = document.getElementById("modalContainer");
var modalImg = document.getElementById("modalImg");
var imgArr = document.querySelectorAll(".img-container .img");
var currentIndex;
imgArr.forEach(function(img, i) {
img.onclick = function() {
var backgroundImage = img.style.backgroundImage
.slice(4, -1)
.replace(/"/g, "");
modal.style.display = "block";
modalImg.src = backgroundImage;
currentIndex = i;
};
});
// caption
var captionArr = [];
var captionInfo = document.querySelectorAll(".img-info");
var caption = document.getElementById("caption");
for (var i = 0; i < captionInfo.length; i++) {
var current = captionInfo[i];
console.log(current.textContent);
}
caption.innerHTML = captionArr[i];
console.log(captionArr);
// previous and next buttons
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
next.addEventListener("click", nextImage);
modalImg.addEventListener("click", nextImage);
function nextImage() {
if (currentIndex < imgArr.length - 1) {
currentIndex++;
modalImg.src = imgArr[currentIndex].style.backgroundImage
.slice(4, -1)
.replace(/"/g, "");
}
}
prev.addEventListener("click", previousImage);
function previousImage() {
if (currentIndex > 0) {
currentIndex--;
modalImg.src = imgArr[currentIndex].style.backgroundImage
.slice(4, -1)
.replace(/"/g, "");
}
}
// close the modal
var span = document.getElementsByClassName("close")[0];
span.addEventListener("click", close);
function close() {
modal.style.display = "none";
}.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
.img {
display: block;
width: 200px;
height: 100%;
margin-right: 10px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
.img-info {
display: block;
opacity: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 15px !important;
max-width: 80%;
}
.img-container:hover {
.img:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.6);
}
.img-info {
opacity: 1;
}
}
.frame {
display: flex;
height: 100px;
min-height: 20rem;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
justify-content: center;
align-items: center;
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
max-height: 80%;
object-fit: contain;
-o-object-fit: contain;
animation-name: zoom;
animation-duration: 0.6s;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: auto;
padding: 0.8rem;
color: #777;
font-weight: normal;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
z-index: 3;
}
.prev:hover,
.next:hover {
color: #000;
}
.next {
right: 0;
}
.prev {
left: 0;
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}<div class="frame">
<div class="img-container">
<div class="img" style="background-image: url(https://images.unsplash.com/photo-1501159771943-cc9027db4d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80)">
</div>
<div class="img-info">
<div class="img-info-title">
<h3>
Some text 1...
</h3>
</div>
<div class="img-info-subtitle">
<h4>
The rest 1...
</h4>
</div>
</div>
</div>
<div class="img-container">
<div class="img" style="background-image: url(https://images.unsplash.com/photo-1509042239860-f550ce710b93?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80">
</div>
<div class="img-info">
<div class="img-info-title">
<h3>
Some text 2...
</h3>
</div>
<div class="img-info-subtitle">
<h4>
The rest 2...
</h4>
</div>
</div>
</div>
<div class="img-container">
<div class="img" style="background-image: url(https://images.unsplash.com/photo-1583936410736-a4af4f3013d6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)">
</div>
<div class="img-info">
<div class="img-info-title">
<h3>
Some text 3...
</h3>
</div>
<div class="img-info-subtitle">
<h4>
The rest 3...
</h4>
</div>
</div>
</div>
</div>
<!-- The Modal -->
<div id="modalContainer" class="modal">
<!-- Buttons -->
<span class="close">×</span>
<a class="prev">❮</a>
<a class="next">❯</a>
<!-- Modal Content -->
<img id="modalImg" class="modal-content">
<div class="caption">
<p id="caption"></p>
</div>
</div>
</div>Solution
The first thing you can do is select the h3 and h4 and trim each of them to remove whitespace like:
console.log(current.querySelector('h3').textContent.trim() + " " + current.querySelector('h4').textContent.trim() );
// caption
var captionArr = [];
var captionInfo = document.querySelectorAll(".img-info");
var caption = document.getElementById("caption");
for (var i = 0; i < captionInfo.length; i++) {
var current = captionInfo[i];
var current_str = current.querySelector('h3').textContent.trim() + " " + current.querySelector('h4').textContent.trim();
console.log(current_str);
captionArr.push(current_str);
}
// Modal Images
var modal = document.getElementById("modalContainer");
var modalImg = document.getElementById("modalImg");
var imgArr = document.querySelectorAll(".img-container .img");
var currentIndex;
imgArr.forEach(function(img, i) {
img.onclick = function() {
var backgroundImage = img.style.backgroundImage
.slice(4, -1)
.replace(/"/g, "");
modal.style.display = "block";
modalImg.src = backgroundImage;
currentIndex = i;
console.log('i',i);
caption.innerHTML = captionArr[i];
};
});
// previous and next buttons
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
next.addEventListener("click", nextImage);
modalImg.addEventListener("click", nextImage);
function nextImage() {
if (currentIndex < imgArr.length - 1) {
currentIndex++;
modalImg.src = imgArr[currentIndex].style.backgroundImage
.slice(4, -1)
.replace(/"/g, "");
caption.innerHTML = captionArr[currentIndex];
}
}
prev.addEventListener("click", previousImage);
function previousImage() {
if (currentIndex > 0) {
currentIndex--;
modalImg.src = imgArr[currentIndex].style.backgroundImage
.slice(4, -1)
.replace(/"/g, "");
caption.innerHTML = captionArr[currentIndex];
}
}
// close the modal
var span = document.getElementsByClassName("close")[0];
span.addEventListener("click", close);
function close() {
modal.style.display = "none";
}.img-info h3, .img-info h3,{
color: #f1f1f1;
opacity: 1 !important;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
.img {
display: block;
width: 200px;
height: 100%;
margin-right: 10px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
.img-info {
display: block;
/*opacity: 0;*/
position: absolute;
/*top: 50%;*/
/*transform: translateY(-50%);*/
/*left: 15px !important;*/
max-width: 80%;
}
.img-container:hover {
.img:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.6);
}
.img-info {
opacity: 1;
}
}
.frame {
display: flex;
height: 100px;
min-height: 20rem;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
justify-content: center;
align-items: center;
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
max-height: 80%;
object-fit: contain;
-o-object-fit: contain;
animation-name: zoom;
animation-duration: 0.6s;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: auto;
padding: 0.8rem;
color: #777;
font-weight: normal;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
z-index: 3;
}
.prev:hover,
.next:hover {
color: #000;
}
.next {
right: 0;
}
.prev {
left: 0;
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}<div class="frame">
<div class="img-container">
<div class="img" style="background-image: url(https://images.unsplash.com/photo-1501159771943-cc9027db4d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80)">
</div>
<div class="img-info">
<div class="img-info-title">
<h3>
Some text 1...
</h3>
</div>
<div class="img-info-subtitle">
<h4>
The rest 1...
</h4>
</div>
</div>
</div>
<div class="img-container">
<div class="img" style="background-image: url(https://images.unsplash.com/photo-1509042239860-f550ce710b93?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80">
</div>
<div class="img-info">
<div class="img-info-title">
<h3>
Some text 2...
</h3>
</div>
<div class="img-info-subtitle">
<h4>
The rest 2...
</h4>
</div>
</div>
</div>
<div class="img-container">
<div class="img" style="background-image: url(https://images.unsplash.com/photo-1583936410736-a4af4f3013d6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)">
</div>
<div class="img-info">
<div class="img-info-title">
<h3>
Some text 3...
</h3>
</div>
<div class="img-info-subtitle">
<h4>
The rest 3...
</h4>
</div>
</div>
</div>
</div>
<!-- The Modal -->
<div id="modalContainer" class="modal">
<!-- Buttons -->
<span class="close">×</span>
<a class="prev">❮</a>
<a class="next">❯</a>
<!-- Modal Content -->
<img id="modalImg" class="modal-content">
<div class="caption">
<p id="caption" align="center" id="caption" style="color: white;"></p>
</div>
</div>
</div>Note, I modified the CSS, removing a lot of what you had:
.img-info {
display: block;
/*opacity: 0;*/
position: absolute;
/*top: 50%;*/
/*transform: translateY(-50%);*/
/*left: 15px !important;*/
max-width: 80%;
}
Then we get the following:
I believe this is the desired behaviour.
Now to add under the model pop-up too I think.
To do this we need to modify the JS a bit (we need to create the captioArr first and push each string of text onto it. Then the index of that array matches the index of your forEach loop and so we can use caption.innerHTML = captionArr[i];):
// caption
var captionArr = [];
var captionInfo = document.querySelectorAll(".img-info");
var caption = document.getElementById("caption");
for (var i = 0; i < captionInfo.length; i++) {
var current = captionInfo[i];
var current_str = current.querySelector('h3').textContent.trim() + " " + current.querySelector('h4').textContent.trim();
console.log(current_str);
captionArr.push(current_str);
}
// Modal Images
var modal = document.getElementById("modalContainer");
var modalImg = document.getElementById("modalImg");
var imgArr = document.querySelectorAll(".img-container .img");
var currentIndex;
imgArr.forEach(function(img, i) {
img.onclick = function() {
var backgroundImage = img.style.backgroundImage
.slice(4, -1)
.replace(/"/g, "");
modal.style.display = "block";
modalImg.src = backgroundImage;
currentIndex = i;
console.log('i',i);
caption.innerHTML = captionArr[i];
};
});
And then the style of the p tag a bit (it needs to be white and centred to see it)
<div class="caption">
<p id="caption" align="center" id="caption" style="color: white;"></p>
</div>
And then we get:
Finally, to change the caption when we click the previous and next buttons add one line to the prevImage and nextImage functions:
function nextImage() {
if (currentIndex < imgArr.length - 1) {
currentIndex++;
modalImg.src = imgArr[currentIndex].style.backgroundImage
.slice(4, -1)
.replace(/"/g, "");
caption.innerHTML = captionArr[currentIndex];
}
}
function previousImage() {
if (currentIndex > 0) {
currentIndex--;
modalImg.src = imgArr[currentIndex].style.backgroundImage
.slice(4, -1)
.replace(/"/g, "");
caption.innerHTML = captionArr[currentIndex];
}
}
Namely, caption.innerHTML = captionArr[currentIndex];
- PDF file creation using html-pdf is not working in my deployment server?
- Not iterating over map in node js
- Select text in textarea, delete it by backspace/delete to add CSS for another element
- Jquery : Uncaught SyntaxError: Failed to execute 'appendChild' on 'Node': missing ) after argument list
- center megamenu div under nav button
- Firebase Authentication: Where is the token stored in web?
- plugin:vite:import-analysis - Failed to parse source for import analysis because the content contains invalid JS syntax. - Vue 3
- SCRAM-SERVER-FIRST-MESSAGE: client password must be a string
- Where Am I Going Wrong Here - JAVASCRIPT
- Why does the function expression in an IIFE have to be wrapped in parentheses?
- In an object-destructuring declaration, what do the identifiers on the target side refer to?
- Can I destructure an object property into a property of another object?
- How does the object destructuring syntax work in ES6?
- How does nested destructuring work in ES6?
- Why does choosing module imports not work like destructuring?
- What is “fail-soft destructuring”?
- navigator.clipboard.readText() is not working in Firefox
- Why does console.log on a WeakSet give <items unknown> in node.js?
- Why do I need a WeakMap to store private data, as opposed to just closing over a variable with limited scope?
- Get url params in API route handler in Next.js
- How to move all Custom Element related into separate file to be imported & reused
- How to fetch data server-side in the latest Next.js? Tried getStaticProps but it's not running and getting undefined
- How to render my components in a tree structure, like default file structure in IDE using React
- Contentful API returning 'version mismatch' on entry update
- jqGrid dynamically change search operator type on button click
- JS making loop animation for a progress-bar
- Given an array of numbers(arr) and the length of the array(n) as arguments, how do you create a tribonacci sequence?
- "Could not read source map for chrome-error..." when using Visual Studio Code to debug JavaScript in Edge
- LeetCode Question - 2634. Filter Elements from Array
- How to get {[space][caret][space]} and {{[space][caret][space]}}