Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Pokaz slajdów
Forum PHP.pl > Forum > Gotowe rozwiązania > Szukam
stonka93
7.09.2012, 12:10:24
Chciałbym umieścić na stronie zmieniający się tekst (coś w rodzaju pokazu slajdów).

Proszę o pomoc.
rocktech.pl
7.09.2012, 12:37:06
Witam.

Doprecyzuj troszkę. Podaj przykład, który widziałeś ...

Z czym masz problem dokładnie?

Hasło w google to np. text rotator, text carousel.
stonka93
7.09.2012, 14:00:09
W zmiennych (w php) trzymany jest kod html a pokaz slajdów ma zmieniać automatycznie zmienne wyświetlane w pętli.

Problemem dla mnie jest zrobienie skryptu (najlepiej w jquery), który ma za zadanie wyświetlać w pętli zawartość zmiennych php na 15 sekund.
rocktech.pl
7.09.2012, 14:15:37
Zabrałbym się do tego tak:

1. Zmienne z php zamieniasz na tablicę json.
2. Następnie wykorzystując metodę each iterujesz po obiekcie zmieniając treść określonego kontenera.

Pseudookod:
[JAVASCRIPT] pobierz, plaintext 
  1. function rotate () {
  2.     json = ['zmienna php1','zmienna php2'];
  3.     $.each(json, function(index, value) { 
  4.         $('#kontener').html( value );
  5.     });
  6. }
[JAVASCRIPT] pobierz, plaintext


Potrzebnie ci będzie jeszcze setTimeout. Bo jquery nie dorobiło się natywnego periodicalExecuter.
stonka93
7.09.2012, 14:30:32
Mam kod js odpowiedzialny za zmiane treści :

CODE
<script type="text/javascript">
$(document).ready(function()
{
setupRotator();
});
function setupRotator()
{
if($('.textItem').length > 1)
{
$('.textItem:first').addClass('current').fadeIn(2000);
setInterval('textRotate()', 10000);
}
}
function textRotate()
{
var current = $('#quotes > .current');
if(current.next().length == 0)
{
current.removeClass('current').fadeOut(2000);
$('.textItem:first').addClass('current').fadeIn(5000);
}
else
{
current.removeClass('current').fadeOut(2000);
current.next().addClass('current').fadeIn(2000);
}
}
</script>


Czy można dołożyć do tego kodu efekt ładowania obrazka coś w tym stylu:
CODE
http://gwwko.web44.net/podglad2.php
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-2024 Invision Power Services, Inc.