कैसे बनाया जाता है: टैब शैली छवि गैलरी

CSS और JavaScript के इस्तेमाल से टैब शैली छवि गैलरी कैसे बनाया जाता है सीखें。

टैब गैलरी बनाएं

पहला कदम - HTML जोड़ें:

<!-- 网格：四列 -->
<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>
<!-- 展开的图像容器 -->
<div class="container">
  <!-- 关闭图像 -->
  <span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
  <!-- 扩展图像 -->
  <img id="expandedImg" style="width:100%">
  <!-- 图像文本 -->
  <div id="imgtext"></div>
</div>

एक विशेष इमेज को एक्सपैंड करने के लिए इमेज का उपयोग करें।ग्रिड के अंदर के इमेज पर क्लिक करने के बाद, उस इमेज को ग्रिड के नीचे के कंटेनर में दिखाया जाएगा。

दूसरा कदम - CSS जोड़ें:

चार बगल इमेजें बनाएं और इमेज की शैली निर्धारित करें:

/* ग्रिड: चार समान बगल इमेजें */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}
/* ग्रिड के अंदर के इमेज की शैली */
.column img {
  opacity: 0.8;
  cursor: pointer;
}
.column img:hover {
  opacity: 1;
}
/* स्तम्भ के बाद के फ्लॉट को साफ करें */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* एक्सपैंड किए गए इमेज के कंटेनर (बंद करने वाले बटन और टेक्स्ट को स्थानांतरित करने के लिए स्थानीयकरण की जरूरत है) */
.container {
  position: relative;
  display: none;
}
/* एक्सपैंड किए गए इमेज के टेक्स्ट */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}
/* इमेज के अंदर बंद करने वाले बटन */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

तीसरा कदम - JavaScript जोड़ें:

function myFunction(imgs) {
  // एक्सपैंड किए गए इमेज प्राप्त करें
  var expandImg = document.getElementById("expandedImg");
  // इमेज टेक्स्ट प्राप्त करें
  var imgText = document.getElementById("imgtext");
  // एक्सपैंड किए गए इमेज में ग्रिड से क्लिक किए गए इमेज के उसी src का उपयोग करें
  expandImg.src = imgs.src;
  // एक्सपैंड इमेज के अंदर टेक्स्ट के लिए क्लिक किए गए इमेज के alt एट्रिब्यूट के मान का उपयोग करें
  imgText.innerHTML = imgs.alt;
  // दिखाने के लिए कंटेनर एलीमेंट (CSS से छुपा हुआ)
  expandImg.parentElement.style.display = "block";
}

स्वयं को प्रयोग करें