Jak rozwinąć miniaturki, jak grafiki Google
Grafika Google uruchamia unikalny interfejs użytkownika podgląd miniatur z wielu różnych stron internetowych. Kliknięcie dowolnej z tych miniatur rozszerza ekran o więcej szczegółów i większe zdjęcie.
To jedna z najlepszych funkcji galerii obrazów, z której korzystałem i teraz, możesz go sklonować za pomocą Gridder.js.
Ta darmowa wtyczka jQuery podąża śladami niesamowitego UX Google'a, tworząc wtyczkę pasującą do tego efektu. Możesz zamień dowolną galerię zdjęć w galerię w stylu obrazów Google z tymi samymi animacjami i funkcjami wyświetlania.
Jestem mile zaskoczony szybkością i łatwością użycia tej wtyczki. Wystarczy kliknąć dowolną miniaturę natychmiast wyświetla większe zdjęcie a animacje są super czyste.
Obrazki dołącz sekcję opisowego tekstu w przypadku, gdy chcesz dodać kilka szczegółów lub linków związanych z zdjęciami. Działa to szczególnie dobrze w przypadku prostych stron z portfolio, których celem jest skupienie się na obrazach.
Do tego możesz również ściągaj zawartość przez Ajax. To pozwala tworzyć dynamiczne miniatury które pobierają treści z innych stron internetowych lub za pośrednictwem interfejsów API.
Każde zdarzenie kliknięcia oferuje metodę wywołania zwrotnego, więc możesz nawet uruchamiać inne wtyczki lub funkcje JavaScript obok Griddera. Przy tak wielu opcjach, praktycznie czuje się jak cała struktura siatki!
Od Griddera działa na jQuery, wymaga najnowszej wersji jako zależności. Ale to wszystko, czego potrzebujesz (wraz z plikiem Gridder.js), a przy kilku liniach HTML możesz sprawić, by siatka działała płynnie.
Powinieneś sprawdzić stronę GitHub dla pełne instrukcje konfiguracji ale oto szybki podgląd z czego wygląda HTML:
Cała zawartość zostaje ściągnięty przez JavaScript, dzięki czemu możesz ładować prawie wszystko, co chcesz.
To niezwykle wszechstronna wtyczka z opcjami zmienić szybkość animacji, luzowanie, styl przycisku zamykania i pozycję przesunięcia przewijania gdy użytkownik kliknie nową miniaturę.
Zarówno nowicjusze, jak i profesjonalni programiści znajdą wiele zalet w tej wtyczce. Jeśli jednak nadal nie jesteś pewien, czy jest to dla Ciebie, spójrz na stronę demonstracyjną live Gridder i pobaw się.
