클릭 시 변하는 스크립트 중복 사용일때요~
본문
제가 구현하고 싶은건
비스포크 냉장고 처럼 클릭시 왼쪽 오른쪽 컬러가 바뀌는 거거든요~
그래서 알아본게 썸네일 갤러리 형태구요
간단한?스크립트가 있는데 중복 사용이 안되더라구요
같은 스크립트도 한 공간안에서 중복 사용하고 싶은데 어떻게 짜야할까요?
지금 하고 있는 스크립트 첨부합니다~
<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>
답변 2
<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으로 타겟 설정해서 하면 되지 않을가요?
간략한 코드는 다음분께 패스~~ ㅋ
됬어요됬어요!!~~~감사합니다~~~
<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>
답변을 작성하시기 전에 로그인 해주세요.
