【JavaScript】イメージギャラリー、クリックで画像切り替え

2023年08月14日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回はカルーセルを使わないギャラリーショーの作成の仕方を紹介します！

実装例

HTML例

<div class="gallery">
    <div class="gallery-img">
        <img src="/cp/wp/wp-content/uploads/2023/08/gallery_01.jpg" alt="" id="js-image-target">
    </div>
    <ul class="gallery-list">
        <li class="gallery-list-item">
            <button class="js-image"><img src="/cp/wp/wp-content/uploads/2023/08/gallery_01.jpg" alt=""></button>
        </li>
        <li class="gallery-list-item">
            <button class="js-image"><img src="/cp/wp/wp-content/uploads/2023/08/gallery_02.jpg" alt=""></button>
        </li>
        <li class="gallery-list-item">
            <button class="js-image"><img src="/cp/wp/wp-content/uploads/2023/08/gallery_03.jpg" alt=""></button>
        </li>
        <li class="gallery-list-item">
            <button class="js-image"><img src="/cp/wp/wp-content/uploads/2023/08/gallery_04.jpg" alt=""></button>
        </li>
    </ul>
</div>

CSS例

.gallery img{
 width: 100%;
}
.gallery-img{
 margin: auto;
 max-width: 600px;
}
.gallery-list{
 padding: 0;
 list-style: none;
 display: flex;
 justify-content: center;
}
.js-image{
 cursor: pointer;
 border: none;
 background: none;
 transition: .4s;
}
.js-image:hover{
 opacity: 0.4;
}

JavaScript例

 window.addEventListener('DOMContentLoaded',function(){
        let imageBtn = document.getElementsByClassName('js-image');
        let imageMain = document.getElementById('js-image-target');
        for(let i = 0; i < imageBtn.length; i++){
            imageBtn[i].addEventListener('click',function(){
            let imageStack = this.firstElementChild.getAttribute('src');
            imageMain.setAttribute('src',imageStack)
        },false);
        }
});

クリックした要素のsrc属性の値を取得して、メインの箇所の属性の値を、それに差し替えるといった処理をしています。