它们的一种模式 - 多个图像，不同的图像集

Question

这是我的第一个问题。我一直在寻找答案，但我找不到我需要的解决方案。我会试着详细说明，我认为代码也可以代表我。

我不是程序员，但我喜欢干涉。我试图使用一个模态来显示几个图像，并在同一页面显示不同，像一种投资组合。我想保持简单。

这是“modal.js”：

// resposta ao clique do teclado
document.onkeydown = checkKey;
function checkKey(e)    {
                    e = e || window.event;
                    if (e.keyCode == '37') {plusSlides(-1)}
                    // seta esquerda
                    if (e.keyCode == '39') {plusSlides(1)}
                    // seta direita
                    else {return false}
                    }
// modal
function openModal() {document.getElementById('theModal').style.display = "block";}
function closeModal() {document.getElementById('theModal').style.display = "none";}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {showSlides(slideIndex += n);}
function currentSlide(n) {showSlides(slideIndex = n);}
function showSlides(n)  {
                    var i;
                    var slides = document.getElementsByClassName("themSlides");
                    var dots = document.getElementsByClassName("demo");
                    var captionText = document.getElementById("caption");
                    if (n > slides.length) {slideIndex = 1};
                    if (n < 1) {slideIndex = slides.length};
                    for (i = 0; i < slides.length; i++) {slides[i].style.display = "none";}
                    for (i = 0; i < dots.length; i++) {dots[i].className = dots[i].className.replace("active", "");}
                    slides[slideIndex-1].style.display = "block";
                    dots[slideIndex-1].className += "active";
                    captionText.innerHTML = dots[slideIndex-1].alt;
                    document.body.style.overflow = "hidden";
                    }

我正在尝试使用“modal.js”来操作模式，并在“test.html”上设置不同的图像并将它们组织到不同的画廊中，我现在已经有一段时间了，可以'似乎了解如何为它创建一个功能。我认为“test.html”可以说明我的意思。

这是“test.html”：

<div class="article" id="article">

          <div class="box">
            <img class="img" src="img/temp/1.jpg" onclick="openModal(); currentSlide(1)" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget dolor justo. Donec a est magna. Donec ut purus hendrerit, fringilla nulla in, vulputate quam. Aenean interdum ex risus.">
          <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget dolor justo. Donec a est magna. Donec ut purus hendrerit, fringilla nulla in, vulputate quam. Aenean interdum ex risus.</p>
      </div>

      <div class="box">
        <img  class="img" src="img/temp/2.jpg" onclick="openModal(); currentSlide(6)" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget dolor justo. Donec a est magna. Donec ut purus hendrerit, fringilla nulla in, vulputate quam. Aenean interdum ex risus.">
          <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget dolor justo. Donec a est magna. Donec ut purus hendrerit, fringilla nulla in, vulputate quam. Aenean interdum ex risus.</p>
      </div>

      <div class="box">
        <img class="img" src="img/temp/3.jpg" onclick="openModal();currentSlide(11)" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget dolor justo. Donec a est magna. Donec ut purus hendrerit, fringilla nulla in, vulputate quam. Aenean interdum ex risus.">
          <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget dolor justo. Donec a est magna. Donec ut purus hendrerit, fringilla nulla in, vulputate quam. Aenean interdum ex risus.</p>
      </div>

      <div class="box">
        <img class="img" src="img/temp/4.jpg" onclick="openModal();currentSlide(16)" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget dolor justo. Donec a est magna. Donec ut purus hendrerit, fringilla nulla in, vulputate quam. Aenean interdum ex risus.">
          <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget dolor justo. Donec a est magna. Donec ut purus hendrerit, fringilla nulla in, vulputate quam. Aenean interdum ex risus.</p>
      </div>

      <div class="box">
        <img class="img" src="img/temp/5.jpg" onclick="openModal();currentSlide(21)" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget dolor justo. Donec a est magna. Donec ut purus hendrerit, fringilla nulla in, vulputate quam. Aenean interdum ex risus.">
          <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget dolor justo. Donec a est magna. Donec ut purus hendrerit, fringilla nulla in, vulputate quam. Aenean interdum ex risus.</p>
      </div>

      <div class="box">
        <img class="img" src="img/temp/6.jpg" onclick="openModal();currentSlide(26)" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget dolor justo. Donec a est magna. Donec ut purus hendrerit, fringilla nulla in, vulputate quam. Aenean interdum ex risus.">
          <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget dolor justo. Donec a est magna. Donec ut purus hendrerit, fringilla nulla in, vulputate quam. Aenean interdum ex risus.</p>
      </div>

