MultiFlex-2 Web Site Tasarımı

Monkeys Web Site Tasarımı

Lazy Days Web Site Tasarımı

In a Pickle Web Site Tasarımı

Resimleri Popup Pencerede Gösterme

Hazır Site Bileşenleri Cuma Aralık 9th, 2016
507 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

Salı Ocak 17th, 2017
1.624 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

Salı Ocak 17th, 2017
636 Görüntülenme
Vimeo Player API Demo

Vimeo Player API Demo

Salı Ocak 17th, 2017
1.365 Görüntülenme
Yuvarlak Müzik Player

Yuvarlak Müzik Player

Salı Ocak 17th, 2017
1.659 Görüntülenme
HTML ve CSS ile Dropdown Buton Yapımı

HTML ve CSS ile Dropdown Buton Yapımı

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

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

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

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

Pazar Aralık 18th, 2016
597 Görüntülenme
Filtreli Arama Tablo Yapımı

Filtreli Arama Tablo Yapımı

Cuma Aralık 16th, 2016
549 Görüntülenme
Filtreli Arama Sistemi Yapımı

Filtreli Arama Sistemi Yapımı

Pazar Aralık 11th, 2016
567 Görüntülenme
Popup Resim Galeri Modülü Yapımı

Popup Resim Galeri Modülü Yapımı

Cumartesi Aralık 10th, 2016
639 Görüntülenme
Bunlar da var!
İşte Huawei P8 ve P8 Max’ın tanıtım videoları

İşte Huawei P8 ve P8 Max’ın tanıtım videoları

Çarşamba Nisan 15th, 2015
246 Görüntülenme
Köpeği Kandıran Adam [Video]

Köpeği Kandıran Adam [Video]

Cumartesi Kasım 21st, 2015
230 Görüntülenme
Traditionalist Web Site Tasarımı

Traditionalist Web Site Tasarımı

Perşembe Nisan 20th, 2017
45 Görüntülenme
Türkçe – UTF Çevirici Scripti

Türkçe – UTF Çevirici Scripti

Perşembe Haziran 11th, 2015
367 Görüntülenme
Toyota sürücüsüz otomobilini trafikte test etmeye başladı

Toyota sürücüsüz otomobilini trafikte test etmeye başladı

Cuma Ekim 9th, 2015
195 Görüntülenme
Yandexin trafik yoğunluğu servisi Antalyaya açıldı

Yandexin trafik yoğunluğu servisi Antalyaya açıldı

Perşembe Eylül 17th, 2015
287 Görüntülenme
GoDaddy’nin CTO’su Elissa Murphy Google’a katılıyor

GoDaddy’nin CTO’su Elissa Murphy Google’a katılıyor

Pazartesi Nisan 18th, 2016
232 Görüntülenme