jQuery Cycle Plugin to wyjątkowo przydatne i proste w użyciu narzędzie, które umożliwi upiększyć oraz urozmaicić nasze witryny o animacje oparte na technologii jQuery. W gąszczu najrozmaitszych gotowców stanowiących rozbudowane slidery i inne podobne rozwiązania, jQuery Cycle Plugin jawi się jako bardziej subtelne rozwiązanie, które nie dość, że jest dostępne „od ręki” to jeszcze zawiera w sobie całkiem zaawansowany zestaw opcji. Dzięki takiej konstrukcji zarówno doświadczeni webmasterzy jak i Ci który dopiero poznają jQuery będą w stanie w łatwy i przyjemny sposób pracować z tym wspaniałym pluginem.
Obecnie wykorzystanie jQuery w budowie stron internetowych jest właściwie standardem. Mimo możliwości CSS3 technologia biblioteki jQuery nadal pozostaje liderem w dziedzinie wszystkiego „co na stronach się rusza” (jak to mówią klienci:). Nic więc dziwnego, że internet jest pełen najrozmaitszych sliderów, faderów i nie wiadomo czego jeszcze. Fakt takie darmówki też są przydatne, ale nie zawsze potrzebujemy coś na tyle skomplikowanego.
Dla kogoś z doświadczeniem nie trudno stworzyć prostą animację z użyciem jQuery, ale nie wtajemniczeni mogą mieć problemy. Stąd moja rada – sięgnijcie po jQuery Cycle Plugin.
Ten plugin to tzw. slideshow, który wspiera wiele efektów przejścia (tzw. slidy, fade’y itd.), akcje związane z myszką, auto-stop i wiele innych. Zasada jego działania jest prosta – każde dziecko wybranego elementu staje się częścią animacji. Może być prościej?
W praktyce proces instalacji i użytkowania jest bardzo prosty.
- Ściągamy jQuery Cycle Plugin ze strony autora
- Zaopatrujemy się w bibliotekę jQuery oraz (jeśli chcemy) w jQuery Easing Plugin
- Dodajemy wyżej wymienione pliki do naszego kodu html między tagami <head></head>
1 2 | <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script> |
Następnie wpisujemy między tagami <head></head> następujący kod:
1 2 3 4 5 6 7 8 | <script> $(document).ready(function() { $('.slajdy').cycle({ fx: 'fade', speed: 2500 }); }); </script> |
Dzięki użyciu „document ready function” będziemy pewni, że animacja nie rozpocznie się dopóki całość dokumentu nie zostanie wczytana.
W dalszej kolejności należy stworzyć element (klasę rodzica) o nazwie „slajdy”. W funkcji powyżej taką klasę namierzyliśmy i będzie ona „wyławiana” przez nasz plugin. Każde dziecko tej klasy stanie się elementem pokazu slajdów opartego o efekt „fade” jaki zdefinowaliśmy w kodzie powyżej. Animacja będzie następować co 2.5 sekundy co również określiliśmy powyżej.
1 2 3 4 5 6 | <div class="slajdy"> <img src="grafika/slajd1.png" alt="przykład"> <img src="grafika/slajd2.png" alt="przykład"> </div> |
Ten prosty przykład nie wyczerpuje jednak nawet podstawowych opcji jQuery Cycle Plugin. Dlatego zachęcam do odwiedzenia strony www.malsup.com i przejrzenia zgromadzonych tam tutoriali!
zdjęcie pochodzi z http://www.freedigitalphotos.net/
O, a co to?
Multithumb found errors on this page:
There was a problem loading image /home/klient.dhosting.pl/michalko/webroad.pl/public_html/grafika/slajd1.png
There was a problem loading image /home/klient.dhosting.pl/michalko/webroad.pl/public_html/grafika/slajd2.png
Dzięki za informację. Problem został zlikwidowany. Pozdrawiam serdecznie!
Najlepiej stałoby się, gdyby CSS3 nigdy nie został wmieszany do tworzenia takich bajerów. CSS powinien być tam, gdzie jego miejsce. Do takich rzeczy nadaje się JS (czy jQuery), dlatego warto przy tym pozostać. Cieszymy się, bo wykorzystaliśmy sam CSS, a przecież równie dobrze może on być wyłączony w przeglądarce użytkownika. JS zapewnia odpowiednią semantykę i niech tak zostanie.
Co do samego Cycle Plugin – bardzo fajna sprawa!
W założeniu nowe możliwości CSS mają wyeliminować konieczność używania js. To generalnie dobry pomysł (IMO), ale to uzyskania pełnej funkcjonalności jeszcze daleka droga (przynajmniej w dziedzinie animacji.)
Dzięki modernizr możemy wykrywać czy dana przeglądarka obsługuje dany bajer i jeśli to możliwe używać css3 a dla starszych przeglądarek robić fallbacki w JS. to IMO najlepsze rozwiązanie jeśli chcemy korzystać css3 i oszczędzić nowszym przeglądarkom przetwarzania skryptów.
Nie zgadzam się z tym co pisze poniżej @michalkortas:disqus. CSS odpowiada za warstwę prezentacji, a czym są animację, efekty fadeOut/fadeIn itd jak nie prezentacją?
Piszesz, że CSS (swoją drogą JS też) może być wyłączony przez usera. Co z tego? Jeśli kod HTML jest poprawnie napisany to strona z wyłączonym CSS nadal będzie tak samo funkcjonalna jak z arkuszami stylów. BTW wyłączanie CSS to bardzo dobry sposób na testowanie stron pod kątem dostępności dla osób niewidzących i niedowidzących.
Piszesz też, że JS zapewnia odpowiednią semantykę. Tego zupełnie nie rozumiem. Semantyka to markup, kod HTML. JS odpowiada za logikę aplikacji. Bardzo często jednak przeróżne pluginy jQuery dodają mnóstwo dziwnych wrapperów, pustych elementów czy niesemantycznych klas, po to żeby stworzyć warunki dla efektów.
Używam codziennie w projektach firmowych, po drobnych zmianach w kodzie samego skryptu daje rewelacyjne możliwości, a klienci są bardzo zadowoleni z tych „animacji” jak to u nas mówią;)
A co dokładnie modyfikujecie? Ciekawy jestem bo myślę żeby samemu trochę pogrzebać przy tym pluginie :)
zrobiłem, jak napisaliście, ale obrazki się nie pojawiają. Co może być nie tak?
Zapraszamy na nasze forum. Tam postaramy się rozwiązać Twój problem. Pamietaj aby dobrze go opisać i w miarę mozliwości pokazać nam kod.
firebug znajduje mi syntax error w linijce:
$('.slajdy').cycle({
dlaczego tak się dzieje?
A masz gdzieś cały kod?
Btw. cycle plugin, którego dotyczy ten artykuł jest starą wersją. Teraz jest nowa:
http://jquery.malsup.com/cycle2/
Czy można stosować go na komercyjnej stronie(firmowej) ?