10 užitečných jQuery pluginů (nejen) pro responzivní webdesign

Díky široké podpoře prohlížečů a jednoduchosti využití se z jQuery stává standardní nástroj pro vývoj moderních webových stránek a aplikací. Jeho důležitost v posledních letech narůstá s masivním rozvojem responzivního webdesignu.

K dispozici je nepřeberné množství jQuery pluginů různého rozsahu a kvality. Zde uvádím výběr deseti vysoce kvalitních, jednoduchých avšak super-užitečných jQuery pluginů, které jsou k dispozici zdarma a ocení je zejména tvůrci responzivních webových stránek. Každý z těchto pluginů má mnoho alternativ, uvádím zde ale pouze ty, které v rámci dané kategorie vynikají svou kvalitou. Všechny uvedené pluginy mám vyzkoušené a většinu z nich pravidelně využívám ve tvorbě webových stránek.

#1 Magnific Popup

Elegantní, responzivní, mobile-friendly lightbox s širokými možnostmi využití. Vhodný je např. pro prohlížení obrázků a obrázkových galerií, interaktivních map nebo přehrávání videí. Umožňuje ale také zobrazení formulářů, dynamického AJAX obsahu a lze využít jako dialogové okno.

 

http://dimsemenov.com/plugins/magnific-popup/

#2 PhotoSwipe

Chytrý prohlížeč obrázků a galerií, určený především pro mobilní zařízení. Umožňuje procházení galerie tažením prstu, zoomování, zobrazení ve fullscreen módu a rychlé sdílení přímo z okna prohlížeče.

http://photoswipe.com/

#3 Masonry

Plugin, který z vybraných elementů vytvoří tzv. dynamickou mřízku (dynamic grid), tedy mřížku, ve které na sebe bezprostředně navazují různě vysoké nebo různě široké elementy a nevznikají zbytečné mezery, jako při běžném obtékání. Název "masonry" (česky "zdivo") odkazuje na podobnost s kladením různě velkých kamenů při stavbě zdi. Plugin umí pracovat s relativní (např. procentuální) šířkou elemenentů i mezer mezi nimi.

http://masonry.desandro.com/

#4 Isotope

Pokročilejší alternativa k Masonry. Umožňuje mimo jiné řazení a filtrování elementů bez využití PHP, pouze na základě CSS tříd, HTML atributů a obsažených dat.

http://isotope.metafizzy.co/

#5 Backstretch

Miniaturní ale velmi užitečný plugin aplikuje na pozadí libovolného elementu obrázek,který se dynamicky a proporciálně přizpůsobuje tak, aby zcela vyplnil daný element bez ohledu na jeho velikost a poměr stran. Zabrání se tím vzniku nevzhledných prázdných pruhů způsobených nevhodnou velikostí nebo poměrem stran obrázku vůči elementu. Plugin navíc umožňuje nastavení více obrázků, které se pak na pozadí střídají jako slideshow.

http://srobbin.com/jquery-plugins/backstretch/

#6 FlexSlider

Pokročilejší jQuery slideshow s širokými možnostmi přizpůsobení a podporou ovládání tažením prstu.

http://flexslider.woothemes.com/

#7 Owl Carousel

Responzivní jQuery carousel s širokými možnostmi přizpůsobení a podporou ovládání tažením prstu.

http://owlgraphic.com/owlcarousel/

#8 SlickNav

Víceúrovňové, horizontální menu. Klasická navigační lišta se na menších obrazovkách automaticky "sbalí" do podoby jednoduchého tlačítka, takže je toto menu univerzálně použitelné na širokém spektru zařízení.

http://slicknav.com/

#9 NavSide

Miniaturní plugin pro jednoduché a elegantní postranní navigační menu, které rozbalí/sbalí po kliknutí na příslušné tlačítko. Moderní a univerzální řešení navigace na webu.

http://www.jqueryscript.net/menu/Smooth-Sidebar-Navigation-Plugin-with-jQuery-NavSide.html

#10 jPlayer

Responzivní HTML5 audio a video přehrávač. Jeho vzhled je možné přizpůsobovat pomocí CSS stylů.

http://jplayer.org/

Tagy: 

Přidat komentář

Plain text

  • Nejsou povoleny HTML značky.
  • Řádky a odstavce se zalomí automaticky.
  • Email addresses will be obfuscated in the page source to reduce the chances of being harvested by spammers.
  • Webové a e-mailové adresy jsou automaticky převedeny na odkazy.
CAPTCHA
Ochrana proti spamu.
8 + 2 =
Vyřešte tento jednoduchý matematický příklad a vložte výsledek. Např. pro 1+3 vložte 4.