Kalendarz wpisów
aTiles - ciekawy moduł galerii
Uwielbiam minimalizm i 100% kontroli nad kodem, dlatego bardzo długo z nieufnością podchodziłem do jQuery. Teraz jednak widzę, jaki byłem niemądry, ta biblioteka ma naprawdę moc. Oczywiście bez przesady, są rzeczy, które łatwiej i szybciej się zrobi w gołym JavaScript, jednak w wielu przypadkach pozwala zaoszczędzić wiele pracy.
aTiles pozwala na wyświetlenie w ciekawy sposób galerii, newsów lub zajawek na blogu (tutaj też go używam). Od razu zastrzegam, że nie ja wymyśliłem algorytm. Uprościłem go tylko i oczyściłem ze zbędnych śmieci, dzięki czemu jest prosty, czytelny i efektywny (jak wspomniałem, uwielbiam minimalizm). Kod jest na tyle prosty, że nie ma sensu opisywać każdej linijki. Z pewnością dla większości będzie zrozumiały. Pozostali mogą go po prostu używać.
Co robi aTiles?
Załóżmy, że mamy trochę zajawek na blogu, albo zdjęcia w galerii, które trzeba wyświetlić na stronie. Plugin tworzy wirtualną tabelkę o szerokości kolumn określonej w pliku CSS i odstępach przekazanych w parametrze. Następnie wlewa moduły (niekoniecznie zdjęciowe) w odpowiednie miejsca, żeby całość zajmowała jak najmniejszą wysokość. Czyli każdy kolejny moduł będzie umieszczony w najkrótszej kolumnie.
Ilość kolumn jest zależna od szerokości kontenera. Wszytko jest responsywne i przy zmianie okna przeglądarki (albo na urządzeniach mobilnych) wszystko odpowiednio się dostosuje.
Jak zainstalować i uruchomić?
- Przygotuj główny kontener i zdefiniuj mu identyfikator (u mnie to jest „TilesGallery”).
- Następnie przygotuj materiały do wyświetlania i umieść je w modułach (niekoniecznie musi to być DIV) ze zdefiniowaną klasą „Module”. Moduły oczywiście muszą znaleźć się w głównym kontenerze.
- W arkuszu CSS ostyluj odpowiednie elementy. Dla „TilesGallery” obowiązkowo zdefiniuj overflow:hidden (żeby nie pojawiały się żadne suwaki podczas zmiany wielkości ekranu) i position:relative. Klasie „Module” zadaj konkretną szerokość (np. width:300px) i position:absolute. Dokładny opis i przykłady są opisane w działającym przykładzie.
- Do pliku zaimportuj bibliotekę jQuery, ale o tym chyba przypominać nie trzeba :)
- Na końcu uruchom plugin:
$(document).ready(function () { $("#TilesGallery").aTiles(); });
Do pluginu możesz przekazać 3 parametry:
- width:xx - standardowa szerokość modułów, jeśli nie jest podana w CSS
- space:xx - odstępy między kolumnami
Pobierz i używaj do woli
Paczka z plugiem aTiles i przykładem użycia
Zobacz także:
koniecznie zalajkuj,
skomentuj i zapisz się na