מדריך מלא: יצירת גלריית תמונות אינטראקטיבית עם JavaScript

גלריות תמונות אינטראקטיביות הן רכיב חיוני במגוון רחב של אתרי אינטרנט מודרניים. במדריך מקיף זה, תלמדו כיצד ליצור גלריית תמונות מרהיבה ואינטראקטיבית מאפס, תוך שימוש ב-HTML, CSS ו-JavaScript.

22:47 03/09/2024

מבוא

גלריית תמונות אינטראקטיבית היא רכיב חשוב במגוון רחב של אתרי אינטרנט, החל מתיקי עבודות של צלמים ועד לחנויות מקוונות. במדריך זה, נלמד כיצד ליצור גלריית תמונות אינטראקטיבית מאפס באמצעות HTML, CSS ו-JavaScript. הגלריה שלנו תכלול תכונות כגון ניווט בין תמונות, הגדלת תמונה נבחרת, ומעבר אוטומטי בין תמונות.

שלב 1: הכנת מבנה ה-HTML

נתחיל ביצירת מבנה ה-HTML הבסיסי לגלריה שלנו:

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>גלריית תמונות אינטראקטיבית</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="gallery-container">
        <div class="main-image">
            <img src="image1.jpg" alt="תמונה ראשית" id="mainImage">
        </div>
        <div class="thumbnails">
            <img src="image1.jpg" alt="תמונה ממוזערת 1" class="thumbnail active">
            <img src="image2.jpg" alt="תמונה ממוזערת 2" class="thumbnail">
            <img src="image3.jpg" alt="תמונה ממוזערת 3" class="thumbnail">
            <img src="image4.jpg" alt="תמונה ממוזערת 4" class="thumbnail">
            <img src="image5.jpg" alt="תמונה ממוזערת 5" class="thumbnail">
        </div>
        <div class="controls">
            <button id="prevBtn">הקודם</button>
            <button id="nextBtn">הבא</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

שלב 2: עיצוב הגלריה עם CSS

כעת נוסיף קובץ CSS כדי לעצב את הגלריה שלנו:

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.gallery-container {
    max-width: 800px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.main-image {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.main-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.thumbnails {
    display: flex;
    justify-content: center;
    padding: 10px;
    background-color: #f8f8f8;
}

.thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    margin: 0 5px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.thumbnail.active {
    border-color: #007bff;
}

.controls {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

שלב 3: הוספת פונקציונליות עם JavaScript

עכשיו נוסיף את הקוד JavaScript שיהפוך את הגלריה שלנו לאינטראקטיבית:

// בחירת אלמנטים
const mainImage = document.getElementById('mainImage');
const thumbnails = document.querySelectorAll('.thumbnail');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');

let currentIndex = 0;
const images = Array.from(thumbnails).map(thumb => thumb.src);

// פונקציה להצגת התמונה הנבחרת
function showImage(index) {
    mainImage.src = images[index];
    thumbnails.forEach((thumb, i) => {
        thumb.classList.toggle('active', i === index);
    });
}

// מעבר לתמונה הבאה
function nextImage() {
    currentIndex = (currentIndex + 1) % images.length;
    showImage(currentIndex);
}

// מעבר לתמונה הקודמת
function prevImage() {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    showImage(currentIndex);
}

// הוספת מאזיני אירועים לכפתורים
nextBtn.addEventListener('click', nextImage);
prevBtn.addEventListener('click', prevImage);

// הוספת מאזיני אירועים לתמונות הממוזערות
thumbnails.forEach((thumb, index) => {
    thumb.addEventListener('click', () => {
        currentIndex = index;
        showImage(currentIndex);
    });
});

// הגדלת התמונה בלחיצה
mainImage.addEventListener('click', () => {
    mainImage.classList.toggle('enlarged');
});

// מעבר אוטומטי בין תמונות
let intervalId = setInterval(nextImage, 5000);

// עצירת המעבר האוטומטי בעת מעבר עכבר מעל הגלריה
document.querySelector('.gallery-container').addEventListener('mouseenter', () => {
    clearInterval(intervalId);
});

// חידוש המעבר האוטומטי בעת יציאת העכבר מהגלריה
document.querySelector('.gallery-container').addEventListener('mouseleave', () => {
    intervalId = setInterval(nextImage, 5000);
});

// הצגת התמונה הראשונה בטעינת הדף
showImage(currentIndex);

שלב 4: הוספת תכונות מתקדמות

4.1 אנימציית מעבר בין תמונות

נוסיף אנימציית מעבר חלקה בין התמונות באמצעות CSS ו-JavaScript:

.main-image img {
    /* ... קוד קיים ... */
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.main-image img.fade-out {
    opacity: 0;
}

function showImage(index) {
    mainImage.classList.add('fade-out');
    setTimeout(() => {
        mainImage.src = images[index];
        mainImage.classList.remove('fade-out');
        thumbnails.forEach((thumb, i) => {
            thumb.classList.toggle('active', i === index);
        });
    }, 300);
}

4.2 תמיכה במקלדת

נוסיף תמיכה בניווט באמצעות מקשי החצים:

document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowRight') {
        prevImage(); // בגלל שהאתר בעברית, החץ הימני יעבור לתמונה הקודמת
    } else if (e.key === 'ArrowLeft') {
        nextImage(); // והחץ השמאלי לתמונה הבאה
    }
});

4.3 מצב מסך מלא

נוסיף אפשרות לצפייה בתמונות במסך מלא:

<button id="fullscreenBtn">מסך מלא</button>

const fullscreenBtn = document.getElementById('fullscreenBtn');

fullscreenBtn.addEventListener('click', toggleFullscreen);

function toggleFullscreen() {
    if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen();
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
    }
}

