Multiple image modal's for my website using JavaScript

Question

I'm trying to create multiple image modal's for my website but I just can't seem to tweak the code to make it work. Any help or suggestions would be greatly appreciated as I am still learning and this has been bugging me for a while now :)

HTML:

<!-- The Modal -->
    <div id="myModal" class="modal">

<!-- The Close Button -->
     <span class="close">&times;</span>

<!-- Modal Content (The Image) -->
     <img class="modal-content" id="img">

<!-- Modal Caption (Image Text) -->
     <div id="caption"></div>
</div>

Script:

// Get the modal
    var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a 
    var img = document.getElementById('myImg');
    var modalImg = document.getElementById("img");
    var captionText = document.getElementById("caption");
    img.onclick = function () {
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
   var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
   span.onclick = function () {
   modal.style.display = "none";
}

hello, can you add your code in a snippet in order to view the result. thanks — JSmith
– JSmith, Commented Jan 5, 2019 at 0:46
var img = document.getElementById('myImg') <-- What is this line referring to? No myImg anywhere else.. — Ahmed Ramzi
– Ahmed Ramzi, Commented Jan 5, 2019 at 1:05

Ahmed Ramzi · Accepted Answer · 2019-01-05 01:30:21Z

It seems that you want to add a lightbox effect to a gallery page. There are multiple libraries for lightboxes such as this one which is very easy to implement.

As for your code, you can still make it work this way(the css is very important here):

.gallery-item .caption {
    font-size: 8px;
    display: none;
}
.gallery {
    padding: 0px;
    margin: 0 auto;
    text-align: center;
}
.gallery-item  {
display: inline-block;
padding: 10px;
border: 1px solid salmon;
border-radius: 10px;
background-color: whitesmoke;
text-align: center;
margin: 5px;
max-width: 200px;
box-sizing: border-box;
/* height: 220px; */
vertical-align: middle;
width: 200px;
}
.gallery-item img {
max-width: 165px;
}
#lightbox {
position: fixed;
text-align: center;
top: 0;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
color: white;
font-size: 12px;
display: inline-block;
}
#lightbox img {
    height: 85vh;
    vertical-align: middle;
    vertical-align: middle;
    clear: both;
}

#lightbox a {
    color: white;
}
#lightbox-close {
    float: right;
    padding: 5px;
}
#lightbox-prev, #lightbox-next {
    float: left;
    padding: 5px;
}
#lightbox-contents {
    display: inline-block;
}
.hidden {
    display: none !important;
}

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Lightbox gallery</title>
</head>
<body>
    <div id="pic list">
        <ul class="gallery">
            <li class="gallery-item">
                <img src="https://upload.wikimedia.org/wikipedia/commons/d/df/Doge_homemade_meme.jpg">
                <p class="caption">Caption1: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente, ducimus.</p>
            </li>
            <li class="gallery-item">
                <img src="https://upload.wikimedia.org/wikipedia/en/thumb/5/5f/Original_Doge_meme.jpg/300px-Original_Doge_meme.jpg">
                <p class="caption">Caption2: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente, ducimus.</p>
            </li>
        </ul>
  <!-- The Modal -->
  <div id="lightbox" class="hidden">
      <div id="lightbox-contents">
    <!-- The Close Button -->
    <div>
        <a href="#" id="lightbox-close">Close</a>
        <a href="#" id="lightbox-prev">Previous</a>
        <a href="#" id="lightbox-next">Next</a>
    </div>
    <!-- Modal Content (The Image) -->
    <div class="lightbox-img">
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/df/Doge_homemade_meme.jpg">
        <!-- Modal Caption (Image Text) -->
        <p class="caption">Caption1: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente, ducimus.</p>
    </div>
    </div> 
</div>
<script>
  //Lightbox
const close = document.getElementById('lightbox-close')
const lightbox = document.getElementById('lightbox')
const galleryItems = document.getElementsByClassName('gallery-item')
const lightboxImg = document.querySelector('.lightbox-img')

close.onclick = function (event) {
event.preventDefault();
lightbox.classList.add('hidden');
}


for (i=0; i<galleryItems.length; i++) {
    let items = galleryItems[i]
    items.onclick = function (event) {
        lightboxImg.innerHTML = items.innerHTML;
        lightbox.classList.remove('hidden');    
    }
}
</script>

Collectives™ on Stack Overflow

Multiple image modal's for my website using JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related