<!-- modal para img/temp/1.jpg -->  

<div id="theModal" class="modal">
    <span class="close cursor" onclick="closeModal()">&times;</span>
    <div class="modal-content">

    <div class="galleryOne">
    <div class="themSlides">
    <img src="img/temp/1.jpg" style="width:100%" alt="Lorem ipsum.">
    </div>
        <div class="themSlides">
        <img src="img/temp/1a.jpg" style="width:100%" alt="Lorem ipsum.">
        </div>
            <div class="themSlides">
            <img src="img/temp/1b.jpg" style="width:100%" alt="Lorem ipsum.">
            </div>
                <div class="themSlides">
                <img src="img/temp/1c.jpg" style="width:100%" alt="Lorem ipsum.">
                </div>
                    <div class="themSlides">
                    <img src="img/temp/1d.jpg" style="width:100%" alt="Lorem ipsum.">
                    </div>
    </div>

    <div class="galleryTwo">
    <div class="themSlides">
    <img src="img/temp/2.jpg" style="width:100%" alt="Lorem ipsum.">
    </div>
        <div class="themSlides">
        <img src="img/temp/2a.jpg" style="width:100%" alt="Lorem ipsum.">
        </div>
            <div class="themSlides">
            <img src="img/temp/2b.jpg" style="width:100%" alt="Lorem ipsum.">
            </div>
                <div class="themSlides">
                <img src="img/temp/2c.jpg" style="width:100%" alt="Lorem ipsum.">
                </div>
                    <div class="themSlides">
                    <img src="img/temp/2d.jpg" style="width:100%" alt="Lorem ipsum.">
                    </div>
    </div>

    <div class="galleryThree">
    <div class="themSlides">
    <img src="img/temp/3.jpg" style="width:100%" alt="Lorem ipsum.">
    </div>
        <div class="themSlides">
        <img src="img/temp/3a.jpg" style="width:100%" alt="Lorem ipsum.">
        </div>
            <div class="themSlides">
            <img src="img/temp/3b.jpg" style="width:100%" alt="Lorem ipsum.">
            </div>
                <div class="themSlides">
                <img src="img/temp/3c.jpg" style="width:100%" alt="Lorem ipsum.">
                </div>
                    <div class="themSlides">
                    <img src="img/temp/3d.jpg" style="width:100%" alt="Lorem ipsum.">
                    </div>
    </div>

    <div class="galleryFour">
    <div class="themSlides">
    <img src="img/temp/4.jpg" style="width:100%" alt="Lorem ipsum.">
    </div>
        <div class="themSlides">
        <img src="img/temp/4a.jpg" style="width:100%" alt="Lorem ipsum.">
        </div>
            <div class="themSlides">
            <img src="img/temp/4b.jpg" style="width:100%" alt="Lorem ipsum.">
            </div>
                <div class="themSlides">
                <img src="img/temp/4c.jpg" style="width:100%" alt="Lorem ipsum.">
                </div>
                    <div class="themSlides">
                    <img src="img/temp/4d.jpg" style="width:100%" alt="Lorem ipsum.">
                    </div>
    </div>

    <div class="galleryFive">
    <div class="themSlides">
    <img src="img/temp/5.jpg" style="width:100%" alt="Lorem ipsum.">
    </div>
        <div class="themSlides">
        <img src="img/temp/5a.jpg" style="width:100%" alt="Lorem ipsum.">
        </div>
            <div class="themSlides">
            <img src="img/temp/5b.jpg" style="width:100%" alt="Lorem ipsum.">
            </div>
                <div class="themSlides">
                <img src="img/temp/5c.jpg" style="width:100%" alt="Lorem ipsum.">
                </div>
                    <div class="themSlides">
                    <img src="img/temp/5d.jpg" style="width:100%" alt="Lorem ipsum.">
                    </div>
    </div>

    <div class="gallerySix">
    <div class="themSlides">
    <img src="img/temp/6.jpg" style="width:100%" alt="Lorem ipsum.">
    </div>
        <div class="themSlides">
        <img src="img/temp/6a.jpg" style="width:100%" alt="Lorem ipsum.">
        </div>
            <div class="themSlides">
            <img src="img/temp/6b.jpg" style="width:100%" alt="Lorem ipsum.">
            </div>
                <div class="themSlides">
                <img src="img/temp/6c.jpg" style="width:100%" alt="Lorem ipsum.">
                </div>
                    <div class="themSlides">
                    <img src="img/temp/6d.jpg" style="width:100%" alt="Lorem ipsum.">
                    </div>
        </div>

    </div>

  <a class="prev" onkeydown="checkKey(e)" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onkeydown="checkKey(e)" onclick="plusSlides(1)">&#10095;</a>

