Utwórz responsywną i piękną pełną stronę Lightbox z BaguetteBox.js

Tam są dziesiątki wtyczek lightbox i wszystkie są świetne Z różnych powodów. Niektóre z nich działają lepiej na stronach portfolio, podczas gdy inne są najlepsze dla responsywnych układów.

Ale jedną z moich ulubionych nowych wtyczek do użycia jest baguetteBox.js, stworzony przez programistę JavaScript Marka Grzybka.

Oczywiście ta wtyczka jest całkowicie darmowa i dostępna na GitHub, jeśli chcesz ręcznie zagłębić się w kod.

Biblioteka nie ma żadnych zależności, więc możesz go uruchomić bez jQuery, Zepto lub czegokolwiek innego. To jest czysta biblioteka JavaScript z bardzo prostą konfiguracją.

To jest przeznaczone działa idealnie na urządzeniach mobilnych, więc może obsługiwać przesuwanie i stukanie, a także domyślne zachowanie na komputerach stacjonarnych i laptopach. To jedna z niewielu galerii pełnoekranowych wspierać interakcje mobilne wraz z pełnym efektem modalnym.

Sprawdź strona demonstracyjna zobaczyć to na żywo w akcji. Ma w pełni funkcjonalną galerię wraz z jeden wiersz kodu wymagany do jego działania:

 baguetteBox.run („. baguetteBoxOne”); 

Więc to celuje w element kontenera z klasą .baguetteBoxOne a cała galeria to działa.

Mógłbyś ustaw opcje niestandardowe jeśli chcesz takich rzeczy jak podpisy, style przycisków, funkcje wstępnego ładowania i metody wywołania zwrotnego dla zdarzeń onclick / onchange. Wszystkie te opcje są dobrze udokumentowane w GitHub jeśli chcesz się zanurzyć.

Ale to naprawdę nie zajmuje dużo czasu, aby wyjść poza element kontenera i niektóre podstawowe elementy obrazu.

ty mieć pełną kontrolę nad animacjami, rozmiarami obrazów, efektami machnięcia i treściami galerii, takimi jak tytuły / podpisy. To wymaga JavaScript, więc nie ma czystej alternatywy CSS do modalnej. Ale ponieważ większość przeglądarek obsługuje JavaScript, nie powinno to stanowić problemu.

Aby dowiedzieć się więcej, odwiedź stronę główną baguetteBox.js i możesz podzielić się swoimi przemyśleniami z twórcą na Twitterze @feimosi.