HTML CSS ve JavaScript İle Resim Sekme Galerisi Yapımı..

ByESiNTi · 29 Tem 2021

HTML CSS ve JavaScript kodları İle Resim Sekme Galerisi Yapımını göstermek istiyorum.Bu kodlarla web sitenize harika modüller oluşturabilirsiniz..

Resimdeki ,Sekme Galerisi ,Tek parça olarak,HTML ,CSS ve JavaScript kodlarını linkten indirebilirsiniz..

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Sekme Galerisi Oluşturun

Adım 1) HTML'yi ekleyin:

Kod:

<!-- The grid: four columns -->
<div class="row">
  <div class="column">
    <img src="img_nature.jpg" alt="Nature" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="img_lights.jpg" alt="Lights" onclick="myFunction(this);">
  </div>
</div>

<!-- The expanding image container -->
<div class="container">
  <!-- Close the image -->
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>

  <!-- Expanded image -->
  <img id="expandedImg" style="width:100%">

  <!-- Image text -->
  <div id="imgtext"></div>
</div>

Belirli bir resmi genişletmek için resimleri kullanın. Sütunun içinde tıklanan görüntü, sütunların altındaki bir kapta gösterilir.

Adım 2) CSS'yi ekleyin:

Dört sütun oluşturun ve resimlere stil verin:

Kod:

/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}