Javascript Tıklayınca Resim Gösterme
Merhabalar. Bir sorum var arkadaşlar. Aşağıda bir adet geniş, büyük bir resim var. Bu resmin aşağısında da dört küçük resim var. Aşağıdaki hangi resme tıklarsam o resim yukarıda görünecek. Aşağıdaki kodda "src" yi gösterebildim ama resmi gösteremedim.
<div id="yenieklenensliderbuyukresim">
</div>
<div class="yenieklenenslider">
<div value="" alt="">
<img class="yenieklenenresim" src='images/yenieklenenresim/1.jpg' type="button" onclick="tikla()">
</div>
<div value="" alt="">
<img class="yenieklenenresim" src='images/yenieklenenresim/2.jpg' type="button" onclick="tikla()">
</div>
<div value="" alt="">
<img class="yenieklenenresim" src='images/yenieklenenresim/3.jpg' type="button" onclick="tikla()">
</div>
<div value="" alt="">
<img class="yenieklenenresim" src='images/yenieklenenresim/4.jpg' type="button" onclick="tikla()">
</div>
</div>
function tikla() {
var sliderekle = document.querySelectorAll(".yenieklenenresim");
var slidergoster = document.getElementById("yenieklenensliderbuyukresim");
for(var x=0; x<sliderekle.length; x++) {
slidergoster.innerHTML = sliderekle[x].src;
}
}
Şu örneği inceleyebilirsiniz: https://codepen.io/ebykdrms/pen/ZEPgxmo
<div id="yenieklenensliderbuyukresim"></div>
<div class="yenieklenenslider">
<div><img class="yenieklenenresim" src='https://picsum.photos/400'></div>
<div><img class="yenieklenenresim" src='https://picsum.photos/401'></div>
<div><img class="yenieklenenresim" src='https://picsum.photos/402'></div>
<div><img class="yenieklenenresim" src='https://picsum.photos/403'></div>
</div>
#yenieklenensliderbuyukresim { height:400px; width:400px; border:1px solid #ccc; margin:20px auto; }
#yenieklenensliderbuyukresim > img { width:100%; height:100%; object-fit:cover; }
.yenieklenenslider { display:flex; flex-direction:row; align-items:center; justify-content:center; }
.yenieklenenresim { width:100px; height:100px; object-fit:cover; cursor:pointer; }
const $bigImage = document.getElementById("yenieklenensliderbuyukresim");
const $images = document.querySelector(".yenieklenenresim");
document.addEventListener("click", function(e){
const target = e.target.closest(".yenieklenenresim");
if(!target) return;
const src = target.getAttribute("src");
$bigImage.innerHTML = target.outerHTML;
});