Pokaz slajdów na Twojej stronie www!

Kategorie: ArtykułyCiekawostkiInnePorady

Świetny efekt łatwo i szybko!

Prowadzisz prywatną stronę internetową o tematyce fotografii, na której prezentujesz próbki swoich prac? Może chciałbyś wzbogacić ją o estetyczą, trochę bajerancką przeglądarkę zdjęć?

Nie musisz być ekspertem w tworzeniu stron internetowych, wystarczy podstawowa wiedza HTML! W dalszej części pokażę krok po kroku, jak w prosty sposób stworzyć na swojej stronie pokaz slajdów podobny do poniższego przykładu.

wishes business people woman and her team ladybug the blue mosque in istanbul turkey skateboarding with a kangaroo shadow green grass with daisy flowers service with a smile 62 grandfather and grandson with cloud young people summer landscape happy traveler


Wymagania:

Aby stworzyć pokaz slajdów potrzebujemy:

  • Bibliotekę jQuery.
  • Plugin do jQuery - Cycle.
  • Kilka zdjęć o podobnych wymiarach, które będziemy wyświetlać.
  • Arkusz styli CSS, w którym zapiszemy definicję wyglądu obramowania slajdów.

Krok 1 - osadzanie plików Javascript.

Ściągamy niezbędne pliki Javascript: jQuery i jQuery Cycle i zapisujemy je z niezmienioną nazwą w katalogu js serwisu (pliki można pobrać poprzez kliknięcie prawym przyciskiem myszki na linku i wybraniu opcji 'Zapisz element docelowy jako...').

Następnie osadzamy te pliki w dokumencie HTML na stronie, na której będzie wyświetlany slideshow:

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.pack.js"></script>

Krok 2 - osadzenie styli CSS.

W kroku tym ustawimy wygląd ramki otaczającej zdjęcia oraz zdefiniujemy wielkość wyświetlanych zdjęć.

Wstawiamy do arkusza styli CSS następujący kod:

.pics {
   /* wartości te powinny być conajmniej takie jak rozmiary zdjęć */
   height: 400px; /* szerokość elementu HTML gdzie osadzone są zdjęcia */
   width: 260px; /* wysykość elementu HTML gdzie osadzone są zdjęcia */
   padding: 0;
   margin: 0;
}

.pics img {
   padding: 15px;
   border: 1px solid #ccc;
   background-color: #eee;
   /* rozmiary zdjęć */
   width: 380px; /* szerokość wyświetlanych zdjęć */
   height: 260px; /* wysokość wyświetlanych zdjęć */
   top: 0;
   left: 0
}

Jeżeli nie posiadamy arkusza styli, to najpierw tworzymy plik style.css w katalogu css naszego serwisu, z powyższą zawartością. A następnie osadzamy go w HTML poprzez:

<link rel="stylesheet" href="css/style.css" type="text/css" />

Krok 3 - osadzenie wyświetlanych zdjęć w HTML.

W kodzie naszej strony wstawiamy odwołania do zdjęć, które chcemy wyświetlić wraz z linkami, do których mają prowadzić. Bardzo ważną linią jest: <div id="s1" class="pics">, w której zdefiniowane jest powiązanie ze stylami CSS (pics) oraz identyfikator id pokazu slajdów (s1).

<center>
<div id="s1" class="pics">
   <a href="http://www.istockphoto.com/file_closeup.php?id=1"><img src="img/photo1.jpg" /></a>
   <a href="http://www.istockphoto.com/file_closeup.php?id=2"><img src="img/photo2.jpg" /></a>
   <a href="http://www.istockphoto.com/file_closeup.php?id=3"><img src="img/photo3.jpg" /></a>
</div>
</center>

Krok 4 - odpalamy pokaz slajdów.

Poniżej tego, co wstawiliśmy w poprzednim kroku, wstawiamy kod, który uruchomi nasz pokaz.

<script type="text/javascript">
  $('#s1').cycle({
     fx: 'shuffle',
     random: 1,
     delay: -4000,
     width: 380,
     height: 260
  }); </script>

Krótkie wyjaśnienie powyższego kodu:

  • W drugiej lini odwołujemy się do wcześniej zdefiniowanej zmiennej s1, która identyfikuje zdjęcia do wyświetlenia.
  • W trzeciej lini definiujemy efekt, który zostanie użyty przy zmianie obrazków, w przykładzie użyłem shuffle, dostępnych jest wiele efektów.
  • W liniach 4-7 zdefiniowałem zmienne, które wykorzystuje skrypt:
    • random: 1 - obrazki wyświetlają się w losowej kolejności
    • delay: -4000 - opóźnienie w milisekundach pomiędzy dwoma kolejnymi obrazkami
    • width: 380, height: 260 - definicja wysokości i szerokości obrazków - wartości powinny być takie same, jak te wprowadzone w arkuszu styli CSS w kroku 2.

