模态图库 slider 全屏

Question

I have a gallery that contains 6-9 images, I'm trying to create something like that => W3schools Example
But without writing the code twice as in the example and without the column at the bottom of the gallery (without showing the other images when fullscreen - only the number of the image and the Previous/Next buttons)
The whole point is to create the Modal when the IMG is clicked, and delete it when the Modal is closed (not to toggle between display: none; and display: block; )

Anyone can help please?
Thank you:)!

    <div class="category-gallery">
        <div id="Gallery1" class="gallery-box">
            <div class="gallery-img-container">
                <div class="gallery-img-box">
                    <img src="card-image.png" class="gallery-img">
                    <span></span>
                </div>
            </div>
            <div class="gallery-img-container">
                <div class="gallery-img-box">
                    <img src="card-image.png" class="gallery-img">
                    <span></span>
                </div>
            </div>
            <div class="gallery-img-container">
                <div class="gallery-img-box">
                    <img src="card-image.png" class="gallery-img">
                    <span></span>
                </div>
            </div>
            <div class="gallery-img-container">
                <div class="gallery-img-box">
                    <img src="card-image.png" class="gallery-img">
                    <span></span>
                </div>
            </div>
        </div>
    </div>

.category-gallery { 
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}

.gallery-img-container {
    position: relative;
    float: right;
    min-height: 180px;
    flex: 0 0 30.333333%;
    max-width: 30.333333%;
    margin: 30px 1.5% 30px 1.5%;
}

.gallery-img-box {
    position: relative;
    height: auto;
    width: 100%;
    height: 250px;
    border-radius: 5px;
    cursor: pointer;
}

.gallery-img-box span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    line-height: 0px;
    font-size: 20px;
    margin: 0 auto;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.gallery-img-box:hover > span {
    opacity: 1;
}

.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 5px;
}

@media (max-width: 1200px) {
    .gallery-img-box {
        height: 200px;
    }
}

@media (max-width:992px) {
    .gallery-img-container {
        flex: 0 0 40%;
        max-width: 40%;
        margin: 30px 5% 50px 5%;
        
    }
}

@media (max-width:768px){ 
    .gallery-img-container {
        flex: 0 0 70%;
        max-width: 70%;
        margin: 30px 15% 30px 15%;
    }
}
                            
@media (max-width:576px){
    .gallery-img-container {
        flex: 0 0 80%;
        max-width: 80%;
        margin: 30px 10% 30px 10%;
    }
}

Answer 1

If I understand you right, you looking to change this to be about this one:

 function openModal() { document.getElementById("myModal").style.display = "block"; } function closeModal() { document.getElementById("myModal").style.display = "none"; } var slideIndex = 0; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.querySelectorAll('.column img'); var captionText = document.getElementsByClassName("numbertext")[0]; var modalImg = document.querySelector('.modal-content img'); n %= slides.length; modalImg.src = slides[n].src; captionText.innerHTML = n + 1 + ' / ' + slides.length; }

 body { font-family: Verdana, sans-serif; margin: 0; } * { box-sizing: border-box; }.row >.column { padding: 0 8px; }.row:after { content: ""; display: table; clear: both; }.column { float: left; width: 25%; } /* The Modal (background) */.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } /* Modal Content */.modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 90%; max-width: 1200px; } /* The Close Button */.close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; }.close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; }.cursor { cursor: pointer; } /* Next & previous buttons */.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Position the "next button" to the right */.next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */.prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* Number text (1/3 etc) */.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } img { margin-bottom: -4px; }.caption-container { text-align: center; background-color: black; padding: 2px 16px; color: white; }.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); }

 <h2 style="text-align:center">Lightbox</h2> <div class="row"> <div class="column"> <img src="https://picsum.photos/id/1000/300/200" style="width:100%" onclick="openModal();currentSlide(0)" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://picsum.photos/id/1001/300/200" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://picsum.photos/id/1002/300/200" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://picsum.photos/id/1003/300/200" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor"> </div> </div> <div id="myModal" class="modal"> <span class="close cursor" onclick="closeModal()">&times;</span> <div class="modal-content"> <div class="mySlides"> <div class="numbertext">1 / 4</div> <img src="" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> </div>

--- VERSION 2 ---

