Resime tıklandığı zaman büyümesi

<?php

if(!empty($urun['video'])){
echo '
<div class="swiper-slide">
<figure class="product-image">
<video style="height: 100%;width: 100%;" muted="false" onloadeddata="this.play();" autoplay="" playsinline="" webkit-playsinline="" loop="">
<source src="upload/'.$urun['video'].'" type="video/mp4" />
Your browser does not support the video tag.
</video>
</figure>
</div>';

}

$query = $db->query("SELECT * FROM urun_img WHERE urun_id = '{$urun['id']}' ", PDO::FETCH_ASSOC);
if($query->rowCount()){

if(!empty($urun['video'])){
$alt_img.='<div class="product-thumb swiper-slide"><video style="height: 100%;width: 100%;" muted="" playsinline="" webkit-playsinline="">
<source src="upload/'.$urun['video'].'" type="video/mp4" />
Your browser does not support the video tag.
</video> <i class="fa fa-play videoThumbIcon" aria-hidden="true"></i>
</div>';}

foreach($query as $row){

echo '<div class="swiper-slide">
<figure class="product-image">
<img src="upload/'.$row['img'].'"
data-zoom-image="upload/'.$row['img'].'"
alt="'.$urun['baslik'].'" width="800" height="900">
</figure>
</div>';

$alt_img.='<div class="product-thumb swiper-slide">
<img src="upload/'.$row['img'].'"
alt="'.$urun['baslik'].'" width="800" height="900">
</div>';

}
}
?>

<?php if(!empty($urun['video'])){ echo ' <div class="swiper-slide"> <figure class="product-image"> <video style="height: 100%;width: 100%;" muted="false" onloadeddata="this.play();" autoplay="" playsinline="" webkit-playsinline="" loop=""> <source src="upload/'.$urun['video'].'" type="video/mp4" /> Your browser does not support the video tag. </video> </figure> </div>'; } $query = $db->query("SELECT * FROM urun_img WHERE urun_id = '{$urun['id']}' ", PDO::FETCH_ASSOC); if($query->rowCount()){ if(!empty($urun['video'])){ $alt_img.='<div class="product-thumb swiper-slide"><video style="height: 100%;width: 100%;" muted="" playsinline="" webkit-playsinline=""> <source src="upload/'.$urun['video'].'" type="video/mp4" /> Your browser does not support the video tag. </video> <i class="fa fa-play videoThumbIcon" aria-hidden="true"></i> </div>';} foreach($query as $row){ echo '<div class="swiper-slide" onclick="showImage(this)"> <figure class="product-image"> <img src="upload/'.$row['img'].'" data-zoom-image="upload/'.$row['img'].'" alt="'.$urun['baslik'].'" width="800" height="900"> </figure> </div>'; $alt_img.='<div class="product-thumb swiper-slide"> <img src="upload/'.$row['img'].'" alt="'.$urun['baslik'].'" width="800" height="900"> </div>'; } } ?> <script> function showImage(element) { var img = element.getElementsByTagName('img')[0]; var modal = document.createElement('div'); modal.classList.add('modal'); modal.innerHTML = '<img src="' + img.src + '" alt="' + img.alt + '" style="width:100%;height:auto">'; document.body.appendChild(modal); modal.addEventListener('click', function() {      document.body.removeChild(modal); }); } </script>

Temel değişiklikler şunlardır:

Onclick Özelliği eklendi: Onclick özelliği <div class="swiper-slide"> öğesine eklendi. Bu özellik, kullanıcı öğeye tıkladığında yürütülecek JavaScript işlevini belirtir.

ShowImage İşlevi oluşturuldu: ShowImage işlevi bir <script> etiketinde tanımlanır. Bu işlev, bir öğeyi parametre olarak alır ve bu öğe içindeki ilk görüntü öğesini (<img>) alır. Sınıf kipiyle yeni bir <div> öğesi oluşturur, kipin iç HTML'sini, kaynak ve tıklanan görüntüdeki alt metinle birlikte bir <img> öğesi olacak şekilde ayarlar ve kipi <body> öğesine ekler.

Modal Olay Dinleyicisi: Modal öğesine bir olay dinleyicisi eklenir. Modal tıklandığında kendisini DOM belge gövdesinden kaldırır.

Bu kod, sağladığınız örnekle aynı işlevselliği sağlar. Küçük resim resmine tıklamak artık resmin daha büyük bir versiyonunu kalıcı bir pencerede görüntüleyecektir.

Resime tıklandığı zaman büyümesi

Üye Girişi Yap