W przypadku kilku galerii na jednej stronie powtarzamy krok 3 i krok 4 z różnymi identyfikatorami s2...s10.
Pamiętajmy, żeby prezentowane zdjęcia były o podobnych rozmiarach, gdyż wszystkie zostaną automatycznie przeskalowane do wcześniej zdefiniowanych rozmiarów.

Podsumowanie

I jak? Chyba proste? Mam nadzieję, że każdy zrozumiał ten prościutki tutorial. Zachęcam do odwiedzenia strony domowej jQuery Cycle Plugin, na której znaleźć można wiele przykładów różnych efektów, jakie można uzyskać tym skryptem.

W razie problemów proszę pytać w komentarzach.

» Ściągnij jQuery 1.2.6
» Ściągnij jQuery Cycle Plugin 2.18
» Zobacz przykłady jQuery Cycle Plugin [en]

Zobacz także:


Komentarze

Rafał

To nie działa, jaką mam bibliotekę zrobić i w czym


14 Lutego 2009 13:46:13

Simon

Super pomysł na efektowną a zarazem prostą "wyświetlarkę" obrazków:) Dzięki za tutoriala - zaraz wypróbuję. Mam nadzieję, że będę miał wiecej szczescia niz kolega wyzej i mi jednak zadziała:)


18 Lutego 2009 10:13:10

Marcin

PADAKA beznadzieja nie działa wogóle - a znam sie troche na takich rzeczach ciekawy jestem jak sobie z tym radzą amatorzy szczerze nie polecam NIE REALNE


21 Lutego 2009 17:19:10

xxx

dziala tylko se sciagnijcie stad pliczki:
http://www.dabble.pl/js/jquery.cycle.all.pack.js
http://www.dabble.pl/js/jquery-1.2.3.min.js
pozdro


23 Lutego 2009 15:34:28

Mateusz

Dobree


03 Marca 2009 14:41:51

Jarek

Po wielu trudach i dokładnym czytaniu faq udało się i to z ciekawym efektem.możecie sprawdzić na www.marjomeble.webpark.pl


04 Marca 2009 01:12:43

Damian

to w ogóle nie działa, lepiej zajmij się czymś innym


18 Kwietnia 2009 11:30:36

Damian

Działa po pobraniu kodu z linków user'a xxx


18 Kwietnia 2009 11:53:00

Krzysiek

wszystko dziala bez zarzutu i nie trzeba wcale innych kodow pobierac


23 Kwietnia 2009 17:44:40

Adan

Marcin - nie znasz się. Wystarczy po prostu mieć biblioteczkę jquery i wsio. Dla tych którym nie wychodzi - mała instrukcja:

1. Przeczytaj instrukcję
2. Przeczytaj instrukcję
3. W razie kłopotów - przeczytaj instrukcję jeszcze raz


02 Maja 2009 22:00:52

Red

Nie działa? Zrobiłem ten pokaz u siebie w dwie minuty Panowie.. Prostszymi słowami już nie moża było tego opisac.


19 Maja 2009 13:19:03

Dawid

ładnie działa :)


31 Maja 2009 15:49:18

Ania

Kto mi pomoże?


03 Czerwca 2009 14:45:03

IWONA

Jestesm amaytorem jeszcze w tych sprawach a mi odrazu przeglądarka działala :D


08 Czerwca 2009 22:36:02

paweł

za zadnego grzyba nie działa niech ktoś uczony w mowie i piśmie wklei działający kod proszę


09 Czerwca 2009 21:25:36

paweł - mój kod

mój kod jest taki co w nim trzeba poprawić ????











$('#s1').cycle({
fx: 'shuffle',
random: 1,
delay: -4000,
width: 380,
height: 260
});


09 Czerwca 2009 21:26:44

Marcus

Dlaczego niechce dzialac jak zmieniam rodzaj efektu z shuffle na cokolwiek innego?


01 Sierpnia 2009 07:54:04

Pitek

Wszystko pięknie działa


03 Sierpnia 2009 22:27:04

kjk_info

zajebiste;p


06 Grudnia 2009 22:03:56

Edyta

działa:) tylko może ktoś wie dlaczego jeden obraz nie przechodzi w drugi tylko gasnie :((


20 Lutego 2010 15:28:16

Mua

A czy da się dodać na zdjęciu tekst, który byłby odnośnikiem do artykułu?
Dokładniej, jest pokaz slajdów, przechodzą zdjęcia a na każdym pojawia się ciemniejszy kwadracik a na nim tekst i np , po kliknięciu którego możemy przejść do "artykułu" opisującego zdjęcie, czy cokolwiek związanego z nim.
Z góry dzieki


13 Kwietnia 2010 10:07:23

Paweł

Jestem amatorem w tworzeniu stron.
Zrobiłem to wszystko krok po kroku zamieniałem dane liczbowe, np. Zmieniłem szerokość i wysokość zdjęć kiedy zapisałem to i otworzyłem swoją stronę wyskoczyły mi dwa moje zdjęcia obok siebie. Z tym, że w kroku 3 usunełem całe



Zamieniłem tylko < img src="Moje zdjęcie.jpg"> A resztę usunełem.


16 Maja 2010 12:06:43

Mateusz

czy da się zrobić żeby zdjecia przerzucały się w drugą stronę czyli w prawo?


23 Maja 2010 21:52:31

jurek

linki do skryptów js są błędne. Poszukajcie sobie tych 2 skryptów w google a wszystko będzie działać. Podziękowania dla autora za artykuł, bardzo się przydał. podrow


08 Czerwca 2010 20:43:46

Elvis

wszystko fajnie działa, dzięki za wskazówki, ale jak zawsze coś musi być nie tak, a mianowicie jest spoko jak fotki są w jednakowej orientacji, ja zaś w pokazie mam fotki w pionie i w poziomie i tu zaczynają się schodki, bo te pionowe mi rozciąga i brzydko wygląda, czy można jakoś temu zaradzić??

Dzięki za info


20 Czerwca 2010 20:50:59

Rafał

witam
wlsanie zainstalowalem tą galeri u siebie: http://www.dabble.pl/news/56

wszystko działa ale chcialem spowolnic przejscie obrazow i sie nie da;/ prosze o pomoc... lub na gg 8105326
POZDRAWIAM


03 Lipca 2010 00:22:18

Rafał

i skąd wziąć inne efekty przejść?


03 Lipca 2010 00:53:11

andrzej

wszystko działa duży +


27 Lipca 2010 21:02:47

Agnieszka

Naprawdę działa! Pięknie dziękuję :) Trochę się z tym namęczyłam, ale wyszło jak trzeba. Pozdrawiam:)


31 Sierpnia 2010 14:42:00

Łukasz

Potwierdzam, że działa. 5 minut i zrobione ;) Według mnie tutorial prowadzi nas bardzo zrozumiale do sukcesu. Pamiętajcie o ściągnięciu plików .js z internetu oraz wszystkich ścieżkach, żeby dostosować je do swoich plików.


08 Września 2010 19:12:59

Łukasz

Tu macie więcej info jakie są możliwości konfiguracji:

http://jquery.malsup.com/cycle/


08 Września 2010 19:27:08

Krzysztof

Rozwiązanie:
Jeżeli Wam nie działa, sprawdźcie kodowanie plików javascript. Jest ustawione na ANSI, a byćmoże musi być na utf'a. U mnie zmiana kodowania rozwiązała problem :)


15 Października 2010 09:52:25

Janek

A mogę prosić o uaktualnienie linków, ponieważ jeden z nich już nie działa.


27 Października 2010 21:47:33

Piotrek

Panowie aby poprawnie wszystko działało trzeba sciągnąć
# Bibliotekę jQuery.
# Plugin do jQuery - Cycle.
Tylko te najnowsze


01 Listopada 2010 15:52:48

maly

mi nie działa. Może ktoś podać linki do bibloteki jquery i pluginu do jquery? Bo być może ściągam złe i może dlatego nie chodzi.
Wyświetlają mi się jedynie same zdjęcia jedno pod drugim


11 Listopada 2010 21:21:24

SdCO

nic nietrzeba kombinowac , wstawic odpowiednie pliki, chula zajebiscie , czytac z uwaga tyle pzdr


18 Listopada 2010 19:10:11

Ananas

Czy da się zmienić ramkę zdjęci ? ;>


14 Stycznia 2011 16:29:00

wprost

Witam.
Wszystko działa w FF ale w IE 6 obrazki się rozsypują pojedynczo obok siebie.
Ale jak włączę tę str http://www.dabble.pl/news/56 w IE6 to ... działa a to jest przecież to samo:P
Pytanie co zmienić/dodać w kodzie żeby działało w IE 6


22 Stycznia 2011 22:33:46

Kacz

Dzięki, tego szukałem.


12 Lutego 2011 22:30:06

hoby

działa, tylko pobierając pliki z linków w kroku 1 należy zauważyć że plik jquery.cycle.all.pack.js nazywa się jquery.cycle.all.min.js dlatego w pliku_glownym.html umieszczamy



07 Marca 2011 11:41:46

