Dzisiaj jest sobota, 21 października 2017
Blogerze, nie bądź frajerem!Pobierz Alib CyMeS 7.0 za frikoIle za zlecenie czyli jak wycenić własną pracę?
aTiles - ciekawy moduł galerii

aTiles - ciekawy moduł galerii

piątek, 2014-11-143448moje projekty, internet, Alib CyMeS

Kiedyś nie lubiłem jQuery, teraz widzę, jaki byłem niemądry. Ta biblioteka ma naprawdę moc. Oczywiście nie należy jej przeceniać, bo są rzeczy, które łatwiej i szybciej się zrobi w gołym JS, ale nie o tym chciałem...

Wraz z nową wersją Alib CyMeS zacząłem pisać pluginy do mojej CMS-a. Część jest w PHP, część służy wyłącznie do ciekawej prezentacji danych na stronie. Zacznę od aTiles (plugin można pobrać z plikowni), który pozwala na wyświetlenie w ciekawy sposób galerii, newsów lub zajawek na blogu. Od razu zastrzegam, że nie ja go wymyśliłem, bo sama metoda funkcjonuje na wielu blogach i nie tylko. Ja go tylko maksymalnie uprościłem, żeby każdy mógł się zapoznać i zrozumieć zasadę działania i ewentualnie rozbudować o dodatkowe funkcjonalności. Sam kod jest na tyle prosty, że nie będę go tutaj opisywał. Jeśli ktoś ma go zrozumieć, to bez mojej pomocy, jeśli nie, to pomoc i tak nic nie da :)

Co robi plugin?

Otóż załóżmy, że mamy trochę zajawek, albo zdjęcia w galerii i musimy wyświetlić komplet miniaturek. Możemy ręcznie mozolnie ustawiać wszystkie zdjęcia obok siebie w kolumnach, żeby je wszystkie fajnie spasować, co się kłóci z zasadami tworzenia stron dynamicznych. Można też po prostu uruchomić ten plugin, który wszystko zrobi za nas.

Jak to działa?

Plugin generuje 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, co widać w przykładzie) w odpowiednie miejsca, żeby całość zajmowała jak najmniejszą wysokość. Ilość kolumn jest zależna od dostępnej szerokości. Przy zmianie okna przeglądarki wszystko odpowiednio się dopasuje, sprawdźcie.

Jak zainstalować i uruchomić?

Tworzymy w pliku CSS kilka reguł dla galerii. Polecam eksperymentować ze stylami, które znajdują się w przykładzie. Ważne, żeby główny kontener (nazwałem go TileGalery) miał overflow:hidden (żeby nie pojawiały się żadne suwaki podczas zmiany wielkości ekranu) i position:relative. Każdy moduł musi mieć klasę "Module", przy czym nie musi to być DIV, może być SPAN, IMG lub dowolny inny. W tej klasie definiujemy stałą szerokość np. width:300pxposition:absolute. Żeby wszystko płynnie działało, warto zdefiniować transition. Nie będę ukrywał, że w celu zminimalizowania kodu nie robiłem żadnych animacji przy użyciu jQuery, więc przeglądarki nie wspierające transition nie wyświetlą animacji tylko skokowo przerzucą moduły w odpowiednie miejsce. Trudno.

Teraz tworzymy galerię. Nie będę się rozpisywał, zerknijcie do przykładu, nie ma tego dużo. Jak już wspomniałem, można tu dodawać tekst, grafikę, linki. Można dodać dowolny Lightbox, żeby otrzymać fajnie działające powiększanie zdjęć. Ja używam własnej biblioteki mocno zintegrowanej z Alib CyMeS, więc nie będę jej tu dołączał.

Na koniec uruchamiamy plugin:

$(document).ready(function () { $("#TilesGallery").aTiles(); });

Do pluginu można przekazać 2 parametry:

  • space:xx - odstępy między kolumnami (standardowo jest to 10px)
  • center:true/false - centrowanie (lub nie) modułów co pozwala na uzyskanie jednakowej szerokości marginesów (standardowo włączone)

Jeśli ktoś chce poznać algorytm układania modułów niech przestudiuje metodę Sort(), która jest sercem całego pluginu.

Pobierajcie i używajcie tego wszyscy, oto dzieło moje :)

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