</div>

最后，“test.css”：

article {
    position: fixed;
    width: 100%;
    }

* {box-sizing: border-box;}

 .box   {
padding: 0 40px 40px;
float: left;
width: 24.99999%;
    }

@media only screen and (max-width: 4000px)  {
.box    {width: 33.33333%;
        margin: 20px 0;}
                                        }           

 @media only screen and (max-width: 2000px)     {
    .box    {width: 49.99999%;
        margin: 10px 0;}
                                        }

@media only screen and (max-width: 500px)   {
    .box    {width: 100%;}
                                        }

p   { 
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
font-family: "Courier New"; 
font-size:14px; 
color: rgb(0, 0, 0);
}

/* fotografias com legenda */

img {width: 100%;}

/* resposta da imagem ao cursor (ID) */         

#myImg  {transition: 0.3s;}

 #myImg:hover {opacity: 0.7;}

 /* resposta da imagem ao cursor (CLASS) */

.img    {transition: 0.3s;}

.img:hover  {opacity: 0.7;}

/* modal */

.modal  {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 40px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
    }

/* conteudo  modal */

 .modal-content     {
            margin: auto;
            display: block;
            width: 140%;
            max-width: 800px;
            font-family:"Courier New";
            text-align: justify;
            font-size:12px;
            }   

 /* animação */

.modal-content, {    
            -webkit-animation-name: zoom;
            -webkit-animation-duration: 0.6s;
            animation-name: zoom;
            animation-duration: 0.6s;
            }

@-webkit-keyframes zoom {
                    from {transform:scale(0)} 
                    to {transform:scale(1)}
                    }

@keyframes zoom {
            from {transform:scale(0)} 
            to {transform:scale(1)}
            }

 /* botão de saida */

.close  {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    padding: 20px;
    }

.close:hover,
.close:focus    {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
            }

/* tamanho adaptável */

@media only screen and (max-width: 700px)   {
                                        .modal-content {width: 100%;}
                                        }

 .themSlides    
            {
            display: none;
            }

/* next e previous */
.prev,
.next   {
    position: fixed;
    top: 50%;
    width: auto;
    padding: 40px;
    margin-top: -30px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 20px 20px 0;
    user-select: none;
    -webkit-user-select: none;
    }

/* posição do next */

.next   {
    right: 0px;
    border-radius: 20px 0 0 20px;
    }

 /* hover com transparência */

.prev:hover,
.next:hover {
        background-color: rgba(0, 0, 0, 0.6);
        }

.demo {opacity: 0.6;}

.active, .demo:hover {opacity: 1;}

img.hover-shadow {transition: 0.3s}

.hover-shadow:hover {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)}

我耐心地等待您的回复，并希望获得最佳代码。如果我在代码方面或社区方面犯了任何错误，请告诉我。

最好的问候，
丹尼尔门德斯

Answer 1

使用此解决模式：

http://lokeshdhakar.com/projects/lightbox2/

要在同一模态中使用多个图像，而不是在页面中：

<a href="https://farm1.staticflickr.com/802/40822557832_398246f888_o_d.jpg" 
rel="lightbox[rayfish]"></a>

使用锚点和rel =“attribute”创建一个图库。

就在这里：http://41149.cf/