목록으로

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

홀로그램웹

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전 조회 1,290

답변 2

제가 구현하고 싶은건

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

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

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

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

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

</p>

<p><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;

}</p>

<p>

#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;

}</p>

<p></style></p>

<p>

<div id="container">

    <img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> alt="photo" id="photo">

</div>

 

<ul id="gallery">

    <li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> alt="thumbnail"></li>

    <li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"</a> alt="thumbnail"></li>

    <li><img src="<a href="https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"</a> alt="thumbnail"></li>

</ul></p>

<p>

<div id="container">

    <img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> alt="photo2" id="photo2">

</div>

 

<ul id="gallery2">

    <li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> alt="thumbnail"></li>

    <li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"</a> alt="thumbnail"></li>

    <li><img src="<a href="https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"</a> alt="thumbnail"></li>

</ul></p>

<p>

<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>

 </p>

<p>

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

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

답변 2개

정렬:

채택된 답변

+20 포인트

포인트적립

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전

<div id="galleryWrap">

    <div id="container">

        <img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> alt="photo" id="photo">

    </div>

     

    <ul id="gallery">

        <li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> data-thumb-target="photo" alt="thumbnail"></li>

        <li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"</a> data-thumb-target="photo" alt="thumbnail"></li>

        <li><img src="<a href="https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"</a> data-thumb-target="photo" alt="thumbnail"></li>

    </ul></p>

<p>    <div id="container">

        <img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> alt="photo2" id="photo2">

    </div>

     

    <ul id="gallery2">

        <li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> data-thumb-target="photo2" alt="thumbnail"></li>

        <li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"</a> data-thumb-target="photo2" alt="thumbnail"></li>

        <li><img src="<a href="https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"</a> data-thumb-target="photo2" alt="thumbnail"></li>

    </ul>

</div>

<script>

    let thumbnails = document.querySelectorAll("#galleryWrap li > img");</p>

<p>    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"));</p>

<p>    });

</script></p>

<p> </p>

<p>

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

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

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

답변에 대한 댓글 1개

�

홀로그램웹

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전

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

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

조나단입니다

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전

</p>

<p> </p>

<p> </p>

<p><style></p>

<p>    .container{margin-bottom: 80px;}</p>

<p>    .photo{</p>

<p>      display: block;</p>

<p>      width: 960px;</p>

<p>      border: 10px solid black;</p>

<p>      margin: 0 auto;</p>

<p>      box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);</p>

<p>    }</p>

<p>    .gallery{text-align: center;}</p>

<p>     </p>

<p>    .gallery > li {</p>

<p>      display: inline-block;</p>

<p>      margin: 0 10px;</p>

<p>    }</p>

<p>     </p>

<p>    .gallery > li > img{</p>

<p>      display: block;</p>

<p>      width: 200px;</p>

<p>      border: 5px solid black;</p>

<p>      cursor: pointer;</p>

<p>    }</p>

<p>    </p>

<p>    </style></p>

<p> </p>

<p>    <div class="gallery-wrap"></p>

<p>        <div class="container"></p>

<p>            <img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> alt="photo" class="photo"></p>

<p>        </div></p>

<p>         </p>

<p>        <ul class="gallery"></p>

<p>            <li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> alt="thumbnail"></li></p>

<p>            <li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"</a> alt="thumbnail"></li></p>

<p>            <li><img src="<a href="https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"</a> alt="thumbnail"></li></p>

<p>        </ul></p>

<p> </p>

<p>    </div></p>

<p>    </p>

<p>    <div class="gallery-wrap"></p>

<p>        <div class="container"></p>

<p>            <img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> alt="photo2" class="photo"></p>

<p>        </div></p>

<p>        </p>

<p>        <ul class="gallery"></p>

<p>            <li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/06/14/58/iguana-7833655_960_720.jpg"</a> alt="thumbnail"></li></p>

<p>            <li><img src="<a href="https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_960_720.jpg"</a> alt="thumbnail"></li></p>

<p>            <li><img src="<a href="https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.pixabay.com/photo/2022/12/31/13/11/fruits-7688632_960_720.jpg"</a> alt="thumbnail"></li></p>

<p>        </ul></p>

<p>    </div></p>

<p>    </p>

<p>    <script></p>

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

<p>        // console.log(thumbnails);</p>

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

<p>            // console.log(thumbnail);</p>

<p>            thumbnail.addEventListener("click", function(){</p>

<p>                console.log(this);</p>

<p> </p>

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

<p>                var fullPhoto = galleryWrap.querySelector(".photo");</p>

<p> </p>

<p>                fullPhoto.setAttribute("src", this.getAttribute("src"));</p>

<p>                </p>

<p>                </p>

<p>            })</p>

<p>        })</p>

<p>    </script></p>

<p>     </p>

<p> </p>

<p>

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

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

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

로그인