2 stycznia 2020

Galeria w Bootstrapie 4 – tworzenie efektu Lightbox

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

Galeria w Bootstrapie 4 – tworzenie efektu Lightbox

Jeżeli chcemy stworzyć całą stronę za pomocą biblioteki Bootstrap, to w pewnym momencie ze zdziwieniem odkryjemy że Bootstrap nie ma i nigdy nie miał natywnego skryptu galerii zdjęć, a ściślej – czegoś w rodzaju Lighboxa. Oczywiście nic nie stoi na przeszkodzie aby napisać go sobie samodzielnie. Ale chwila, przecież nie po to wykorzystujemy Bootstrapa, by w pewnym momencie pisać skrypt od podstaw, tym bardziej o tak popularnej i oczywistej funkcjonalności.

Tutaj z pomocą przychodzi Ekko Lightbox lub Lightbox for Bootstrap. Jest to plugin autorstwa AshleyD i go wypróbowałem (pomyślnie wdrożyłem go w jednym z projektów), przetestowałem i… pomyślałem, że warto go polecić.

Plugin ten mocno bazuje na Bootstrapie, ponieważ sam lightbox otwiera się w elemencie modal. To bardzo dobre posunięcie, które powoduje, że skrypt samej galerii jest lekki i nie duplikujemy funkcjonalności.

Plugin można pobrać stąd:

https://github.com/ashleydw/lightbox/

Wystarczy wkleić styl, skrypt JS i dodać kilka linijek inicjalizujących galerię/lightboxa. Tak stworzona galeria Bootstrap będzie posiadać wiele opcji konfiguracyjnych, które możemy wykorzystać aby dostosować działanie Lightboxa dokładnie tak jak tego oczekujemy.

Jak stworzyć galerię za pomocą Bootstrapa?

Ściągamy paczkę, do której link podałem wyżej. W sekcji HEAD dodajemy skrypt CSS a do stopki dodajemy skrypt JS wspomnianej galerii. Jeżeli w tym punkcie coś jest niejasne, zachęcam do sprawdzenia kodu w przykładzie dołączonym do paczki ze skryptami.

Do każdego linku, dla którego ma się wyświetlić lightbox powiększający podlinkowane zdjęcie w większym rozmiarze, dodajemy dodatkowe atrybuty.

  • data-toggle=”lightbox” – odpowiedzialny za wyświetlenie się lightboxa,
  • data-gallery=”gallery” – dzięki temu możemy grupować kilka galerii na jednej podstronie. To pozwala wyświetlanie się następnych i poprzednich zdjęć w nawigacji galerii.

Przykład:

<a href="obrazek1-full.jpg" class="data-toggle="lightbox"  data-gallery="gallery" >
   <img src="obrazek1-small.jpg">
</a>
<a href="obrazek2-full.jpg" class="data-toggle="lightbox"  data-gallery="gallery" >
   <img src="obrazek2-small.jpg">
</a>
<a href="obrazek3-full.jpg" class="data-toggle="lightbox"  data-gallery="gallery" >
   <img src="obrazek3-small.jpg">
</a>  

Inicjalizacja i możliwości dostosowania i konfiguracji

Aby galeria działała należy ją zainicjalizować.

$(document).ready(function ($) {
    $(document).on('click', '[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', function(event) {
        event.preventDefault();
        return $(this).ekkoLightbox({
            maxWidth: 9999,
            maxHeight: viewPortHeight - 42,
            onShown: function() {
                if (window.console) {
                    return console.log('Test eventu');
                }
            },
            onNavigate: function(direction, itemIndex) {
                if (window.console) {
                    return console.log('Nawigowanie'+direction+'. Bieżący element: '+itemIndex);
                }
            }
        });
    }); 
});

Jak większość tego typu rozszerzeń, Ekko Lighbox pozawala na modyfikację najważniejszych parametrów. Na powyższym przykładzie, który pochodzi z jednej z realizacji pokazałem jak zmienić wartość maxWidth i maxHeight oraz jak wykryć zdarzenia onShown i onNavigate.

Można dostosować masę innych rzeczy, o których można dowiedzieć się z dokumentacji tej wtyczki.

Efekt końcowy

Efekt końcowy powinien zaspokoić potrzeby większości galerii nawet na stronach gdzie odgrywają one ważną rolę. Ligthbox i przewijanie bardzo dobrze sprawdza się na urządzeniach mobilnych i w przeglądarkach urządzeń klasy Desktop.

Lightbox ze zdjęciem w orientacji poziomej

Skrypt radzi sobie zarówno z zdjęciami w orientacji poziomej i pionowej. Domyślne strzałki są niewidoczne na jasnym tle ale wystarczy dopisać odpowiednią instrukcję w CSS.

Lightbox ze zdjęciem w orientacji pionowej

Domyślny skrypt zawiera animowany loader a obsługa dotyku jak i nawigacja przy pomocą strzałek klawiatury nie powoduje najmniejszych problemów. Skrypt doskonale działa na urządzeniach mobilnych. Zdjęcia są skalowane tak, że zarówno wyjście z trybu lightbox jak przełączanie jest wygodne niezależnie od wielkości ekranu czy ustawień skalowania.

Dodanie skryptu nie opóźniło wczytywania się strony i można śmiało uzyskać wynik 100/100 w różnego rodzaju PageSpeed testach.

Podsumowanie

Ekko Ligtbox to sympatyczny skrypt, który umożliwia w kilka minut wdrożyć skuteczną i lekką galerię bazującą na Bootstrapie 4. Możliwości jej konfiguracji powinny spokojnie wystarczyć w większości przypadków użycia nawet wtedy kiedy galera będzie istotnym elementem strony.

Oceń artykuł na temat: Galeria w Bootstrapie 4 – tworzenie efektu Lightbox
Ś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.