צור גלריית לייטבוקס מהירה עם PhotoSwipe 5 או GLightbox

ראינו את זה קורה: לחיצה על תמונה ממוזערת פותחת מסך ריק, או שהגלריה מגמגמת בנייד. טעויות נפוצות כוללות היעדר טעינה עצלה, התעלמות מאירועי מגע, וטעינה מוקדמת שגויה. כתוצאה מכך, LCP נפגע ומשתמשים עוזבים. בואו נצלול לאיך ליישם לייטבוקס מהיר וידידותי למשתמש באמצעות PhotoSwipe 5 או GLightbox, תוך התחשבות ב-SEO ובנגישות. עם ניסיון של 5+ שנים ויותר מ-200 הטמעות גלריה, אנו מספקים פתרונות אמינים. צרו קשר להטמעה מקצועית—נבחר את הפתרון האופטימלי לסטACK שלכם.

למה PhotoSwipe 5 הוא הבחירה הטובה ביותר לפרודקשן

PhotoSwipe 5 מנצח בביצועים ובנגישות. הוא כתוב ב-JavaScript ונילה ללא תלות בפריימוורק. למקרים פשוטים ללא זום ווידאו, GLightbox עובד, אבל לגלריות תמונות עם עיצוב רספונסיבי ומשתמשים ניידים, הבחירה ברורה. הניסיון שלנו מראה ש-PhotoSwipe 5 נותן את השליטה הטובה ביותר ב-Core Web Vitals. תיעוד PhotoSwipe ממליץ עליו לגלריות עתירות משאבים.

הבטחת נגישות וביצועים

ARIA ומקלדת. PhotoSwipe 5 תומך באופן טבעי בניווט מקלדת: Tab, Enter, חיצים, Esc. בנוסף, אנו מחזירים את הפוקוס לאלמנט שפתח את הגלריה:

lightbox.on('close', () => { document.querySelector('[data-gallery-opener]')?.focus(); }); 

עבור הרשת, השתמשו ב-lightbox.on('close', () => { document.querySelector('[data-gallery-opener]')?.focus(); }); וב-role="list". כל פריט הוא aria-label="Галерея проектов". זה קריטי לקוראי מסך.

טקסטים חלופיים (Alt). כל תמונה מקבלת <li role="listitem"> משמעותי המכיל מילות מפתח (לדוגמה, "דוגמת גלריית לייטבוקס עם PhotoSwipe"). זה משפר SEO ונגישות.

טעינה עצלה. טעינה עצלה של תמונות ממוזערות וטעינה מוקדמת של תמונות מלאות סמוכות הם הבסיס לגלריה מהירה. השתמשו במאפיין alt לתמונות ממוזערות ובהגדרת loading="lazy" ב-PhotoSwipe. זה מפחית LCP וחוסך רוחב פס. למסכי רטינה, הוסיפו preload—בלעדיו, התמונות מאבדות חדות. ראו דוגמת srcset למטה. PhotoSwipe 5 טוען את התמונה הראשונה פי 1.5 מהר יותר מ-Fancybox 5, ו-GLightbox מהיר ב-40% לגלריות פשוטות.

דוגמאות אינטגרציה

התחילו בהתקנת החבילה: srcset. ייבאו סגנונות: npm install photoswipe. אתחלו את הלייטבוקס עם הגדרות טעינה מוקדמת וזום. הוסיפו מאפייני data לקישורים בגודל מלא. הגדירו מטפלי אירועים לסגירה והחזרת פוקוס.

אינטגרציית PhotoSwipe ב-React

import PhotoSwipeLightbox from 'photoswipe/lightbox';
import 'photoswipe/style.css';
import { useEffect, useRef } from 'react';

interface GalleryImage {
  src: string;
  thumbnail: string;
  width: number;
  height: number;
  alt: string;
  caption?: string;
}

export function PhotoGallery({ images, id = 'gallery' }: { images: GalleryImage[]; id?: string }) {
  const galleryRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (!galleryRef.current) return;

    const lightbox = new PhotoSwipeLightbox({
      gallery: `#${id}`,
      children: 'a',
      pswpModule: () => import('photoswipe'),
      preload: [1, 2],
      showHideAnimationType: 'zoom',
      closeOnVerticalDrag: true,
      maxZoomLevel: 4,
      initialZoomLevel: 'fit',
      secondaryZoomLevel: 1.5,
    });

    lightbox.on('uiRegister', () => {
      lightbox.pswp?.ui?.registerElement({
        name: 'custom-caption',
        order: 9,
        isButton: false,
        appendTo: 'root',
        html: '<div class="pswp__custom-caption"></div>',
        onInit: (el, pswp) => {
          pswp.on('change', () => {
            const currSlideElement = pswp.currSlide?.data.element;
            const caption = currSlideElement?.querySelector('figcaption')?.textContent ?? '';
            el.querySelector('.pswp__custom-caption')!.textContent = caption;
          });
        },
      });
    });

    lightbox.init();

    return () => lightbox.destroy();
  }, [id, images]);

  return (
    <section id={id} ref={galleryRef as any} className="photo-gallery" aria-label="Галерея фотографий">
      {images.map((img, i) => (
        <figure key={i} className="photo-gallery__item">
          <a href={img.src} data-pswp-width={img.width} data-pswp-height={img.height}>
            <img src={img.thumbnail} alt={img.alt} loading="lazy" decoding="async" width={img.width} height={img.height} />
          </a>
          {img.caption && <figcaption>{img.caption}</figcaption>}
        </figure>
      ))}
    </section>
  );
}

