Korzystanie z funkcji galerii

Ten przewodnik zmienia świeżą instalację w bogatszą galerię produktu: hover zoom i lightbox na każdym produkcie oraz wyróżnione wideo na produktach, które je mają.

1. Włącz zoom i lightbox

Otwórz menu Reel i włącz hover zoom oraz lightbox. Działają na każdej karcie pojedynczego produktu z galerią — bez konfiguracji per produkt. Ustaw siłę zoomu kontrolką na żywo, aż powiększenie będzie pasować do Twoich rozmiarów obrazów, a jeśli większość ruchu jest mobilna, włącz pomiń hover zoom na urządzeniach dotykowych.

2. Dodaj wyróżnione wideo do produktu

Zdecyduj, gdzie mają pojawiać się wideo, ustawieniem pozycja wideo (po galerii lub przed podsumowaniem). Następnie na produkcie ustaw meta _reel_video_url na swoje wideo:

• Plik self-hosted (.mp4, .m4v, .webm, .ogv) odtwarza się w natywnym playerze WordPress.
• Adres oEmbed (YouTube, Vimeo i podobne) jest osadzany automatycznie.

Opcjonalnie ustaw _reel_video_title dla nagłówka per produkt, w przeciwnym razie użyte zostaną domyślny nagłówek i wstęp z ustawień.

3. Sprawdź na karcie produktu

Otwórz produkt z galerią i wideo:

• Najedź na obraz galerii — powiększa się w ramce.
• Kliknij (lub naciśnij Enter/Spację) obraz — lightbox otwiera się na pełnym ekranie.
• Wideo pojawia się w ramce 16:9 w wybranej pozycji.

Umieszczanie wideo poza galerią

Aby pokazać wideo gdzie indziej — w zakładce, długim opisie, własnym układzie — użyj shortcode’u lub bloku zamiast polegać na pozycji w galerii:

[reel_video]

Blok Reel: Featured video daje ten sam wynik w edytorze bloków. Oba renderują wideo bieżącego produktu w tej samej ramce rezerwującej miejsce, więc nie ma przeskoku układu, gdziekolwiek je umieścisz.

Zachowanie lightboxa dla klawiatury i czytnika ekranu

Lightbox jest w pełni obsługiwany z klawiatury:

• Otwórz go Enterem lub Spacją na obrazie galerii z fokusem.
• Fokus jest uwięziony na kontrolce zamknięcia, gdy lightbox jest otwarty.
• Escape lub kliknięcie w tło zamyka go, a fokus wraca na obraz, z którego go otworzyłeś.
• Dialog jest nazwany, a kontrolka otwarcia używa Twojej własnej dostępnej etykiety, więc technologie wspomagające ogłaszają oba jasno.
• Przy włączonym podpisie z tekstu alternatywnego pokazywany jest tekst alt obrazu jako podpis.

Uwagi o wydajności

Reel dostarcza jeden mały plik vanilla JavaScript, odroczony i ładowany w stopce, tylko na karcie pojedynczego produktu — bez jQuery. Lightbox to nakładka fixed startująca jako ukryta, transform zoomu jest przycięty do ramki galerii, a wideo siedzi w ramce o stałych proporcjach, która rezerwuje miejsce przed załadowaniem. Razem oznacza to, że Reel dodaje funkcje galerii bez Cumulative Layout Shift, a stylowanie respektuje prefers-reduced-motion.