Несколько модальных изображений для моего сайта с использованием JavaScript - PullRequest
Новая
       7

Несколько модальных изображений для моего сайта с использованием JavaScript

0 голосов
/ 05 января 2019

Я пытаюсь создать несколько модальных изображений для своего веб-сайта, но я просто не могу настроить код, чтобы он работал. Буду очень признателен за любую помощь или предложения, так как я все еще учусь, и это уже не давало мне покоя:)

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>

Сценарий: 

// 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";
}

1 Ответ

0 голосов
/ 05 января 2019

Кажется, вы хотите добавить эффект лайтбокса на страницу галереи. Существует несколько библиотек для лайтбоксов, таких как , эта , которую очень легко реализовать.

Что касается вашего кода, вы все равно можете заставить его работать таким образом (здесь очень важен CSS): 

.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>
...