کی طرح بنایا جائے: مودل تصویر کا گالری

CSS اور JavaScript کا استعمال سے مودل تصویر کا گالری (لائٹ بیکس) بنانے سیکھنے کا معلومات

لائٹ باکس (لائٹ ڈبلیو) بنائیں

مثال میں دکھا جائے گاموڈل (Modals)واسلایدها (Slideshows)کد به کد دیگر متصل می‌شود تا اثر جعبه نما (lightbox) ایجاد شود.

قدم اول - اضافه کردن HTML:

<!-- تصاویر برای باز کردن جعبه نما -->
<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="ناتر">
    </div>
    <div class="column">
      <img class="demo" src="img2.jpg" onclick="currentSlide(2)" alt="بلاک">
    </div>
    <div class="column">
      <img class="demo" src="img3.jpg" onclick="currentSlide(3)" alt="پائینٹس">
    </div>
    <div class="column">
      <img class="demo" src="img4.jpg" onclick="currentSlide(4)" alt="ایلمنٹ">
    </div>
  </div>
</div>

دوسری قدم - سی ایس ایس اضافہ کریں:

.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);
}

تیسری قدم - جاوااسکریپٹ کا اضافہ:

<script>
// اپن موڈل بکسی کا کاچلنا
function openModal() {
  document.getElementById("myModal").style.display = "block";
}
document.getElementById("myModal").style.display = "block";
// بستن جعبه پویا
  function closeModal() {
}
document.getElementById("myModal").style.display = "none";
var slideIndex = 1;
showSlides(slideIndex);
// کنترلرهای بعدی/قبلی
  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");
  اگر (n > slides.length) {slideIndex = 1}
  اگر (n < 1) {slideIndex = slides.length}
  برای (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  برای (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>

دست خود را امتحان کنید

صفحات مرتبط

تدریس:چگونه مدل پویا ایجاد کنید

تدریس:چگونه اسلاید پویا ایجاد کنید