Mr. Techie Web Site Tasarımı

Level 2.0 Web Site Tasarımı

Health Care Web Site Tasarımı

Animals & Pets Web Site Tasarımı

Popup Resim Galeri Modülü Yapımı

Hazır Site Bileşenleri Cumartesi Aralık 10th, 2016
654 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

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

Müzik Player | Audio Player

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

Vimeo Player API Demo

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

Yuvarlak Müzik Player

Salı Ocak 17th, 2017
1.686 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
464 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
484 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
610 Görüntülenme
Filtreli Arama Tablo Yapımı

Filtreli Arama Tablo Yapımı

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

Filtreli Arama Sistemi Yapımı

Pazar Aralık 11th, 2016
581 Görüntülenme
Resimleri Popup Pencerede Gösterme

Resimleri Popup Pencerede Gösterme

Cuma Aralık 9th, 2016
528 Görüntülenme
Bunlar da var!
Azulmedia 2.1 Web Site Tasarımı

Azulmedia 2.1 Web Site Tasarımı

Cumartesi Nisan 1st, 2017
81 Görüntülenme
HTC Butterfly 3’ün ilk tanıtım videosu yayınlandı

HTC Butterfly 3’ün ilk tanıtım videosu yayınlandı

Cumartesi Mayıs 16th, 2015
256 Görüntülenme