Ana

No nie działa. Być może źle wpisuję link do strony, na której są fotosy. A bardzo chciałabym, aby wyszło.


03 Kwietnia 2011 16:54:27

kacper

działa tylko najlepiej dołączyć pliki nagłówkowe z example.htm one są zewnętrzne gdzieś na stronie oracle i działają bez zarzutu a te co można je ściągnąć to mają inne nazwy.


06 Maja 2011 10:04:29

matej

wszystko chodzi !!! POLECAM GORĄCO !!


30 Czerwca 2011 19:40:54

Marta

U mnie też chodzi, ale trzeba było zmienić kodowanie. Fajny pokaz slajdów, polecam;))


04 Lipca 2011 19:57:54

Pawel

A mi wyświetla poprawnie w operze i chrome, za to w ie jest przesunięcie i problem. Jakiś błąd? Jak to naprawić?

Strona www.pawelbaranski.yoyo.pl


13 Sierpnia 2011 23:58:11

Daro

Pięknie działa ;))

Pies pogrzebany jest w nazwie pliku (bibliotek) które pobraliśmy, ścieżka do nich jest zła i być może dlatego wam nie działa.

Już prawie zrezygnowałem, bo u mnie też nie działało, ale postanowiłem zerknąć na komentarze i znalazłem to czego szukałem. :))
Pozdrawiam! WARTO CZYTAĆ!


28 Września 2011 20:45:09

Maciej

A mi wszystko działa!
Linki do pobrania:
http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js

https://raw.github.com/malsup/cycle/master/jquery.cycle.all.js

Dodatkowo zwróćcie uwagę na to, że żeby zdjęcia się wyświetlały musicie utworzyć folder img i tam umieścić zdjęcia.


09 Października 2011 14:45:56

oorafalekoo

Wie ktos ja spowolnic przejscie miedzy slaidami bo ja nie moge napisz tu ktos jak to zrobic


01 Listopada 2011 12:14:01

Mariusz

Witam u mnie na stronie działa prawie dobrze, niestety pojawia się czarna - półprzeźroczysta ramka, którą jest widnieje przez pół strony. Jak to usunąć? Proszę o pomoc.
Cafebocian.pl/SzkolaRodzenia/


08 Listopada 2011 14:17:23

Tomaszek

UWAGA!!! UWAGA!!!
Wszystko działa tylko trzeba zwrócić uwagę na nazwę pliku jquery cycle!!! Po ściągnięciu nazywa się on "jquery.cycle.all" z rozszerzeniem ".js". Trzeba zmienić jego nazwę na "jquery.cycle.all.pack" z rozszerzeniem ".js" czyli w nazwie dodajemy ".pack" ponieważ link w kodzie odwołuje się do pliku o takiej nazwie. Po takim zabiegu i wykonaniu wszystkich czynności opisanych w instrukcji wszystko działa aż miło:) pozdrawiam


01 Grudnia 2011 20:18:24

Ania

Aby spowolnić slajd o 10 sekund dodaj w skrypcie (między a )polecenie timeout: 10000,


08 Grudnia 2011 13:27:37

Ryszard Gajdzik

Wszystko działa.Tak jak jest podane z różnymi efektami.Należy tylko zrobić odpowiednie odwołanie do do jquery.Jeżeli ktoś nie chce mieć ramki wystarczy usunąć w css border: 1px solid #ccc;


13 Grudnia 2011 11:34:43

pixi

Super wszystko śmiga , że Hej.

A może jeszcze jakiś kod ja zastosować efekt karuzeli ?


22 Stycznia 2012 19:20:23

vinyl

wszystko jest OK - działa, że miło
... a czytając wcześniejsze komentarze... hmmm czy na pewno foty są zamieszczone w katalogu "img" ?; czy biblioteka jquery.cycle.all.pack.js zawiera w nazwie słowo "pack" (bo ściągana biblioteka jest bez tego słowa w nazwie) ?; czy nazwy zdjęć zawierają spacje, duże litery, polskie znaki ? .... z tym musi działać.
Bez tych trywialnych uwag które dodałem, a których nie doczytałem to uważam, że ten TUTORIAL JEST IDEALNIE NAPISANY

szacunek dla autora


04 Maja 2012 21:36:02

Radek

dzięki mam nadzieję, że dam radę. Pozdrawiam!


19 Grudnia 2012 14:25:03

pierniczanka

Ludzie! Pierwszy raz nie wyszło, ale po przeczytaniu komentarzy, że fajna... powili i dokładnie... ODPALIŁO! Wyszło świetnie. POLECAM :-)


01 Lipca 2013 19:37:21


Skomentuj

Pole komentarz jest wymagane.