آموزش ساخت یک گالری تصویر با استفاده از جاوا اسکریپت: راهنمای گام به گام

ایجاد یک گالری تصویر تعاملی یکی از بهترین روش‌ها برای نمایش محتوای تصویری در وب‌سایت‌ها است. با استفاده از جاوا اسکریپت و DOM می‌توانید گالری‌های تصویر پویا و کاربرپسندی بسازید. در این مقاله، نحوه ساخت یک گالری تصویر ساده و تعاملی با استفاده از جاوا اسکریپت را گام به گام بررسی می‌کنیم و همچنین نکات مرتبط با سئو و بهینه‌سازی وب‌سایت را مرور می‌کنیم.

اهداف این مقاله:

• ساخت گالری تصاویر با جاوا اسکریپت و DOM

• نمایش تصاویر به صورت پویا با قابلیت کلیک برای مشاهده بزرگ‌تر

• بهینه‌سازی تجربه کاربری و سئو برای بهبود عملکرد

گام اول: ساختار HTML اولیه

ابتدا یک فایل HTML ساده ایجاد می‌کنیم که شامل ساختار گالری و مکانی برای نمایش تصویر بزرگ‌تر باشد.

< ! DOCTYPE html >
< html lang="fa" >
< head >
    < meta charset="UTF-8" >
    < meta name="viewport" content="width=device-width, initial-scale=1.0" >
    < title > گالری تصویر < / title >
    < style >
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        .gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .gallery img {
            width: 150px;
            height: 100px;
            cursor: pointer;
            border-radius: 5px;
            transition: transform 0.3s ease;
        }
        .gallery img:hover {
            transform: scale(1.05);
        }
        #large-image-container {
            margin-top: 20px;
            text-align: center;
        }
        #large-image {
            max-width: 100%;
            max-height: 400px;
            border-radius: 10px;
        }
    < / style >
< / head >
< body >
    < h1 > گالری تصاویر < / h1 >
    < div class="gallery" id="gallery" >
        
    < / div >

    < div id="large-image-container" >
        < img id="large-image" src="" alt="تصویر بزرگ" style="display: none;" >
    < / div >

    < script src="app.js" > < / script >
< / body >
< / html >

توضیحات HTML:

• یک بخش با کلاس gallery داریم که تصاویر کوچک (Thumbnail) در آن قرار خواهند گرفت.

• یک بخش دیگر برای نمایش تصویر بزرگ‌تر وجود دارد که در حالت اولیه خالی است و وقتی کاربر روی یکی از تصاویر کوچک کلیک کند، تصویر بزرگ در آن نمایش داده می‌شود.

گام دوم: نوشتن کد جاوااسکریپت

برای افزودن تصاویر کوچک به گالری و فعال کردن قابلیت نمایش تصویر بزرگ‌تر، از جاوا اسکریپت استفاده می‌کنیم. فایل app.js را ایجاد کنید و کد زیر را در آن قرار دهید:

گالری
const images = [
    { small: 'images/image1-small.jpg', large: 'images/image1-large.jpg' },
    { small: 'images/image2-small.jpg', large: 'images/image2-large.jpg' },
    { small: 'images/image3-small.jpg', large: 'images/image3-large.jpg' },
    { small: 'images/image4-small.jpg', large: 'images/image4-large.jpg' }
];

// دسترسی به عناصر صفحه
const gallery = document.getElementById('gallery');
const largeImage = document.getElementById('large-image');

// افزودن تصاویر کوچک به گالری
images.forEach(image => {
    const imgElement = document.createElement('img');
    imgElement.src = image.small;
    imgElement.alt = 'Thumbnail';
    imgElement.addEventListener('click', () => {
        showLargeImage(image.large);
    });
    gallery.appendChild(imgElement);
});

// نمایش تصویر بزرگ
function showLargeImage(imageSrc) {
    largeImage.src = imageSrc;
    largeImage.style.display = 'block';
}

توضیحات کد:

