Dzisiaj jest poniedziałek, 23 września 2019
Fotocyk25 cech ludzi silnych psychicznieAdobe Stock
aThumbs - minimalistyczny plugin do galerii

aThumbs - minimalistyczny plugin do galerii

czwartek, 2019-09-1996moje projekty, tutoriale, internet, Alib CyMeS

Czasami zachodzi potrzeba wyświetlenia miniatur galerii, żeby zdjęcia dokładnie wypełniały szerokość ekranu bez względu na jego wielkość. Tak to działa między innymi w Google Grafika czy Adobe Stock. Taki minimalistyczny plugin przygotowałem także na swoje potrzeby.

Można skorzystać z pluginu aTiles, ale ten działa trochę inaczej i wyświetla moduły o stałej szerokości. aThumbs dla odmiany dopasowuje szerokość grafiki tak, żeby zachować minimalne marginesy. Wiąże się to z koniecznością zastosowania pewnego triku wynikającego z błędu lub celowego „dziwnego” wyświetlania list przez przeglądarki. Ale o tym za chwilę.

Wyświetlane grafiki muszą mieć taką samą wielkość (albo przynajmniej proporcje). Co bardziej kumaci mogą zrobić hybrydę aThumbsaTiles, co uniezależni działanie od wielkości grafik. Być może kiedyś nawet sam to zrobię, ale póki co nie mam takiej potrzeby :)

Przygotowanie danych

Jak zwykle zaczynamy od przygotowania pliku HTML i kilku stylów. Ważne, żeby elementy listy LI miały ustawiony właściwość stylu display: inline-block, dzięki czemu miniatury wyświetlą się obok siebie, a nie jedna pod drugą. Listę z miniaturami wrzucamy do

<ul id="Gallery">

I tutaj mały trik.

Wszystkie elementy listy muszą być wpisane w jednej linii (najlepiej zrobić to przy pomocy jakiejś pętli w PHP). Jeśli każdy element listy będzie w oddzielnym wierszu, po każdym zdjęciu będzie spory odstęp, którzy wszystko rozsypie. Można kombinować z ujemnymi marginesami, ale istnieje ryzyko, że różne przeglądarki robią różne odstępy - jeden ciąg jest najbezpieczniejszy. Nie wiem, czemu tak jest. Zakładam, że to od lat nie naprawiony błąd.

Plugin uruchamiamy przy pomocy jQuery:

$(document).ready(function () { $("#Gallery").aThumbs({spa:1}); });

Parametry, które można użyć:

  • min - minimalna szerokość grafiki (standardowo 200px)
  • max - maksymalna szerokość grafiki (standardowo 300px)
  • spa - odstęp między grafikami (standardowo 1px)

Jak to działa?

Po uruchomieniu ekran zapełnia się miniaturkami grafik, a następnie obliczana jest ich wielkość, żeby zachowując zdefiniowany odstęp wypełniły cały ekran lub zdefiniowany kontener, w którym się znajdują. Szerokość pojedynczej grafiki waha się między minmax ale w taki sposób, żeby grafiki były jak największe. Plugin działa sobie w tle, więc można na bieżąco zmieniać szerokość okna przeglądarki (albo obrócić ekran tabletu) i po chwili grafiki same się dostosują.

I w zasadzie tyle. Plugin jest malutki, więc chyba nie będzie problemu z jego samodzielnym zrozumieniem i ewentualną rozbudową. Bierzcie, oglądajcie, rozbudowujcie i używajcie. Ciekaw jestem Waszych realizacji, pochwalcie się w komentarzach.

Pobierz plugin

Jeśli podoba Ci się wpis,
koniecznie zalajkuj,
skomentuj i zapisz się na