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

Popup Resim Galeri Modülü Yapımı

Hazır Site Bileşenleri 10 Aralık 2016
387 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
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
272 Görüntülenme
JavaScript İlerleme Çubuğu ( Progress Bar ) Yapımı

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

18 Aralık 2016
407 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
375 Görüntülenme
Resimleri Popup Pencerede Gösterme

Resimleri Popup Pencerede Gösterme

9 Aralık 2016
308 Görüntülenme
Bunlar da var!
Angry Birds filminin ilk fragmanı yayınlandı

Angry Birds filminin ilk fragmanı yayınlandı

24 Eylül 2015
136 Görüntülenme
Uygun Fiyatlı LG K Serisinin Yeni Üyesi Yolda

Uygun Fiyatlı LG K Serisinin Yeni Üyesi Yolda

30 Haziran 2016
200 Görüntülenme
iPhone SE’nin en önemli 5 eksikliği!

iPhone SE’nin en önemli 5 eksikliği!

29 Mart 2016
156 Görüntülenme