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:

• Darmowe zdjęcia w internecie

» Cofnij » Marcin Szajda 14 Maja 2008

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

Skomentuj

Pole komentarz jest wymagane.

Imię: Strona www: Komentarz: