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ę aThumbs i aTiles, 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 :)
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">
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.
$(document).ready(function () { $("#Gallery").aThumbs({spa:1}); });
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 min i max 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.