Microstocki
Pokaz slajdów na Twojej stronie www!
Kategorie: Artykuły, Ciekawostki, Inne, Porady
Ś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.
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.