SIR
목록으로

클릭 시 변하는 스크립트 중복 사용일때요~ 채택완료

홀홀로그램웹
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 조회 1,405
답변 2
목록

제가 구현하고 싶은건

비스포크 냉장고 처럼 클릭시 왼쪽 오른쪽 컬러가 바뀌는 거거든요~ 

33102762_1681260069.3926.png

 

 

그래서 알아본게 썸네일 갤러리 형태구요 

간단한?스크립트가 있는데 중복 사용이 안되더라구요

같은 스크립트도 한 공간안에서 중복 사용하고 싶은데 어떻게 짜야할까요?

지금 하고 있는 스크립트 첨부합니다~

 

 

Copy 
<style>
#container{margin-bottom: 80px;}
#photo{
  display: block;
  width: 960px;
  border: 10px solid black;
  margin: 0 auto;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);
}
#gallery{text-align: center;}
 
#gallery > li {
  display: inline-block;
  margin: 0 10px;
}
 
#gallery > li > img{
  display: block;
  width: 200px;
  border: 5px solid black;
  cursor: pointer;
}


#photo2{
  display: block;
  width: 960px;
  border: 10px solid black;
  margin: 0 auto;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);
}
#gallery2{text-align: center;}
 
#gallery2 > li {
  display: inline-block;
  margin: 0 10px;
}
 
#gallery2 > li > img{
  display: block;
  width: 200px;
  border: 5px solid black;
  cursor: pointer;
}

</style>


<div id="container">
    <img src="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg" alt="photo" id="photo">
</div>
 
<ul id="gallery">
    <li><img src="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg" alt="thumbnail"></li>
    <li><img src="https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg" alt="thumbnail"></li>
    <li><img src="https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg" alt="thumbnail"></li>
</ul>


<div id="container">
    <img src="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg" alt="photo2" id="photo2">
</div>
 
<ul id="gallery2">
    <li><img src="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg" alt="thumbnail"></li>
    <li><img src="https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg" alt="thumbnail"></li>
    <li><img src="https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg" alt="thumbnail"></li>
</ul>


<script>
 
  var photo = document.getElementById("photo");
  var thumbnail = document.querySelectorAll("#gallery > li > img");
 
  for ( var i = 0; i < thumbnail.length; i++ )
    thumbnail[i].addEventListener("click", function () {
 
      photo.setAttribute("src", this.getAttribute("src"));
 
    });
 
</script>

33102762_1681259966.7243.png

#비스포크 #썸네일갤러리

답변 2개

채택된 답변
+20 포인트

Copy 
<div id="galleryWrap">
    <div id="container">
        <img src="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg" alt="photo" id="photo">
    </div>
     
    <ul id="gallery">
        <li><img src="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg" data-thumb-target="photo" alt="thumbnail"></li>
        <li><img src="https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg" data-thumb-target="photo" alt="thumbnail"></li>
        <li><img src="https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg" data-thumb-target="photo" alt="thumbnail"></li>
    </ul>

    <div id="container">
        <img src="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg" alt="photo2" id="photo2">
    </div>
     
    <ul id="gallery2">
        <li><img src="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg" data-thumb-target="photo2" alt="thumbnail"></li>
        <li><img src="https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg" data-thumb-target="photo2" alt="thumbnail"></li>
        <li><img src="https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg" data-thumb-target="photo2" alt="thumbnail"></li>
    </ul>
</div>
<script>
    let thumbnails = document.querySelectorAll("#galleryWrap li > img");

    for ( var i = 0; i < thumbnails.length; i++ )
        thumbnails[i].addEventListener("click", function (e) {
        let bigPhotoId = e.currentTarget.dataset.thumbTarget? e.currentTarget.dataset.thumbTarget : 'photo';
        document.querySelector(`#${bigPhotoId}`).setAttribute("src", this.getAttribute("src"));

    });
</script>

이렇게 이미지에  dataset으로 타겟 설정해서 하면 되지 않을가요?

간략한 코드는 다음분께 패스~~ ㅋ

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

됬어요됬어요!!~~~감사합니다~~~

댓글을 작성하려면 로그인이 필요합니다.

Copy 
<style>

    .container{margin-bottom: 80px;}

    .photo{

      display: block;

      width: 960px;

      border: 10px solid black;

      margin: 0 auto;

      box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);

    }

    .gallery{text-align: center;}

     

    .gallery > li {

      display: inline-block;

      margin: 0 10px;

    }

     

    .gallery > li > img{

      display: block;

      width: 200px;

      border: 5px solid black;

      cursor: pointer;

    }

    

    </style>

 

    <div class="gallery-wrap">

        <div class="container">

            <img src="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg" alt="photo" class="photo">

        </div>

         

        <ul class="gallery">

            <li><img src="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg" alt="thumbnail"></li>

            <li><img src="https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg" alt="thumbnail"></li>

            <li><img src="https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg" alt="thumbnail"></li>

        </ul>

 

    </div>

    

    <div class="gallery-wrap">

        <div class="container">

            <img src="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg" alt="photo2" class="photo">

        </div>

        

        <ul class="gallery">

            <li><img src="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg" alt="thumbnail"></li>

            <li><img src="https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg" alt="thumbnail"></li>

            <li><img src="https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg" alt="thumbnail"></li>

        </ul>

    </div>

    

    <script>

        var thumbnails = document.querySelectorAll(".gallery > li > img");

        // console.log(thumbnails);

        thumbnails.forEach(function(thumbnail){ // 배열(thumbnails)의 갯수만큼 반복문 실행, (thumbnail)은 반복문 안에서 해당하는 객체. 

            // console.log(thumbnail);

            thumbnail.addEventListener("click", function(){

                console.log(this);

 

                var galleryWrap = thumbnail.parentElement.parentElement.parentElement; // li -> ul -> .gallery-wrap 찾음.

                var fullPhoto = galleryWrap.querySelector(".photo");

 

                fullPhoto.setAttribute("src", this.getAttribute("src"));

                

                

            })

        })

    </script>
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고