Huawei Mate 10, QHD Ekran, Çift Leica Kamera ile Geliyor

Galaxy A5 (2018) ve A7 (2018) Modellerinde Çift Ön Kamera Mevcut

Huawei Mate 10 Etkinliğini Canlı Olarak Buradan İzleyebilirsiniz

Sony Xperia XZ1 ve XZ1 Compact ilk güncellemelerini aldı

Popup Resim Galeri Modülü Yapımı

  • Hazır Site Bileşenleri
  • Savaş Dersim Çelik
  • Cumartesi Aralık 10th, 2016
  • 1.071 Görüntülenme
  • HTML, CSS, Javascript
  • Responsive

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ış.

Benzer İçerikler