Jakiś czas temu zachęcałem Was do używania jQuery Cycle Plugin. Reklamowałem go jako bardzo przydatne narzędzie, które w bardzo wyraźny sposób usprawnia pracę nad stroną. W wymienionym wcześniej artykule zarysowaliśmy jedynie ogólne ramy tego czym jest owy plugin i jakie są jego możliwości. Teraz nadszedł czas na trochę więcej szczegółów – postaram się Wam przedstawić jak stworzyć własny sliedshow przy użyciu jQuery Cycle Plugin. Możecie to potraktować jako drugą część naszej przygody z tym pluginem. Kiedy tylko znajdę czas postaram się przygotować kolejne części, w których przedstawię bardziej zaawansowane operacje. Tymczasem zacznijmy od początku.
jQuery Cycle Plugin działa w ten sposób, że wszystkie dzieci rodzica wybranego jako kontener dla animacji stają się elementami pokazu slajdów. Stąd sam schemat działania animacji jest bardzo prosty. Jeśli nie chcemy zmieniać właściwości samego pluginu to na dobrą sprawę, po zainstalowaniu pluginu na naszej stronie, jedyne co nam zostaje to odpowiednie stylowanie elementów. Zacznijmy od początku.
1 2 | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" ></script> <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> |
Między tagami <head></head> naszego dokumentu umieszczamy powyższy kod. Oczywiście równie dobrze można te zasoby ściągnąć i linkować do konkretnego pliku.
Następnie między tagami <body></body> tworzymi następującą strukturę kodu HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <section> <div class="slide-wrap"> <div class="slide-container group"> <img src="ID-100104262.jpg" width="266" height="400" alt="" /> <article> <h1>Nagłówek</h1> <p>Maecenas vel odio vel nisl placerat dictum. In vitae pellentesque libero.</p> <p>Zdjęcie pochodzi z www.freedigitalphotos.net</p> </article> </div><!-- SLIDE - KONIEC --> <div class="slide-container group"> <img src="ID-10054133.jpg" width="400" height="266" alt="" /> <article> <h1>Nagłówek 2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pretium felis vel sem tempor lobortis. Vestibulum eget magna odio. Nulla ut sem sit amet sapien sollicitudin posuere. Nunc at ullamcorper lorem. Ut lacinia faucibus odio, quis mollis diam laoreet non. Cras in purus quis quam semper accumsan.</p> <p>Zdjęcie pochodzi z www.freedigitalphotos.net</p> </article> </div><!-- SLIDE - KONIEC --> <div class="slide-container group"> <img src="ID-10054110.jpg" width="400" height="266" alt="" /> <article> <h1>Nagłówek 3</h1> <p>Nulla ut sem sit amet sapien sollicitudin posuere. Nunc at ullamcorper lorem. Ut lacinia faucibus odio, quis mollis diam laoreet non. Cras in purus quis quam semper accumsan.</p> <p>Zdjęcie pochodzi z www.freedigitalphotos.net</p> </article> </div><!-- SLIDE - KONIEC --> </div><!-- SLIDER - KONIEC --> </section> |
Klasa slide-wrap stanie się naszym kontenerem. To ona będzie rodzicem elementów, które zostaną animowane. Klasa slide-container to po prostu nasze slidy. Elementy blokowe div oznaczone tą klasą są bezpośrednimi dziećmi kontenera animacji. Kiedy mamy już odpowiedni kod HTML możemy przystąpić do pisania kodu CSS. Jak już wspomniałem to on będzie miał tutaj największe znaczenie.
1 | .slide-wrap {margin:auto; width:70%; height:400px;} |
Zacznijmy od naszego kontenera. Tutaj mamy właściwie zupełną dowolność. Możemy kształtować jego wygląd do woli. Jedyną rzeczą, o której trzeba pamiętać to nadanie temu elementowi „sztywnej” wysokości. Jest to konieczne aby później nadpisać style implementowane przez plugin. Oczywiście podejście do tego zagadnienia można zmienić. Równie dobrze moglibyśmy „sztywną” wielkość nadać klasie slide-container lub nawet każdemu ze slidów inną, oddzielną wysokość.
1 2 3 4 5 6 7 8 | .slide-container { width:100% !important; height: 100% !important; } .slide-container img {float:left; width: 30%; margin:0 5%;} .slide-container article {float:left; width:60%;} |
Jak widzimy klasie slide-container nadaliśmy wysokość i szerokość stu procent jej rodzica. Dodatkowo dopilnowaliśmy aby ta wielkość nadpisywała jakiekolwiek inne atrybuty. Jest to zabieg, który ma zapewnić, iż będziemy mieć kontrolę nad wielkością tego elementu. Mechanizm jQuery Cycle Plugin w pewnych przypadkach może nam „zepsuć” layout jeśli tego nie dopilnujemy. Jeśli chodzi o kod CSS to w dużej mierze mamy już podstawy za sobą. Wspomnę jeszcze tylko, że określenie stylów dla obrazów i tagu article wewnątrz klasy slide-container ma charakter czysto estetyczny i jest dowolne na dobrą sprawę.
W tym momencie nasz „slider” to klika div’ów umieszczonych jeden pod drugim. Aby mógł on przeistoczyć się w prawdziwy slider (tym razem bez cudzysłowów :) musimy dokonać operacji na DOM (document object model). Mówiąc bardziej po ludzku musimy manipulować stylami CSS tak aby ze statycznych elementów HTML stworzyć animację. Takie rzeczy osiągamy dzięki zastosowaniu JavaScript a w tym przypadku chodzi konkretnie o jQuery a jeszcze konkretniej o nasz plugin.
Między tagami <head></head> umieszczamy następujący kod:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript" > $(document).ready(function(){ $('.slide-wrap') .after('<div class="menu">') //tworzymy nawigacje .cycle({ fx: 'scrollHorz', //rodzaj animacji speed: 'fast', //szybkość przejścia timeout: 10000, //czas między slajdami next: '.slide-wrap',//określamy element, który przenosi nas do następnego slidu pager: '.menu' //określamy nawigację }); }); </script> |
Jeśli wykonaliśmy wszystkie kroki prawidłowo na naszym monitorze powinna pojawić się całkiem zgrabna animacja, która przewija się sama co 10s, może przewijać się po kliknięciu na slide oraz za pomocą nawigacji, której nadaliśmy jakiś przykładowy styl:
1 2 3 4 5 6 7 8 9 | .menu { width:50%; margin:2% auto; text-align:center; } .menu a {color:transparent; display:inline-block; width:2em; height:2em; border:5px solid #F5B0C8; border-radius:100%; background:#8190D6; margin:auto 5px;} .menu a.activeSlide {border:none;} /*ta klasa generowana jest przez plugin - możemy ją jednak dowolnie ostylować*/ |
Tworzenie nawigacji jest banalnie proste. Co więcej plugin sam generuje klasę activeSlide dzięki czemu możemy dowolnie ostylować element reprezentujacy aktywny slajd.
W powyższym przykładzie zdefiniowaliśmy też element, który będzie nawigował do następnego slajdu. Określiśmy, że będzie to sam kontener slajdów (slide-wrap) dzięki czemu po kliknięciu w dowolne miejsce slidera możemy przejść do następnego slajdu.
Podsumowanie: Tym razem w bardziej rozbudowany sposób opisaliśmy jak tworzyć slider przy użyciu jQuery Cycle Plugin. Opisaliśmy więcej detali związanych ze stylami CSS i podstawy samej funkcji. Co więcej udało sie nam stworzyć slider, który nawet po wyłączeniu obsługi JavaScript i CSS nadal będzie spełniał swoje zadanie prezentacji treści. Mówiąc ściślej funkcję tę zachowają elementy HTML’owe gdyż sam slider nie będzie istniał bez obsługi JavaScript. Nadal jednak można powiedzieć, że to mało. Rzeczywiście opisywany plugin ma wiele możliwości i dlatego postaram się przygotować kolejny artykuł gdzie jeszcze bardziej zagłębimy się w jego możliwości.
Zdjęcie pochodzi z freedigitalphotos.net
Świetny artykuł, wielkie dzięki. Ale jak zrobić z pustych elementów .menu prawdziwe „menu” tzn., żeby zawierał np. tytuł artykułu?
Proszę o założenie wątku na naszym forum webmasterskim, a autor poradnika na pewno postara się Tobie pomóc.
Ja bym nie uczył zbyt dużo ludzi stawiania sliderów, bo już i tak w polskim internecie mamy ich za dużo ;)
nie dziala ;(
Proszę opisać swój problem na naszym forum webmasterskim, a postaramy się doradzić.
Dziękuję właśnie tego poszukiwałem żeby dodać do strony.
Bardzo fajny, tylko jeżeli chcę umieścić link odsyłający do danej strony www to niestety jest to niemożliwe. Przy kliknięciu w niego, slider wczytuje nowy slajd bez wywołania żądanego adresu. Oczywiści chodzi mi o umieszczenie linku wewnątrz slidera.
Ok, już znalazłem rozwiązanie. Należało skasować next: ’.slide-wrap’, :)
mam takie pytanie: jak zmodyfikować kod żeby wyświetlał wszystkie zdjęcia z danego folderu (np. img/). Mam jakieś 150 zdjęć więc wpisywanie ich pojedynczo ząjęłoby lata…
z góry dziękuję i pozdrawiam,
Niestety, ale w prosty sposób tego nie zrobisz (JavaScript i jego pochodne w tym nie pomogą). Najlepiej posłużyć się Pythonem listująć wszystkie pliki z katalogu a następnie generować dla każdego z nich html: i w ten sposób zautomatyzujesz swoją pracę.
jak zamienić nawigację z „kropek” na poprzedni/następny ?
Trzeba zajrzeć do dokumentacji: http://www.malsup.com/jquery/cycle/int2.html
btw. teraz już jest nowa wersja tego pluginu: http://jquery.malsup.com/cycle2/
dzięki, myślałem że jest jakiś patent na szybko :)
nie za bardzo jestem oblatany w js, może mógłbyś bardziej podpowiedzieć,
bo z tego co tam popatrzyłem to z samym przerobieniem już zainstalowanego slydera nie ma większych problemów, gorzej z zainstalowaniem, tutaj jest idealnie wyłożone :)
Nie rozumiem :) To powinno być proste – masz kod z przykładu, w
wywołaniu zmieniasz tak jak jest w linku z dokumentacji (rozumiem, że to
wiesz jak zrobić?) i pojawia sią się linki next i prev. Teraz to już
kwestia stylowania.