Turkcell ve Yandex, Yerli Arama Motoru ‘Yaani’ İçin Ortak Oldular

Hindistan’da Yenilenmiş Galaxy Note 7 Satılacağı İddiaları Yalanlandı

Apple, merakla beklenen yeni kampüsü Apple Park’ı Nisan’da açıyor

Microsoft, Windows 10’un ikinci büyük güncellemesinin de 2017 yılında geleceğini doğruladı

Popup Resim Galeri Modülü Yapımı

Hazır Site Bileşenleri 10 Aralık 2016
460 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
331 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

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

Vimeo Player API Demo

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

Yuvarlak Müzik Player

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

HTML ve CSS ile Dropdown Buton Yapımı

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

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

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

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

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

Filtreli Arama Tablo Yapımı

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

Filtreli Arama Sistemi Yapımı

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

Resimleri Popup Pencerede Gösterme

9 Aralık 2016
369 Görüntülenme
Bunlar da var!
​HTC One M10, Gümbür Gümbür Geliyor!

​HTC One M10, Gümbür Gümbür Geliyor!

22 Ocak 2016
148 Görüntülenme
Instagram yeni tasarımını devreye aldı

Instagram yeni tasarımını devreye aldı

11 Haziran 2015
161 Görüntülenme
Erkeklerin Kadınlarda En Çok Beğendiği 7 Detay

Erkeklerin Kadınlarda En Çok Beğendiği 7 Detay

25 Mayıs 2016
142 Görüntülenme