According to the requirements in the comments below, here is an updated example, where the modal built dynamically:

 var modal = initModal(); function initModal() { return render({ tag: 'div', id: 'myModal', className: 'modal', children: [ { tag: 'span', className: 'close cursor', onclick: closeModal, innerHTML: '&times;' }, { tag: 'div', className: 'modal-content', children: [ { tag: 'div', className: 'mySlides', children: [ { tag: 'div', className: 'numbertext' }, { tag: 'img', style: 'width: 100%' } ] }, { tag: 'a', className: 'prev', onclick: function(){plusSlides(-1)}, innerHTML: '&#10094' }, { tag: 'a', className: 'next', onclick: function(){plusSlides(1)}, innerHTML: '&#10095' } ] } ] }); } function render(obj) { var el = document.createElement(obj.tag); if(obj.children){ for(var i=0;i<obj.children.length;i++) { el.appendChild(render(obj.children[i])); } } delete el.tag; delete el.children; for(var key in obj){ el[key] = obj[key]; } return el; } function openModal() { document.body.appendChild(modal); } function closeModal() { modal.remove(); } var slideIndex = 0; function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.querySelectorAll('.column img'); var captionText = modal.querySelector(".numbertext"); var modalImg = modal.querySelector('img'); n %= slides.length; modalImg.src = slides[n].src; captionText.innerHTML = n + 1 + ' / ' + slides.length; }

 body { font-family: Verdana, sans-serif; margin: 0; } * { box-sizing: border-box; }.row >.column { padding: 0 8px; }.row:after { content: ""; display: table; clear: both; }.column { float: left; width: 25%; } /* The Modal (background) */.modal { position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } /* Modal Content */.modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 90%; max-width: 1200px; } /* The Close Button */.close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; }.close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; }.cursor { cursor: pointer; } /* Next & previous buttons */.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Position the "next button" to the right */.next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */.prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* Number text (1/3 etc) */.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } img { margin-bottom: -4px; }.caption-container { text-align: center; background-color: black; padding: 2px 16px; color: white; }.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); }

 <h2 style="text-align:center">Lightbox</h2> <div class="row"> <div class="column"> <img src="https://picsum.photos/id/1000/300/200" style="width:100%" onclick="openModal();currentSlide(0)" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://picsum.photos/id/1001/300/200" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://picsum.photos/id/1002/300/200" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://picsum.photos/id/1003/300/200" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor"> </div> </div>

--- VERSION 3 --- To give an example for the new requirement down the comments, here is an example for two image categories, used one modal:

 var modal = initModal(); function initModal() { return render({ tag: 'div', id: 'myModal', className: 'modal', children: [ { tag: 'span', className: 'close cursor', onclick: closeModal, innerHTML: '&times;' }, { tag: 'div', className: 'modal-content', children: [ { tag: 'div', className: 'mySlides', children: [ { tag: 'div', className: 'numbertext' }, { tag: 'img', style: 'width: 100%' } ] }, { tag: 'a', className: 'prev', onclick: function(){plusSlides(-1)}, innerHTML: '&#10094' }, { tag: 'a', className: 'next', onclick: function(){plusSlides(1)}, innerHTML: '&#10095' } ] } ] }); } function render(obj) { var el = document.createElement(obj.tag); if(obj.children){ for(var i=0;i<obj.children.length;i++) { el.appendChild(render(obj.children[i])); } } delete el.tag; delete el.children; for(var key in obj){ el[key] = obj[key]; } return el; } function openModal() { document.body.appendChild(modal); } function closeModal() { modal.remove(); } var slideIndex = 0; var category = 'cat-1'; function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n, cat) { category = cat; openModal(); showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.querySelectorAll('#'+category+' img'); var captionText = modal.querySelector(".numbertext"); var modalImg = modal.querySelector('img'); n %= slides.length; modalImg.src = slides[n].src; captionText.innerHTML = n + 1 + ' / ' + slides.length; }

 body { font-family: Verdana, sans-serif; margin: 0; } * { box-sizing: border-box; }.row >.column { padding: 0 8px; }.row:after { content: ""; display: table; clear: both; }.column { float: left; width: 25%; } /* The Modal (background) */.modal { position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } /* Modal Content */.modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 90%; max-width: 1200px; } /* The Close Button */.close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; }.close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; }.cursor { cursor: pointer; } /* Next & previous buttons */.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Position the "next button" to the right */.next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */.prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* Number text (1/3 etc) */.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } img { margin-bottom: -4px; }.caption-container { text-align: center; background-color: black; padding: 2px 16px; color: white; }.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); }

 <h2 style="text-align:center">Lightbox</h2> <div class="row" id="cat-1"> <div class="column"> <img src="https://picsum.photos/id/1000/300/200" style="width:100%" onclick="currentSlide(0, 'cat-1')" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://picsum.photos/id/1001/300/200" style="width:100%" onclick="currentSlide(1, 'cat-1')" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://picsum.photos/id/1002/300/200" style="width:100%" onclick="currentSlide(2, 'cat-1')" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://picsum.photos/id/1003/300/200" style="width:100%" onclick="currentSlide(3, 'cat-1')" class="hover-shadow cursor"> </div> </div> <div class="row" id="cat-2"> <div class="column"> <img src="https://picsum.photos/id/1004/300/200" style="width:100%" onclick="currentSlide(0, 'cat-2')" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://picsum.photos/id/1005/300/200" style="width:100%" onclick="currentSlide(1, 'cat-2')" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://picsum.photos/id/1006/300/200" style="width:100%" onclick="currentSlide(2, 'cat-2')" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://picsum.photos/id/1/300/200" style="width:100%" onclick="currentSlide(3, 'cat-2')" class="hover-shadow cursor"> </div> </div>