• آرایه images: شامل لیستی از تصاویر کوچک و بزرگ است که برای نمایش در گالری استفاده می‌شوند. در اینجا فرض می‌کنیم تصاویر کوچک و بزرگ در فولدر images قرار دارند.

• اضافه کردن تصاویر کوچک: برای هر تصویر در آرایه، یک عنصر جدید ایجاد می‌شود و به بخش گالری اضافه می‌گردد. این تصویر‌ها دارای رویداد کلیک هستند که هنگام کلیک، تصویر بزرگ مرتبط را نمایش می‌دهد.

• نمایش تصویر بزرگ: تابع showLargeImage تصویر بزرگ را به بخش large-image اضافه می‌کند و آن را نمایش می‌دهد.

گام سوم: افزودن انیمیشن و بهبود تجربه کاربری

برای بهبود تجربه کاربری، می‌توانیم چندین تغییر کوچک انجام دهیم. مثلا می‌توانیم تصویر بزرگ را به آرامی نمایش دهیم و وقتی تصویر تغییر می‌کند، انیمیشنی برای تغییر آن اجرا کنیم.

برای این کار، استایل‌های زیر را به CSS اضافه کنید:

#large-image {
    opacity: 0;
    transition: opacity 0.5s ease;
}
#large-image.show {
    opacity: 1;
}

سپس تابع جاوااسکریپت را به‌روزرسانی کنید تا از این کلاس‌ها استفاده کند:

function showLargeImage(imageSrc) {
    largeImage.style.opacity = 0; // ابتدا تصویر قبلی محو شود
    setTimeout(() => {
        largeImage.src = imageSrc;
        largeImage.style.display = 'block';
        largeImage.classList.add('show'); // تصویر جدید نمایش داده شود
    }, 500); // بعد از محو شدن تصویر قبلی
}

گام چهارم: نکات بهینه‌سازی و سئو

Lazy Loading تصاویر: از ویژگی loading="lazy" در تصاویر کوچک و بزرگ استفاده کنید تا تصاویر تنها زمانی بارگذاری شوند که به آن‌ها نیاز است. این کار باعث بهبود سرعت بارگذاری صفحه می‌شود.

< img src="images/image1-small.jpg" loading="lazy" alt="Thumbnail" >

استفاده از متن جایگزین (Alt Text): حتماً برای هر تصویر متن جایگزین (alt) مناسب تعیین کنید. این کار علاوه بر کمک به دسترسی‌پذیری، به بهبود سئوی تصاویر نیز کمک می‌کند.

بهینه‌سازی اندازه تصاویر: تصاویر کوچک و بزرگ باید بهینه شده باشند تا حجم فایل‌ها کم باشد و زمان بارگذاری سریع‌تر شود. استفاده از فرمت‌های مدرن‌تر مانند WebP می‌تواند به بهبود سرعت کمک کند.

کاهش دستکاری‌های DOM: دستکاری‌های مستقیم DOM می‌تواند روی عملکرد صفحه تأثیر منفی بگذارد. بهتر است تغییرات DOM را بهینه کنید و تا حد امکان تعداد دسترسی‌ها به آن را کاهش دهید.

استفاده از CDN: اگر تصاویر زیادی دارید، می‌توانید از یک CDN برای بارگذاری تصاویر استفاده کنید. این کار سرعت بارگذاری تصاویر را بهبود می‌بخشد.

نتیجه‌گیری

ساخت یک گالری تصویر با استفاده از جاوااسکریپت به شما این امکان را می‌دهد که تصاویر را به صورت پویا و تعاملی در صفحات وب نمایش دهید. با استفاده از تکنیک‌های بهینه‌سازی مانند Lazy Loading، بهینه‌سازی تصاویر و استفاده از متن جایگزین مناسب، می‌توانید عملکرد وب‌سایت را بهبود دهید و تجربه کاربری بهتری ارائه دهید. همچنین این نکات به بهبود رتبه‌بندی سایت شما در موتورهای جستجو مانند گوگل کمک می‌کنند.