Πώς να δημιουργήσετε: Βιβλιοθήκη μοτίβων εικόνων

Εκμάθηση της χρήσης CSS και JavaScript για τη δημιουργία βιβλιοθήκης μοτίβων εικόνων (φωτοθήκη).

Δημιουργία φωτοθήκης

Το παρακάτω παράδειγμα θαΜοτίβα κουτιών (Modals)καιΠροβολές (Slideshows)Η σύνδεση του κώδικα δημιουργεί το εφέ καρτρέλας (lightbox).

Βήμα 1 - Προσθήκη 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>
    <!-- Ελέγχος εικόνας εικόνας θumbnάλων -->
    <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>

第二步 - Προσθήκη 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);
}

Τρίτο βήμα - Προσθήκη JavaScript:

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

δοκιμάστε το προσωπικά

σχετικές σελίδες

Εκμάθηση:πώς να δημιουργήσετε μοντέλο

Εκμάθηση:πώς να δημιουργήσετε παρουσίαση