Galeria lightbox bez jQuery

Niedawno publikowałem poradnik tworzenia efektu Lightbox w ramach Bootstrapa. Zaledwie po paru miesiącach muszę opublikować całkiem inne rozwiązanie. Ta sytuacja świetnie ilustruje jak szybko dochodzi do znacznych zmian w zakresie tworzenia stron internetowych – oczywiście, zakładając, że chcemy podążać za trendami i restrykcyjnymi wymogami wydajnościowymi.

W tym artykule pokażę jak szybko i skutecznie wdrożyć efekt Lightbox, który nie wymaga jQuery. Ponieważ podstawowa zasada programowania i inżynierii w ogóle brzmi „nie wymyślaj koła na nowo” posłużymy się gotowym, przetestowanym i w pełni niezawodnym rozwiązaniem opublikowanym na licencji MIT.

Glightbox – rozwiązanie w czystym JavaScript

Skrypt, który stał się już moim standardowym narzędziem i który chciałbym dziś zaprezentować to Glightbox autorstwa Biati Digital. Glightbox to napisany w Vanilla JS czyli bez zależności od innych bibliotek JS skrypt realizujący funkcję lightboxa. Funkcjonalnością lightbox nazywamy efekt „wyskakującego” zdjęcia, które możemy obejrzeć na pełnym bądź prawie pełnym ekranie. Zazwyczaj pojawia się kiedy klikamy na miniaturkę zdjęcia w galerii:

Choć Lightbox nie wydaje się trudnym do zakodowania efektem warto skorzystać z gotowego rozwiązania, które umożliwia wykorzystać gotowe opcje kiedy będzie ku temu potrzeba. Funkcjonalność Lightboxa powinna umożliwiać:

• łatwe i intuicyjne zamknięcie,
• przełączenie się pomiędzy zdjęciami w galerii wieloelementowej,
• odpowiednio skalować zdjęcie w różnych rozmiarach.

takie rzeczy muszą działać niezawodnie niezależnie od wielkości ekranu, orientacji czy wykorzystywanego urządzenia i przeglądarki.

Instalacja Glightbox

Pobieramy paczkę: https://github.com/biati-digital/glightbox

W folderze dist są potrzebne style i skrypt. W nagłówku dodajemy styl:

<link href="css/glightbox.min.css" rel="stylesheet">

A do stopki dodajemy skrypt:

<script src="js/glightbox.min.js"></script>

Zdjęcie wystarczy otoczyć linkiem do wersji większej rozmiarem bądź wersją oryginalną:

<a href="images/obrazek1.jpg" class="glightbox"><img src="images/obrazek1_miniatura.jpg"></a>

Wystarczy zatem dodać klasę glightbox do linku. Jak zwykle wszystko trzeba zainicjalizować:

<script>
   const lightbox = GLightbox({
   touchNavigation: true,
   loop: false,
   autoplayVideos: true
});
</script>

Możliwości konfiguracyjne

Glighbox pozwala dodawać opisy, wyświetlić całkiem inną stronę w lightboxie np. mapę a także dodawać inne elementy HTML. Chcąc grupować galerie wystarczy posłużyć się atrybutem data-gallery=”nazwa_galerii”.

Slajdy mogą się animować na kilka sposobów a także być zoomowalne. Ze wszystkimi możliwościami można się zapoznać na stronie dokumentacji, którą podlinkowałem w źródłach.

Zalety Glightbox

• bardzo mały rozmiar stylu (13,9 KB) i skryptu (51,6 KB) co po spakowaniu GZIP da nam ok 11KB.
• w pełni responsywny,
• duże możliwości dostosowania do własnych potrzeb,
• wsparcie video,
• wsparcie iframe oraz inline HTML,
• obsługa nawigacji za pomocą klawiatury,
• obsługa dotyku,
• efekt zoom,
• intuicyjne API,
• wsparcie wszystkich popularnych przeglądarek.

Podsumowanie

Glightbox to skuteczny skrypt do realizacji efektu lightbox. Brak zależności od jQuery umożliwia wykorzystać go na każdej stronie. Jest idealnym wyborem jeżeli chcemy zapewnić szybkość wczytywania strony i wydajność oraz osiągnąć 100 punktów w PageSpeed Insights. Jeżeli odchodzisz od jQuery być może przydatny okaże się kurs JavaScript od podstaw.

Glightbox wraz z zaprezentowanym ostatnio Splide.js będzie dobrą kombinacją dla stron tworzonych za pomocą najnowszej wersji Bootstrap 5, która jak pamiętamy pozbyła się zależności od tytułowej biblioteki.

Źródła

https://github.com/biati-digital/glightbox/blob/master/README.md