wmaraci reklam

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

2 Mesajlar 97 Okunma
wmaraci reklam

bertubaba bertubaba WM Aracı Kullanıcı
  • Üyelik 22.02.2024
  • Yaş/Cinsiyet 23 / E
  • Meslek Yazılım
  • Konum Karaman
  • Ad Soyad B** A**
  • Mesajlar 4
  • Beğeniler 0 / 0
  • Ticaret 0, (%0)

 

Merhabalar Kolay gelsin resime tıkladımı ekrana büyük resim hali gelicek şekilde bu kodu düzenleyebilirmisiniz aşşağıda bıraktığım resim gibi olacak

 149576-6649af6ba7d03.png

<?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>';

}
}
?>
 

 

İzler Kalır İzler Kalırsın
wmaraci
reklam

kodshop kodshop Anlatamıyorum Kullanıcı
  • Üyelik 22.02.2017
  • Yaş/Cinsiyet 26 / E
  • Meslek Blog Yazarı
  • Konum Eskişehir
  • Ad Soyad S** Ş**
  • Mesajlar 810
  • Beğeniler 166 / 165
  • Ticaret 0, (%0)
<?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.

 

 

BLOG : www.jdsezer.blogspot.com

wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al