Türkiye Drone Ligi başlıyor

Artık Youtube’un da okulu var

Youtube Videolarını Arkadaşlarınızla Birlikte Canlı İzleyin!

28. Yılını Kutlayan WWW.’nin Yaratıcısından Ciddi Uyarı!

Popup Resim Galeri Modülü Yapımı

Hazır Site Bileşenleri 10 Aralık 2016
559 Görüntülenme

Web siteleriniz de kullanabileceğiniz bileşenleri dağıtmaya devam ederken bu konumuzda eğer bir galeri sistemi yapmayı düşünüyorsanız sade, kullanışlı ve responsive bir galeri modülüne ait kodları paylaşacağız. Gerekli kodlara konu içerisinden ulaşabilirsiniz veya sayfa altında yer alan demo butonunu kullanara ön izlemesine bakabilirsiniz.

webinyo-com-demo-popup-resim-galeri-modulu-yapimi-html

HTML Kodlarımız
<h2 style="text-align:center">Webinyo.COM Resim Galeri Modülü</h2>

<div class="row">
  <div class="column">
    <img src="http://webinyo.com/resimler/doga-1.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow slider">
  </div>
  <div class="column">
    <img src="http://webinyo.com/resimler/doga-2.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow slider">
  </div>
  <div class="column">
    <img src="http://webinyo.com/resimler/doga-3.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow slider">
  </div>
  <div class="column">
    <img src="http://webinyo.com/resimler/doga-4.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow slider">
  </div>
</div>

<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
        <img src="http://webinyo.com/resimler/doga-1.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
        <img src="http://webinyo.com/resimler/doga-2.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
        <img src="http://webinyo.com/resimler/doga-3.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
        <img src="http://webinyo.com/resimler/doga-4.jpg" style="width:100%" >
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>

    <div class="column">
      <img class="demo slider" src="http://webinyo.com/resimler/doga-1.jpg" onclick="currentSlide(1)" alt="Nature">
    </div>

    <div class="column">
      <img class="demo slider" src="http://webinyo.com/resimler/doga-2.jpg" onclick="currentSlide(2)" alt="Trolltunga">
    </div>

    <div class="column">
      <img class="demo slider" src="http://webinyo.com/resimler/doga-3.jpg" onclick="currentSlide(3)" alt="Mountains">
    </div>

    <div class="column">
      <img class="demo slider" src="http://webinyo.com/resimler/doga-4.jpg" onclick="currentSlide(4)" alt="Lights">
    </div>
  </div>
</div>

 

CSS Kodlarımız
.row > .column {
 padding-left: 5px;
 padding-right: 5px;
}

.row:after {
 content: "";
 display: table;
 clear: both;
}

.column {
 float: left;
 width: 24%;
}

/* Popup Arkaplanda */
.modal {
 display: none;
 position: fixed;
 z-index: 1;
 padding-top: 100px;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 background-color: black;
}

/* Popup İçerik */
.modal-content {
 position: relative;
 background-color: #fefefe;
 margin: auto;
 padding: 0;
 width: 90%;
 max-width: 1200px;
}

/* Kapat Butonu */
.close {
 color: white;
 position: absolute;
 top: 10px;
 right: 25px;
 font-size: 35px;
 font-weight: bold;
}

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

.mySlides {
 display: none;
}

/* Ileri Geri Butonları */
.prev,
.next {
 cursor: pointer;
 position: absolute;
 top: 50%;
 width: auto;
 padding: 16px;
 margin-top: -50px;
 color: white;
 font-weight: bold;
 font-size: 20px;
 transition: 0.6s ease;
 border-radius: 0 3px 3px 0;
 user-select: none;
 -webkit-user-select: none;
}

/* "Bir sonraki düğmeyi" sağa ekle */
.next {
 right: 0;
 border-radius: 3px 0 0 3px;
}

/* Fareyle üzerine gelin, biraz gören siyah arka plan rengi ekleyin */
.prev:hover,
.next:hover {
 background-color: rgba(0, 0, 0, 0.8);
}

/* Sayı metni (1/3 vb.) */
.numbertext {
 color: #f2f2f2;
 font-size: 12px;
 padding: 8px 12px;
 position: absolute;
 top: 0;
}

.caption-container {
 text-align: center;
 background-color: black;
 padding: 2px 16px;
 color: white;
}

img.demo {
 opacity: 0.6;
}

.active,
.demo:hover {
 opacity: 1;
}

img.hover-shadow {
 transition: 0.3s
}

.hover-shadow:hover {
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

.slider{
 width:100%;
 height:200px;
}
Javascript Kodlarımız
<script>
function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>

 

 

 

 

Yorumlar

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

İlginizi Çekebilir
CSS only Müzik Player Elementi

CSS only Müzik Player Elementi

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

Müzik Player | Audio Player

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

Vimeo Player API Demo

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

Yuvarlak Müzik Player

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

HTML ve CSS ile Dropdown Buton Yapımı

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

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

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

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

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

Filtreli Arama Tablo Yapımı

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

Filtreli Arama Sistemi Yapımı

11 Aralık 2016
508 Görüntülenme
Resimleri Popup Pencerede Gösterme

Resimleri Popup Pencerede Gösterme

9 Aralık 2016
436 Görüntülenme
Bunlar da var!
Renkli Saç Boyası

Renkli Saç Boyası

6 Eylül 2016
186 Görüntülenme
Ayak Bakımında BEAUTYDERM

Ayak Bakımında BEAUTYDERM

17 Nisan 2016
220 Görüntülenme
Çanakkale’de Yeni Bir Canlı Türü Bulundu

Çanakkale’de Yeni Bir Canlı Türü Bulundu

30 Mart 2015
200 Görüntülenme
ESET, 2016’nın siber suç tahminlerini açıkladı

ESET, 2016’nın siber suç tahminlerini açıkladı

17 Şubat 2016
204 Görüntülenme
‘Karanlık Madde’nin Haritası Çizildi

‘Karanlık Madde’nin Haritası Çizildi

14 Nisan 2015
204 Görüntülenme