圖片點擊選項不適用於 Vanilla Javascript； 燈箱

Question

我無法使用香草 javascript 使我的圖像可點擊。 有沒有更好的辦法？ 順便說一句，我應該補充一點，在創建 Lightbox 圖片庫的幾次失敗嘗試之后，這就是我所做的。 請參閱下面的代碼。

CSS：

    .container {
        max-width: 1280px;
        padding: 10px 1rem;
        margin: auto;
        overflow: hidden;

    .main-img img,
    .imgs img {
        width: 100%;
    }

    .imgs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 5px;
    }

    .imgs img {
        cursor: pointer;
    }

    @keyframes fadeIn {
        to {
             opacity: 1;
         }
     }

     .fade-in {
        opacity: 0;
        animation: fadeIn var(0.5s) ease-in 1 forwards;
    }

    const current = document.querySelector('#current');
    const imgs = document.querySelectorAll('.imgs img');
    const opacity = 0.5;

    imgs[0].style.opacity = opacity;

    imgs.forEach(img => img.addEventListener('click', imgClick));

    function imgClick(e) {
    imgs.forEach(img => (img.style.opacity = 1));

    current.src = e.target.src;

    current.classList.add('fade-in');

    setTimeout(() => current.classList.remove('fade-in'), 500);

    e.target.style.opacity = opacity;
}

和 HTML 代碼：

<div class="main-img py"> 
    <img src="img/items/BurgerIm App.png" id="current" /> 
</div> 
<div class="imgs"> 
    <img src="img/items/BurgerIm App.png" /> <img src="img/items/BurgerIm App.png" /> <img src="img/items/BurgerIm App.png" /> <img src="img/items/BurgerIm App.png" /> <img src="img/items/BurgerIm App.png" /> <img src="img/items/BurgerIm App.png" /> <img src="img/items/BurgerIm App.png" /> <img src="img/items/BurgerIm App.png" /> 
</div>

Answer 1

修復了 CSS 第一部分缺少結尾}中的錯字。 添加了一些示例圖像以顯示它的工作原理。

 const current = document.querySelector('#current'); const imgs = document.querySelectorAll('.imgs img'); const opacity = 0.5; imgs[0].style.opacity = opacity; imgs.forEach(img => img.addEventListener('click', imgClick)); function imgClick(e) { imgs.forEach(img => (img.style.opacity = 1)); current.src = e.target.src; current.classList.add('fade-in'); setTimeout(() => current.classList.remove('fade-in'), 500); e.target.style.opacity = opacity; }

 .container { max-width: 1280px; padding: 10px 1rem; margin: auto; overflow: hidden; }.main-img img, .imgs img { width: 100%; }.imgs { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 5px; }.imgs img { cursor: pointer; } @keyframes fadeIn { to { opacity: 1; } }.fade-in { opacity: 0; animation: fadeIn var(0.5s) ease-in 1 forwards; border: solid red 1px; }

 <div class="main-img py"> <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/decimal.svg" id="current" /> </div> <div class="imgs"> <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/decimal.svg" /> <img src="img/items/BurgerIm App.png" /> <img src="img/items/BurgerIm App.png" /> <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/copyright.svg" /> <img src="img/items/BurgerIm App.png" /> <img src="img/items/BurgerIm App.png" /> <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/beacon.svg" /> <img src="img/items/BurgerIm App.png" /> </div>