4.4 טעינה עצלה (Lazy Loading)

נשפר את ביצועי הגלריה על ידי טעינה עצלה של התמונות:

<img src="placeholder.jpg" data-src="image1.jpg" alt="תמונה ממוזערת 1" class="thumbnail active">
<img src="placeholder.jpg" data-src="image2.jpg" alt="תמונה ממוזערת 2" class="thumbnail">
<!-- ... -->

function lazyLoad() {
    thumbnails.forEach(thumb => {
        if (thumb.dataset.src) {
            thumb.src = thumb.dataset.src;
            delete thumb.dataset.src;
        }
    });
}

// טעינת התמונות כאשר הדף נטען במלואו
window.addEventListener('load', lazyLoad);

4.5 תמיכה במסכי מגע

נוסיף תמיכה בהחלקה על מסכי מגע:

let touchStartX = 0;
let touchEndX = 0;

document.querySelector('.gallery-container').addEventListener('touchstart', e => {
    touchStartX = e.changedTouches[0].screenX;
});

document.querySelector('.gallery-container').addEventListener('touchend', e => {
    touchEndX = e.changedTouches[0].screenX;
    handleSwipe();
});

function handleSwipe() {
    if (touchEndX < touchStartX) {
        nextImage();
    }
    if (touchEndX > touchStartX) {
        prevImage();
    }
}

סיכום

במדריך זה יצרנו גלריית תמונות אינטראקטיבית מתקדמת עם JavaScript. הגלריה כוללת תכונות כגון:

1. ניווט בין תמונות באמצעות כפתורים וחצי מקלדת

2. הגדלת תמונה נבחרת בלחיצה

3. מעבר אוטומטי בין תמונות

4. אנימציות מעבר חלקות

5. תצוגת מסך מלא

6. טעינה עצלה לשיפור ביצועים

7. תמיכה במסכי מגע

גלריה זו מספקת חוויית משתמש עשירה ויכולה להיות מותאמת בקלות לצרכים שונים. ניתן להרחיב אותה עוד יותר על ידי הוספת תכונות כגון זום לתמונות, אפשרויות שיתוף, או אינטגרציה עם API חיצוני לטעינת תמונות.

זכרו תמיד לבדוק את התאימות הצולבת בין דפדפנים שונים ולוודא שהגלריה מגיבה היטב במכשירים ניידים. בנוסף, שקלו להשתמש בכלים כמו Webpack או Parcel לניהול ואופטימיזציה של הקוד שלכם בפרויקטים גדולים יותר.

עם הידע שרכשתם במדריך זה, אתם מוכנים ליצור גלריות תמונות מרשימות ואינטראקטיביות לאתרי האינטרנט שלכם!