js+jq-2

by qwerew0

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<div class="gallery-container">
	<ul class="gallery">
		<!--  data-lightbox 속성에 큰이미지 경로작성-->
		<li><a href="#" alt="Gallery image"><img src="https://placedog.net/500/280/?id=1" data-lightbox="https://placedog.net/800/800/?id=1" alt="Gallery image"></a></li>
		<li><a href="#" alt="Gallery image"><img src="https://placedog.net/500/280/?id=2" data-lightbox="https://placedog.net/800/800/?id=2" alt="Gallery image"></a></li>
		<li><a href="#" alt="Gallery image"><img src="https://placedog.net/500/280/?id=3" data-lightbox="https://placedog.net/800/800/?id=3" alt="Gallery image"></a></li>
		<li><a href="#" alt="Gallery image"><img src="https://placedog.net/500/280/?id=4" data-lightbox="https://placedog.net/800/800/?id=4" alt="Gallery image"></a></li>
		<li><a href="#" alt="Gallery image"><img src="https://placedog.net/500/280/?id=5" data-lightbox="https://placedog.net/800/800/?id=5" alt="Gallery image"></a></li>
		<li><a href="#" alt="Gallery image"><img src="https://placedog.net/500/280/?id=6" data-lightbox="https://placedog.net/800/800/?id=6" alt="Gallery image"></a></li>
	</ul>
</div> <!-- end gallery-container -->
<!-- 모달창 -->
<div id="lightbox-overlay">
	<img src="" alt="Lightbox image" title="Click anywhere to close" id="lightbox-image" />

CSS

img {
    max-width: 100%;
    height: auto;
}

.gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .gallery li {
        float: left;
        width: 48%;
        margin: 1%;
    }

    .gallery li img {
        transition: opacity .3s ease-in-out;
    }

        .gallery li img:hover {
            opacity: .75;
        }

#lightbox-overlay {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(29, 31, 33, .95);
    transition: opacity .3s ease-in;
}

    #lightbox-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

#lightbox-image {
    max-height: 90%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    background: transparent url("images/loading.gif") 50% 50% no-repeat;
    text-indent: -99999px;
}

JavaScript

var img = document.querySelectorAll(".gallery img"),
	lightbox = document.querySelector("#lightbox-overlay"),
	lightboxImg = lightbox.querySelector("img");

for (var i = 0; i < img.length; i++) {
	img[i].addEventListener("click", function (e) {
		e.preventDefault(); //이미지를 클릭해도 링크가 작동하므로 기본기능을 막아 링크가 걸리지 않도록 합니다.
		var imgNewSrc = this.getAttribute("data-lightbox");
		console.log(imgNewSrc);

		lightboxImg.setAttribute("src", imgNewSrc);
		lightbox.classList.add("visible");
	});
}

lightbox.addEventListener("click", function () {
	this.classList.remove("visible");
});