תוכן עניינים
ה-"Before and After Widget" (וידג'ט "לפני ואחרי") הוא כלי נפוץ בעיצוב אתרים, שמשמש להצגת שתי תמונות זו לצד זו באותו המקום, כאשר כל תמונה מייצגת מצב לפני ואחרי שינוי מסוים. למשל, זה יכול להיות שיפוץ בית, תיקון מוצר, שינויים בגיל או טיפולים קוסמטיים.
בדרך כלל, הווידג'ט מכיל סרגל ניווט שמאפשר למשתמש לגלול ימינה ושמאלה כדי לחשוף יותר מאחת התמונות ופחות מהשנייה, וכך להשוות ביניהן בקלות. זה כלי מאוד חזותי שעוזר למשתמשים לראות את ההבדלים בין שני המצבים באופן ברור וישיר.
JavaScript
<script>
var divisor = document.getElementById("divisor"),
handle = document.getElementById("handle"),
slider = document.getElementById("slider");
function moveDivisor() {
handle.style.left = slider.value+"%";
divisor.style.width = slider.value+"%";
}
window.onload = function() {
moveDivisor();
};
</script>
CSS
<style></style>
HTML
<div class="ba-container">
<div id="comparison">
<figure>
<div id="handle"></div>
<div id="divisor"></div>
</figure>
<input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">
</div>
</div>
כדי להשתמש בקוד של הווידג'ט "לפני ואחרי" באתר אחר, יש לעקוב אחר השלבים הבאים:
1. העתקת הקוד לעמוד החדש
יש להעתיק את הקוד – HTML, CSS ו-JavaScript – לעמוד באתר שלך. יש להכניס את הקוד במקום שבו תרצו שהווידג'ט יופיע.
2. עדכון קישורי התמונות
יש לעדכן את קישורי התמונות ב-CSS של הווידג'ט לתמונות שתרצו להציג.
בשביל לעשות את זה, צריך לשנות את הכתובות שנמצאות ב background-image במחלקות #divisor ו-figure.
לדוגמה:
figure {
background-image: url('כתובת_התמונה_לפני');
}
#divisor {
background-image: url('כתובת_התמונה_אחרי');
}
3. התאימו את הגדלים
אם גודל התמונות שלך שונה מגודל התמונה שבקוד המקורי, צריך להתאים את גדלי התמונות והווידג'ט ב-CSS. לדוגמה, אם התמונות שלך גדולות יותר או קטנות יותר, עדכן את תכונות ה-width, height ו-background-size בהתאם.
4. בדיקת תאימות עם האתר
בדקו שהווידג'ט מופיע ופועל כראוי באתר שלך. ייתכן שתצטרכו לבצע תיקונים קלים בקוד ה-CSS או ה-JavaScript כדי להתאים אותו לעיצוב ולפונקציונליות של האתר שלך.
5. הפעלת הסקריפט
ודאו שהסקריפט רץ כאשר הדף נטען. הקוד הנוכחי משתמש ב-window.onload כדי להפעיל את הפונקציה moveDivisor. אם באתר שלך יש סקריפטים אחרים המשתמשים באירוע onload, ייתכן שתצטרך לשלב אותם כדי למנוע קונפליקטים.
6. בדיקה ותיקונים
לאחר שתעביר את הקוד לאתר החדש, בדוק אותו כדי לראות שהכל פועל כשורה. בדוק במיוחד את התצוגה במכשירים שונים ובגדלי מסך שונים, כדי לוודא שהווידג'ט מותאם ופונקציונלי בכל המצבים.
