JavaScript

jQuery Cycle Plugin

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.

  1. Ściągamy jQuery Cycle Plugin ze strony autora
  2. Zaopatrujemy się w bibliotekę jQuery oraz (jeśli chcemy) w jQuery Easing Plugin
  3. Dodajemy wyżej wymienione pliki do naszego kodu html między tagami <head></head>
<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:

<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.

<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/

Druga część artykułu >>

komentarzy 12

  • Awatar
    Karol

    20 czerwca 2012 08:50

    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

    Odpowiedz
    • Awatar
      Michał Kortas

      20 czerwca 2012 09:19

      Dzięki za informację. Problem został zlikwidowany. Pozdrawiam serdecznie!

      Odpowiedz
  • Awatar
    Michał Kortas

    20 czerwca 2012 09:27

    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”.

    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!

    Odpowiedz
  • Awatar
    Mr.Mr

    20 czerwca 2012 11:25

    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.)

    Odpowiedz
    • Awatar
      wujekbogdan

      20 czerwca 2012 12:27

      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.

      Odpowiedz
  • Awatar
    Marcin

    21 czerwca 2012 22:39

    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ą;)

    Odpowiedz
  • Awatar
    Mr.Mr

    21 czerwca 2012 23:28

    A co dokładnie modyfikujecie? Ciekawy jestem bo myślę żeby samemu trochę pogrzebać przy tym pluginie :)

    Odpowiedz
  • Awatar
    bartek

    11 listopada 2012 15:55

    zrobiłem, jak napisaliście, ale obrazki się nie pojawiają. Co może być nie tak?

    Odpowiedz
    • Awatar
      Michał Kortas

      12 listopada 2012 19:19

      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.

      Odpowiedz
  • Awatar
    Krzysztof

    20 listopada 2013 01:08

    firebug znajduje mi syntax error w linijce:

    $('.slajdy').cycle({

    dlaczego tak się dzieje?

    Odpowiedz
  • Awatar
    Krystian

    11 września 2015 20:24

    Czy można stosować go na komercyjnej stronie(firmowej) ?

    Odpowiedz

Zostaw odpowiedź