Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [php] wyświetlanie kolejno obrazów po upływie jakiegoś czasu
Forum PHP.pl > Forum > PHP
lamcpp
11.06.2009, 09:41:02
witam,
mam obrazki zapisane w postaci tablicy:
Kod
$obrazki = array('obraz1.jpg','obraz2.jpg','obraz3.jpg','obraz4.jpg');


Chciałbym aby te obrazki były wyświetlane na stronie w sposób następujący: najpierw wyświetlany jest 'obraz1.jpg' po 8 sekundach w miejscu tego obrazu wyświetlany zostanie 'obraz2.jpg'. Znowu mija kolejne 8 sekund i teraz 'obraz3.jpg' ma być wyswietlany. Kolejne 8 sekund i 'obraz4.jpg'..
Jak to zrobić? Istnieje jakaś funkcja czasowa w php, która nada się do tego zadania? ewentualnie jakieś lepsze rozwiązania.

I jeśli byłoby możliwe jeszcze implementacja dwóch przycisków do tego: zatrzymaj i wznów, tak by użytkownik mógł zatrzymac dany obrazek i wznowić go kiedy będzie chciał.
kmiciu
11.06.2009, 10:23:48
Poszukaj hasła JQuery Slider / Glider w wyszukiwarce.
Zazwyczaj mają taką budowę, że przesuwają DIV-y. Mają też możliwości konfiguracji.
Robisz takż konstrukcję generując poszczegolne obrazki w pętli foreach z tablicy.
Przykład ogrody: http://www.jjjogrody.pl/
Skrypt: http://www.dynamicdrive.com/dynamicindex17...ntentglider.htm
Kod
            <div id="galglide" class="galglidecontent">

            <div class="glidecontent">
            <img src="img/bgGal1.jpg" alt="" />
            </div>

            <div class="glidecontent">
            <img src="img/bgGal2.jpg" alt="" />
            </div>

            <div class="glidecontent">
            <img src="img/bgGal3.jpg" alt="" />
            </div>

            <div class="glidecontent">
            <img src="img/bgGal4.jpg" alt="" />
            </div>

            </div>
kallosz
11.06.2009, 10:35:31
ja stosuje:
jquery cycle
lamcpp
11.06.2009, 12:29:07
postanowiłem sięgnąć do jquery cycle, ale coś mi to niedziała, robie tak:

w sekcji <head> dodaje:
Kod
<script type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.pack.js"></script>


w pliku css dodaje:
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;
}

ok, już jest wszystko dobrze:)) dzięki wszystkim za pomoc
problemem była zła ścieżka do plików js a własciwie ten kawałek src="js/



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



W sekcji body dodaje:
Kod
<center>
<div id="s1" class="pics">
<img src="mapa1.png" />
<img src="mapa2.png" />
  
</div>
</center>

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


I niestety to nie działa. Tak jakby skrypt wogóle nie działał. Na stronie wyswietlają się pod sobą obydwa zdjecia..;/

Ok już wszystko dobrze, problemem była ścieżka do plików .js a własciwie początek src="js/
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.