Cami Halısı Avrupada Lider Firma Gülseven Halı

Arçelik Güvenilir Servis Hizmetleri

Arçelik Buzdolabı Servisi

WordPress Eklentiye ait Klasör Dizin Adresi Öğrenebileceğiniz Kodlar

Resimleri Popup Pencerede Gösterme

Hazır Site Bileşenleri 9 Aralık 2016
309 Görüntülenme

Evet webinyo.com kullanıcıları daha önce html ve css kullanarak resimleri popup pencerede göstermek için gerekli kodları sizler ile paylaşmıştık. Bu konumuzda ise sitemizde bir resim galerisi olduğunu varsayalım bu resimlere tıklandığında popup olarak gösterebilmek için gerekli kodları sizler ile paylaşacağız. Gerekli kodlara ve demo’ya konu içerisinden ulaşabilirsiniz.

HTML Kodlarımız
<!-- Webinyo.COM -->
<!-- Popup Tetikle -->
<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">

<!-- Popup -->
<div id="myModal" class="modal">

  <!-- Kapat Butonu -->
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

  <!-- Popup İçerik ( Resim ) -->
  <img class="modal-content" id="img01">

  <!-- Popup Resim Yazısı -->
  <div id="caption"></div>
</div>
CSS Kodlarımız
/* Popupu Tetiklemek için Resim Style */
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* Popup ( Arkaplan ) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Popup İçerik (Resim) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Modal Resim Yazısı (Resim Metni) - Resim Olarak Aynı Genişlik */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Animasyon Ekleme - Popup Zoom */
.modal-content, #caption { 
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* Kapat Butonu */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Daha Küçük Ekranlarda% 100 Görüntü Genişliği */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

/* Webinyo.COM */
JavaScript Kodlarımız
/*
* Webinyo.COM
*/
// Popup Çağır
var modal = document.getElementById('myModal');

// Görüntüyü alın ve modal içine yerleştirin - "alt" metnini bir başlık olarak kullanın
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Kipi kapatan <span> öğesini edinin
var span = document.getElementsByClassName("close")[0];

// Kullanıcı <span> (x) düğmesini tıkladığında, modal
span.onclick = function() { 
  modal.style.display = "none";
}

webinyo-com-demo-resimleri-popup-pencerede-gosterme-html

Yorumlar

Henüz hiç yorum yapılmamış.

İlginizi Çekebilir
CSS only Müzik Player Elementi

CSS only Müzik Player Elementi

17 Ocak 2017
128 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

17 Ocak 2017
117 Görüntülenme
Vimeo Player API Demo

Vimeo Player API Demo

17 Ocak 2017
118 Görüntülenme
Yuvarlak Müzik Player

Yuvarlak Müzik Player

17 Ocak 2017
117 Görüntülenme
HTML ve CSS ile Dropdown Buton Yapımı

HTML ve CSS ile Dropdown Buton Yapımı

30 Aralık 2016
238 Görüntülenme
Mause Üzerine Gelince Ipucu ( Tooltip ) Sistemi Yapımı

Mause Üzerine Gelince Ipucu ( Tooltip ) Sistemi Yapımı

24 Aralık 2016
273 Görüntülenme
JavaScript İlerleme Çubuğu ( Progress Bar ) Yapımı

JavaScript İlerleme Çubuğu ( Progress Bar ) Yapımı

18 Aralık 2016
408 Görüntülenme
Filtreli Arama Tablo Yapımı

Filtreli Arama Tablo Yapımı

16 Aralık 2016
339 Görüntülenme
Filtreli Arama Sistemi Yapımı

Filtreli Arama Sistemi Yapımı

11 Aralık 2016
376 Görüntülenme
Popup Resim Galeri Modülü Yapımı

Popup Resim Galeri Modülü Yapımı

10 Aralık 2016
387 Görüntülenme
Bunlar da var!
Boyalı Matkap Çalıştırılırsa [Video]

Boyalı Matkap Çalıştırılırsa [Video]

22 Ocak 2016
123 Görüntülenme
Sıvı ile Yapılmış 10 Şaşırtıcı Deney

Sıvı ile Yapılmış 10 Şaşırtıcı Deney

30 Ağustos 2015
130 Görüntülenme
Çamaşır Makinesine Kamera Konulursa [Video]

Çamaşır Makinesine Kamera Konulursa [Video]

14 Ocak 2016
155 Görüntülenme