Dzisiaj jest niedziela, 08 grudnia 2024
Andy Design Studio Graficzne w LublinieStwórz sobie własną chmurę tagówPobierz Alib CyMeS 7.0 za friko
aTiles - ciekawy moduł galerii

aTiles - ciekawy moduł galerii

poniedziałek, 2018-09-171631Alib CyMeS, Tutoriale, Internet, Programowanie

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.

SPRAWDŹ DEMO

Jak zainstalować i uruchomić?

  1. Przygotuj główny kontener i zdefiniuj mu identyfikator (u mnie to jest „TilesGallery”).
  2. 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.
  3. 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.
  4. Do pliku zaimportuj bibliotekę jQuery, ale o tym chyba przypominać nie trzeba :)
  5. 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

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