Dzisiaj jest środa, 28 czerwca 2017
Historia mojego... sukcesu?Adobe StockJAK wkurzyć grafika (i nie tylko)
aThumbs - malutki plugin do galerii

aThumbs - malutki plugin do galerii

środa, 2015-05-130

Taka tam popierdułka, ale czasami może się przydać, kiedy chcemy, żeby miniatury galerii dokładnie wypełniały szerokość ekranu bez względu na jego wielkość.

Owszem, można skorzystać z pluginu aTiles, ale ten 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ę. Oczywiście grafiki muszą mieć taką samą wielkość (albo przynajmniej proporcje). Co bardziej kumaci mogą zrobić hybrydę aThumnsaTiles, co uniezależni działanie od wielkości grafik. Być może kiedyś nawet sam to zrobię.

Jak zwykle zaczynamy od przygotowania pliku HTML i kilku stylów. Ważne, żeby LI miało ustawione 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 trik. Wszystkie elementy listy muszą być wpisane w jednej linii (najlepiej przy pomocy jakiejś pętli w PHP). Jeśli podzielimy to na wiersze, po każdym zdjęciu będzie spory odstęp, którzy wszystko pochrzani. Można kombinować z ujemnymi marginesami, ale istnieje ryzyko, że różne przeglądarki robią różne odstępy - jeden ciąg jest najbezpieczniejszy.

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 wielkość tak, żeby zachowując zdefiniowany odstęp wypełniły cały ekran lub zdefiniowany kontener. Szerokość grafiki waha się między min i max ale tak, ż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 zrozumieniem. Bierzcie, oglądajcie, rozbudowujcie i używajcie. Ciekaw jestem Waszych realizacji, pochwalcie się w komentarzach.

Pobierz plugin

Spodobał Ci się wpis? Udostępnij go w Social Media:
Jeśli podoba Ci się wpis,
koniecznie zalajkuj,
skomentuj i zapisz się na