8 października 2020

Galeria lightbox bez jQuery

Kategoria: Programowanie
Tagi: dla profesjonalistów,
Autor: Paweł Mansfeld

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ę lighboxa. 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:

Przykład Lightbox

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.

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 jQuery.

Źródła

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

Oceń artykuł na temat: Galeria lightbox bez jQuery
Średnia : 4.8 , Maksymalnie : 5 , Głosów : 4


 

Odpowiedz lub skomentuj

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *


 

Wykryto brak połączenia z Internetem.