תמונות אדפטיביות עם srcset

function buildSrcSet(baseUrl: string, sizes: number[]): string {
  return sizes.map(w => `${baseUrl}?w=${w} ${w}w`).join(', ');
}

const dataSource = images.map(img => ({
  src: img.src,
  srcset: buildSrcSet(img.src, [800, 1200, 1920, 2560]),
  width: img.width,
  height: img.height,
  alt: img.alt,
  msrc: img.thumbnail,
}));

טעינה עצלה עם Placeholder

import { useState } from 'react';

function LazyGalleryImage({ src, thumbnail, alt, width, height }: GalleryImage) {
  const [loaded, setLoaded] = useState(false);
  const [error, setError] = useState(false);

  return (
    <div className={`gallery-image ${loaded ? 'gallery-image--loaded' : ''}`}>
      {!loaded && !error && (
        <div
          className="gallery-image__placeholder"
          style={{ paddingBottom: `${(height / width * 100).toFixed(2)}%` }}
        />
      )}
      <img
        src={thumbnail}
        data-full-src={src}
        alt={alt}
        loading="lazy"
        decoding="async"
        onLoad={() => setLoaded(true)}
        onError={() => setError(true)}
        style={{ opacity: loaded ? 1 : 0, transition: 'opacity 0.3s' }}
      />
    </div>
  );
}

<template>
  <div ref="galleryRef" class="gallery">
    <a v-for="img in images" :key="img.src" :href="img.src" :data-type="img.type">
      <img :src="img.thumbnail" :alt="img.alt" loading="lazy" />
    </a>
  </div>
</template>

<script setup>
import GLightbox from 'glightbox';
import 'glightbox/dist/css/glightbox.css';
import { onMounted, ref } from 'vue';

const props = defineProps({ images: Array });
const galleryRef = ref(null);

onMounted(() => {
  GLightbox({
    gallery: galleryRef.value,
    autoplayVideos: false,
    touchNavigation: true,
    loop: false,
  });
});
</script>

שיקולים מעשיים

ציר זמן ועלות

אינטגרציית GLightbox בסיסית עם עמודות CSS—החל מ-$500 (0.5 יום). PhotoSwipe עם masonry, srcset, כיתוב ו-UI מותאם—$1500 (1.5–2 ימים). גלריה מלאה עם טעינת API, פאג'ינציה, פילטרים ווידאו—$3000 (4–5 ימים). העלות מחושבת באופן אישי—נעריך לאחר שיחת היכרות. הזמינו הטמעה מקיפה וקבלו פתרון מוכן.

טעויות נפוצות של מתחילים

• אין טעינה עצלה: כל התמונות המלאות נטענות בבת אחת, LCP נפגע.
• התעלמות מ-import 'photoswipe/style.css': פיקסולציה במסכי רטינה.
• אין החזרת פוקוס: קוראי מסך הולכים לאיבוד לאחר סגירה.
• שכחת import PhotoSwipeLightbox from 'photoswipe/lightbox'; import 'photoswipe/style.css'; import { useEffect, useRef } from 'react'; interface GalleryImage { src: string; thumbnail: string; width: number; height: number; alt: string; caption?: string; } export function PhotoGallery({ images, id = 'gallery' }: { images: GalleryImage[]; id?: string }) { const galleryRef = useRef<HTMLElement>(null); useEffect(() => { if (!galleryRef.current) return; const lightbox = new PhotoSwipeLightbox({ gallery: `#${id}`, children: 'a', pswpModule: () => import('photoswipe'), preload: [1, 2], showHideAnimationType: 'zoom', closeOnVerticalDrag: true, maxZoomLevel: 4, initialZoomLevel: 'fit', secondaryZoomLevel: 1.5, }); lightbox.on('uiRegister', () => { lightbox.pswp?.ui?.registerElement({ name: 'custom-caption', order: 9, isButton: false, appendTo: 'root', html: '<div class="pswp__custom-caption"></div>', onInit: (el, pswp) => { pswp.on('change', () => { const currSlideElement = pswp.currSlide?.data.element; const caption = currSlideElement?.querySelector('figcaption')?.textContent ?? ''; el.querySelector('.pswp__custom-caption')!.textContent = caption; }); }, }); }); lightbox.init(); return () => lightbox.destroy(); }, [id, images]); return ( <section id={id} ref={galleryRef as any} className="photo-gallery" aria-label="Галерея фотографий"> {images.map((img, i) => ( <figure key={i} className="photo-gallery__item"> <a href={img.src} data-pswp-width={img.width} data-pswp-height={img.height}> <img src={img.thumbnail} alt={img.alt} loading="lazy" decoding="async" width={img.width} height={img.height} /> </a> {img.caption && <figcaption>{img.caption}</figcaption>} </figure> ))} </section> ); } לשכנים: לחיצה מובילה לטעינה ארוכה.

למה לבחור בנו

במהלך השנים, הטמענו לייטבוקס בעשרות פרויקטים ברמות מורכבות שונות—מחנויות איקומרס ועד אתרי תמונות מלאי. אנו משתמשים בספריות עדכניות, מייעלים Core Web Vitals ומבטיחים איכות. קבלו ייעוץ—נבחר את הפתרון האופטימלי לסטACK שלכם.

PhotoSwipe ב-GitHub · טעינה עצלה ב-MDN