ਕਿਵੇਂ ਬਣਾਓ: ਮੋਡਲ ਫੋਟੋ ਲਾਇਬ੍ਰੇਰੀ

CSS ਅਤੇ JavaScript ਦੀ ਮਦਦ ਨਾਲ ਮੋਡਲ ਫੋਟੋ ਲਾਇਬ੍ਰੇਰੀ (ਲਾਈਟਬਾਕਸ) ਕਿਵੇਂ ਬਣਾਓ ਸਿੱਖੋ。

ਲਾਈਟਬਾਕਸ (ਲਾਈਟਬਾਕਸ) ਬਣਾਓ

ਹੇਠ ਦਾ ਉਦਾਹਰਣਮੋਡਲ (Modals)ਅਤੇਸਲਾਈਡਸ਼ੋਅਜ਼ (Slideshows)ਦੇ ਕੋਡ ਨੂੰ ਮਿਲਾ ਕੇ ਲਾਇਟਬਾਕ (lightbox) ਦਾ ਪ੍ਰਭਾਵ ਬਣਾਓ (create effect).

ਪਹਿਲਾ ਕਦਮ - ਐੱਚਟੀਐੱਮਐੱਲ ਜੋੜੋ:

<!-- ਲਾਇਟਬਾਕ ਖੋਲ੍ਹਣ ਲਈ ਇਮੇਜ਼ -->
<div class="row">
  <div class="column">
    <img src="img1.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
  </div>
  <div class="column">
    <img src="img2.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow">
  </div>
  <div class="column">
    <img src="img3.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow">
  </div>
  <div class="column">
    <img src="img4.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow">
  </div>
</div>
<!-- ਮੋਡਲ ਫੈਨਰ/ਲਾਇਟਬਾਕ -->
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">×</span>
  <div class="modal-content">
    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="img1_wide.jpg" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="img2_wide.jpg" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="img3_wide.jpg" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="img4_wide.jpg" style="width:100%">
    </div>
    <!-- ਅਗਲਾ/ਪਿਛਲਾ ਕੰਟਰੋਲ -->
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>
    <!-- 标题文本 -->
    <div class="caption-container">
      <p id="caption"></p>
    </div>
    <!-- 缩略图图像控件 -->
    <div class="column">
      <img class="demo" src="img1.jpg" onclick="currentSlide(1)" alt="Nature">
    </div>
    <div class="column">
      <img class="demo" src="img2.jpg" onclick="currentSlide(2)" alt="Snow">
    </div>
    <div class="column">
      <img class="demo" src="img3.jpg" onclick="currentSlide(3)" alt="Mountains">
    </div>
    <div class="column">
      <img class="demo" src="img4.jpg" onclick="currentSlide(4)" alt="Lights">
    </div>
  </div>
</div>

第二步 - 添加 CSS：

.row > .column {
  padding: 0 8px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* 创建四个并排的相等列 */
.column {
  float: left;
  width: 25%;
}
/* 模态框（背景） */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}
/* 模态内容 */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}
/* 关闭按钮 */
.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;
}
/* ਅਗਲਾ/ਪਿਛਲਾ ਬਟਨ */
.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;
}
/* 'ਅਗਲਾ ਬਟਨ' ਨੂੰ ਦੱਖਣੀ ਤਰਫ ਰਖੋ */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* ਮਾਉਸ ਹੋਵਰ ਉੱਤੇ, ਕੁਝ ਪਾਰਦਰਸ਼ਤਾ ਵਾਲਾ ਕਾਲਾ ਪਿੱਛੋਗਰੂਪ ਜੋੜੋ */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
/* ਸੰਖਿਆ ਟੈਕਸਟ (1/3 ਆਦਿ) */
.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);
}

ਕਦਮ 3 - ਜਾਵਾਸਕ੍ਰਿਪਟ ਜੋੜੋ:

<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>

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਸਬੰਧਤ ਪੰਨੀ

ਟੂਰੀਅਲ:ਕਿਵੇਂ ਮੋਡਲ ਬਣਾਓ

ਟੂਰੀਅਲ:ਕਿਵੇਂ ਸਲਾਈਡ ਬੇਲਟ ਬਣਾਓ