Galeri Fotoğrafa Link Verme
Merhaba arkadaşlar, fotoğraf galerisi yapmaya çalışıyorum. Hazır bir şey buldum. Küçük fotoğraflara tıklayınca sağ tarafta değişiyor buraya kadar sorun yok. Fakat gelen fotoğraf adresini link olarakta atamak istiyorum üzerine tıklayınca büyük hali açılsın istiyorum. Nasıl yapabilirim acaba.
<div class="gallery">
<div class="gallery-content">
<div class="chose-img">
<img class="shadow-sm" src="urunler/mary-3552.jpg" />
<img class="shadow-sm" src="urunler/mary-251.jpg" />
<img class="shadow-sm" src="urunler/mary-2170.jpg" />
<img class="shadow-sm" src="urunler/mary-3552.jpg" />
</div>
<div class="presentation">
<a href=""><img src="urunler/mary-3552.jpg" class="main-img shadow" /></a>
</div>
</div>
</div>
let choseImgModel = document.querySelectorAll(".chose-img img");
let mainImg = document.querySelector(".gallery .main-img");
choseImgModel.forEach((img) =>
img.addEventListener("click", () => {
mainImg.src = img.src;
})
);
github linki: https://github.com/abderraouf-aouni/Gallery
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (2)
let choseImgModel = document.querySelectorAll(".chose-img img");
let mainImg = document.querySelector(".gallery .main-img");
let mainImgLink = document.querySelector(".gallery .presentation > a");
choseImgModel.forEach((img) =>
img.addEventListener("click", () => {
mainImg.src = img.src;
mainImgLink.href = img.src;
})
);
hazır bişeyler kullanmak istiyorsan https://swiperjs.com/demos bu işine yarayacaktır.
https://swiperjs.com/demos#thumbs-gallery