מבוא
Lightbox הוא שילוב של שני רכיבים, מודאל ותצוגת שקופיות. כאן תוכלו לבנות תיבת תאורה פשוטה באמצעות HTML, CSSו- JavaScript.
ה- lightbox יכלול במודל, שיופעל על ידי חלקם JavaScript, ממטפלי האירועים HTMLבסימון. תוכלו לבנות סגנונות שיספקו מצב CSSוהתנהגות עם JavaScript. בנוסף, תמצא בתחתית רשימת הפניות של השיטות בהן אתה משתמש ושאר פיסות שימושיות הקשורות להדרכה זו.
התמונות שלנו
התמונות בהן נשתמש מסופקות על ידי Pexels, גלריית תמונות בחינם המאפשרת לך לספק תמונות באיכות גבוהה לפרויקטים שלהם במהירות, בחינם ולרוב ללא צורך בייחוסים.
רק תראה לי את הקוד!
ניתן למצוא דוגמה חיה כאן - CodePen / Lightbox וטיוטה מלאה של הקוד נמצאת קרוב לתחתית.
שלב 1. הסימון
הסימון, או HTML, מספק את המבנה עבור תיבת האור.
× ❮ ❯ 
× שלב 2. סגנון עם CSS
זה CSSמספק לך מצבים שונים עבור ה- lightbox שלך. דברים כמו נראות, מיקום ואפקטים של רחף.
גיליון הסגנונות שלך צריך להיראות כך:
/* Here you provide a best practice's "reset", read more about it at the bottom! :) */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; } /* You define the style of our previews here, you are using flex to display the images "responsively". */ .preview { width: 100%; } .row { display: flex; flex-direction: row; justify-content: space-between; } .row > .col { padding: 0 8px; } .col { float: left; width: 25%; } /* Now you want to define what the lightbox will look like. Note that you have the display as none. You don't want it to show until the user clicks on one of the previews. You will change this display property with JavaScript below. */ .modal { display: none; position: fixed; z-index: 1; padding: 10px 62px 0px 62px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } .modal-content { position: relative; display: flex; flex-direction: column; justify-content: center; margin: auto; padding: 0 0 0 0; width: 80%; max-width: 1200px; } /* Same with your slides, you set the display to none, because you want to choose which one is shown at a time. */ .slide { display: none; } .image-slide { width: 100%; } .modal-preview { width: 100%; } .dots { display: flex; flex-direction: row; justify-content: space-between; } /* You want the previews a little transparent to show that they are "inactive". You then add an .active or :hover class to animate the selections for your user when they interact with your controls and clickable content. */ img.preview, img.modal-preview { opacity: 0.6; } img.active, .preview:hover, .modal-preview: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); } .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; } .previous, .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; } .previous:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); }שלב 3. JavaScript
עכשיו לעסקים! JavaScript שלך אמור להיראות כך:
// Initialize here and run showSlide() to give your lightbox a default state. let slideIndex = 1; showSlide(slideIndex); // You are providing the functionality for your clickable content, which is // your previews, dots, controls and the close button. function openLightbox() { document.getElementById('Lightbox').style.display = 'block'; } function closeLightbox() { document.getElementById('Lightbox').style.display = 'none'; }; // Note that you are assigning new values here to our slidIndex. function changeSlide(n) { showSlide(slideIndex += n); }; function toSlide(n) { showSlide(slideIndex = n); }; // This is your logic for the light box. It will decide which slide to show // and which dot is active. function showSlide(n) { const slides = document.getElementsByClassName('slide'); let modalPreviews = document.getElementsByClassName('modal-preview'); if (n > slides.length) { slideIndex = 1; }; if (n < 1) { slideIndex = slides.length; }; for (let i = 0; i < slides.length; i++) { slides[i].style.display = "none"; }; for (let i = 0; i < modalPreviews.length; i++) { modalPreviews[i].className = modalPreviews[i].className.replace(' active', ''); }; slides[slideIndex - 1].style.display = 'block'; modalPreviews[slideIndex - 1].className += ' active'; };וזה הכל! עכשיו שים את כל הקוד יחד. כעת אמורה להיות לך תיבת תאורה פונקציונלית.
כל הקוד
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; } .preview { width: 100%; } .row { display: flex; flex-direction: row; justify-content: space-between; } .row > .col { padding: 0 8px; } .col { float: left; width: 25%; } .modal { display: none; position: fixed; z-index: 1; padding: 10px 62px 0px 62px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } .modal-content { position: relative; display: flex; flex-direction: column; justify-content: center; margin: auto; padding: 0 0 0 0; width: 80%; max-width: 1200px; } .slide { display: none; } .image-slide { width: 100%; } .modal-preview { width: 100%; } .dots { display: flex; flex-direction: row; justify-content: space-between; } img.preview, img.modal-preview { opacity: 0.6; } img.active, .preview:hover, .modal-preview: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); } .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; } .previous, .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; } .previous:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } × ❮ ❯ let slideIndex = 1; showSlide(slideIndex); function openLightbox() { document.getElementById('Lightbox').style.display = 'block'; }; function closeLightbox() { document.getElementById('Lightbox').style.display = 'none'; }; function changeSlide(n) { showSlide(slideIndex += n); }; function toSlide(n) { showSlide(slideIndex = n); }; function showSlide(n) { const slides = document.getElementsByClassName('slide'); let modalPreviews = document.getElementsByClassName('modal-preview'); if (n > slides.length) { slideIndex = 1; }; if (n < 1) { slideIndex = slides.length; }; for (let i = 0; i < slides.length; i++) { slides[i].style.display = "none"; }; for (let i = 0; i < modalPreviews.length; i++) { modalPreviews[i].className = modalPreviews[i].className.replace(' active', ''); }; slides[slideIndex - 1].style.display = 'block'; modalPreviews[slideIndex - 1].className += ' active'; }; עוד מידע:
HTML
מודאל - חלון קופץ
מטפלים באירועים - מאפייני HTML שמאזינים לאירועי משתמשים.
ישות - מחרוזת המייצגת שרת שמור ב- HTML.
CSS
גודל התיבה: - מאפיין CSS3 השולט באופן שבו הדפדפן מעבד תוכן על בסיס גובה ורוחב.
Flex-box - טכנולוגיה חדשה המסייעת במיקום תוכן HTML בצורה אופנתית.
: רחף - בורר פסאודו המופעל כאשר משתמש מרחף מעל אלמנט כאשר מחלקה זו מוקצית לו.
JavaScript
let למשתנה עם טווח חסום.
const קבוע של טווח בלוקים.
getElementById () - שיטת מסמך המחזירה הפניה לאלמנט HTML.
getElementsByClassName () - שיטת מסמך המחזירה מערך הפניות ל- html עם מחלקות תואמות.
+ = - מפעיל הקצאה שיוסיף מספרים או שרשור מחרוזות.
אֶמְצָעִי:
דוגמה חיה - CodePen שמדגים את הקוד שלעיל.
אינטראקטיב Flex-Box - CodePen אינטראקטיבי המציג התנהגות Flex-box.
Pexels - גלריית תמונות חינם.
MDN - A great place for information about web stuff.
W3School - Lightbox - This code was inspired from here. Thanks W3Schools!