jQuery i PHP - dynamiczny pokaz slajdów
Hej. Czy jest możliwe połączenie czegoś takiego:http://jonraasch.com/blog/a-simple-jquery-slideshow i opcji wyświetlania zdjęć za pomocą php? Chodzi mi o to, że chciałbym móc dodawać za pomocą formularza zdjęcia, które byłyby od razu, automatycznie wyświetlane by były w takim pokazie slajdów, a nie za pomocą wpisywania html-owego <img src=' '> za każdym razem. Czy jest coś takiego możliwe? Dodam tylko, że pokaz jest jQuery.
Kod php służy do generowania kodu html. Zdjęcia co teraz statycznie wpisujesz to kod html. Więc bez problemu możesz go wygenerować w php dynamicznie. Wystarczy, że w php pobierzesz te zdjęcia z miejsca gdzie je zachowujesz i na tej podstawie wygenerujesz ich kod html
No OK, ale mam coś takiego:
i ok, wyświetla, ale jakby nie dopełnia pętli, bo wyświetla się ilość slajdów i nie wraca automatycznie do pierwszego slajdu, tylko po paru sekundach. Można to zmienić?, znaczy się czy można zrobić tak, aby te zdjęcia się w kółko wyświetlały bez przerw?
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$dir = 'obrazki_slajdy';
$imagesExtensions = array('jpg', 'jpeg', 'gif', 'png');
$files = scandir($dir);
foreach($files AS $file)
{
$fileinfo = pathinfo($file);
if(is_file($dir.'/'.$file) AND in_array($fileinfo['extension'], $imagesExtensions))
{
echo '<img src="'.$dir.'/'.$file.'" alt="" /><br />';
}
}
$imagesExtensions = array('jpg', 'jpeg', 'gif', 'png');
$files = scandir($dir);
foreach($files AS $file)
{
$fileinfo = pathinfo($file);
if(is_file($dir.'/'.$file) AND in_array($fileinfo['extension'], $imagesExtensions))
{
echo '<img src="'.$dir.'/'.$file.'" alt="" /><br />';
}
}
i ok, wyświetla, ale jakby nie dopełnia pętli, bo wyświetla się ilość slajdów i nie wraca automatycznie do pierwszego slajdu, tylko po paru sekundach. Można to zmienić?, znaczy się czy można zrobić tak, aby te zdjęcia się w kółko wyświetlały bez przerw?
Nie widzę byś ustawiał class="active" dla pierwszego zdjęcia. W kodzie na stronie jest to ustawione - może to w tym problem
no niestety, dodałem, ale to nic nie dało. Znaczy się, nic sie nie zmieniło, wciąż są przerwy między wyświetlaniem slajdów
No ale przerwy są, bo podales czas np. 5 sekund. Jak nie chcesz przerw to podaj mniejszy czas.
No i to, niestety nic nie dało. Zmieniłem czas wyświetlania poszczególnych zdjęć (np. wartość '0' zmienia automatycznie, ale tylko zdjęcia które są w 'zestawie'), a gdy się skończy 'zestaw' (tzn. gdy wyświetli już wszystkie zdjęcia z katalogu) no to pozostaje pusta kartka (czas między takimi 'zestawami' też jest ustawiony na 0) próbowałem ustawić na wartości ujemne, ale też ten sam efekt. Nic się nie zmieniło... Niestety
pokaz kod po zmianach
Kod php wyświetlający zdjęcia:
a to jest część kodu jquery.cycle.js odpowiadająca za akcję slajdów (fragment):
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$dir = 'obrazki_slajdy';
$imagesExtensions = array('jpg', 'jpeg', 'gif', 'png');
$files = scandir($dir);
foreach($files AS $file)
{
$fileinfo = pathinfo($file);
if(is_file($dir.'/'.$file) AND in_array($fileinfo['extension'], $imagesExtensions))
{
echo '<img src="'.$dir.'/'.$file.'" alt="" class="active" /><br />';
}
}
$imagesExtensions = array('jpg', 'jpeg', 'gif', 'png');
$files = scandir($dir);
foreach($files AS $file)
{
$fileinfo = pathinfo($file);
if(is_file($dir.'/'.$file) AND in_array($fileinfo['extension'], $imagesExtensions))
{
echo '<img src="'.$dir.'/'.$file.'" alt="" class="active" /><br />';
}
}
a to jest część kodu jquery.cycle.js odpowiadająca za akcję slajdów (fragment):
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
// override these globally if you like (they are all optional)
$.fn.cycle.defaults = {
fx: 'fade', // name of transition effect (or comma separated names, ex: 'fade,scrollUp,shuffle')
timeout: 4000, // milliseconds between slide transitions (0 to disable auto advance)
timeoutFn: null, // callback for determining per-slide timeout value: function(currSlideElement, nextSlideElement, options, forwardFlag)
continuous: 0, // true to start next transition immediately after current one completes
speed: 1000, // speed of the transition (any valid fx speed value)
speedIn: null, // speed of the 'in' transition
speedOut: null, // speed of the 'out' transition
....
backwards: false // true to start slideshow at last slide and move backwards through the stack
};
$.fn.cycle.defaults = {
fx: 'fade', // name of transition effect (or comma separated names, ex: 'fade,scrollUp,shuffle')
timeout: 4000, // milliseconds between slide transitions (0 to disable auto advance)
timeoutFn: null, // callback for determining per-slide timeout value: function(currSlideElement, nextSlideElement, options, forwardFlag)
continuous: 0, // true to start next transition immediately after current one completes
speed: 1000, // speed of the transition (any valid fx speed value)
speedIn: null, // speed of the 'in' transition
speedOut: null, // speed of the 'out' transition
....
backwards: false // true to start slideshow at last slide and move backwards through the stack
};
class="active" miales dodac tylko do pierwszego zdjęcia a nie do każdego.
OK, ale te zdjęcia pobierane są automatycznie wszystkie z folderu, to jak mam wyświetlić to jedno zdjęcie w którym ma być klasa activ?
OK, ale te zdjęcia pobierane są automatycznie wszystkie z folderu,
Dzięki, że mi to wyjaśniłeś "kapitanie oczywisty" to jak mam wyświetlić to jedno zdjęcie w którym ma być klasa activ?
A liczyc umiesz? Zwiększaj w petli zmienną $i. Jesli bedzie ona miala wartosc 1 znaczy, że jest to pierwsze zdjęcie i do tego zdjęcia masz dodać tę klasę.
Ok, zrobiłem tak:
i teraz nic mi się nie wyświetla. Może gdzieś błąd popełnilem?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$dir = 'obrazki_slajdy';
$imagesExtensions = array('jpg', 'jpeg', 'gif', 'png');
$files = scandir($dir);
foreach($files AS $file)
{
$fileinfo = pathinfo($file);
for ($file=1; $file>1; $file++)
{
if(is_file($dir.'/'.$file) AND in_array($fileinfo['extension'], $imagesExtensions))
{
echo '<img src="'.$dir.'/'.$file.'" alt="" class="active" /><br />';
}
}
}
$imagesExtensions = array('jpg', 'jpeg', 'gif', 'png');
$files = scandir($dir);
foreach($files AS $file)
{
$fileinfo = pathinfo($file);
for ($file=1; $file>1; $file++)
{
if(is_file($dir.'/'.$file) AND in_array($fileinfo['extension'], $imagesExtensions))
{
echo '<img src="'.$dir.'/'.$file.'" alt="" class="active" /><br />';
}
}
}
i teraz nic mi się nie wyświetla. Może gdzieś błąd popełnilem?
No ale po co tworzysz kolejnego FOR w FOREACH? Przecież pętlę już masz. Tą pętlą jest FOREACH. Jedyne co musisz zrobić to zwiększać $i w tej pętli. Zadnego dodatkowego FOR nie potrzebujesz
Teraz mam tak. Niby działa, ale też parę sekund (od 3 do 6 sekund) czekam, aż automatycznie przełączy slajd
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
$file = 1;
foreach($files AS $file)
{
$fileinfo = pathinfo($file);
if(is_file($dir.'/'.$file) AND in_array($fileinfo['extension'], $imagesExtensions))
{
echo '<img src="'.$dir.'/'.$file.'" alt="" class="active" /><br />';
}
$file++;
}
foreach($files AS $file)
{
$fileinfo = pathinfo($file);
if(is_file($dir.'/'.$file) AND in_array($fileinfo['extension'], $imagesExtensions))
{
echo '<img src="'.$dir.'/'.$file.'" alt="" class="active" /><br />';
}
$file++;
}
Przeciez active nadal nadajesz dla kazdego obrazka....
Napisałem wyraźnie, cytuje:
Pozatym nie $file a $i... przecież pod $file zapisujesz już coś innego... Tyle czasu siedzisz na forum jednym i drugim a nadal takie błędy robisz..... czemu ty się w ogóle php zająłeś? Ktoś ci kazał? Bo jeśli z własnej woli jako hobby to nie idzie ci to. Zajmim się może wędkowaniem
Nie chcę cię obrazić, ale zwrócić ci uwagę, że Ty nie robisz żadnych postępów. żadnych...
Napisałem wyraźnie, cytuje:
Zwiększaj w petli zmienną $i. Jesli bedzie ona miala wartosc 1 znaczy, że jest to pierwsze zdjęcie i do tego zdjęcia masz dodać tę klasę.
Pozatym nie $file a $i... przecież pod $file zapisujesz już coś innego... Tyle czasu siedzisz na forum jednym i drugim a nadal takie błędy robisz..... czemu ty się w ogóle php zająłeś? Ktoś ci kazał? Bo jeśli z własnej woli jako hobby to nie idzie ci to. Zajmim się może wędkowaniem
Nie chcę cię obrazić, ale zwrócić ci uwagę, że Ty nie robisz żadnych postępów. żadnych...
Dzięki za cenne porady i uwagi. Przykre są te słowa, ale zamiast mnie ganić, mógłbyś dać choć kawałek kodu dla przykładu. Poza tym, jako, że się uczę, popełniam błędy. Ty ich nie popełniałeś, gdy się uczyłeś PHP? Poza tym, tak PHP jest dla mnie jak hobby, nikt mi nie kazał się tego uczyć, jest to ciekawe zajęcie, idzie mi... średnio, ale cóż. Przynajmniej się pytam dookoła jak co mam zrobić. A jak chcesz się przekonać czy coś umiem, zapraszam na http://kozice.pl. Ja sam tę stronę zrobiłem.
PS. Nie lubię wędkować
PS. Nie lubię wędkować
Przykre są te słowa, ale zamiast mnie ganić, mógłbyś dać choć kawałek kodu dla przykładu.
To jest prosta sprawa $i + IF. Po takim czasie jakim zajmujesz się php mógłbyś już umieć korzystać ze zwiększania zmiennej i uzywać IF. Dając ci wskazówki próbuję na Tobie wymusić dojscie do rozwiązania samemu - lepiej to wówczas zrozumiesz. Wiem to z doświadczenia. A nie są to jakieś super hiper trudne sprawy i jeśli nadal masz z tym problem po tak długim czasie to tym bardziej musisz to przećwiczyć.
Poza tym, jako, że się uczę, popełniam błędy. Ty ich nie popełniałeś, gdy się uczyłeś PHP?
Oczywiście, że popełniałem. Ale jak ktoś doświadczony mi mówił: "Włącz wyświetlanie błędów" i podawał jak to zrobić to ja to robiłem od razu. Ten ktoś nie musiał mi tego 10 razy mówić.
Jak ktoś doświadczony mi mówił, zwiększaj zmienną $i to ja zwiększałem zmienną $i a nie ni stąd ni zowąd zmienną $file, którą dwie linijki wyżej uzywałem do czegoś innego.
Każdy popełnia błędy, ale ty bardzo częstwo w ogóle nie czytasz co się do Ciebie pisze. Nie raz mówiłem ci coś x razy i dopiero po x tym razie raczyłeś daną rzecz spełnić. Widzisz różnicę między "popełnianiem błędów" a "olewaniem"?
Wersja lite, specjalnie dla Ciebie
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
$i = 0;
foreach($files AS $file)
{
$fileinfo = pathinfo($file);
if(is_file($dir.'/'.$file) AND in_array($fileinfo['extension'], $imagesExtensions))
{
$i++;
if ($i == 1) echo '<img src="'.$dir.'/'.$file.'" alt="" class="active" /><br />';
else echo '<img src="'.$dir.'/'.$file.'" alt=""/><br />';
}
}
?>
$i = 0;
foreach($files AS $file)
{
$fileinfo = pathinfo($file);
if(is_file($dir.'/'.$file) AND in_array($fileinfo['extension'], $imagesExtensions))
{
$i++;
if ($i == 1) echo '<img src="'.$dir.'/'.$file.'" alt="" class="active" /><br />';
else echo '<img src="'.$dir.'/'.$file.'" alt=""/><br />';
}
}
?>
Wypróbowałem ten kod, ale niestety efekt jest taki, że nie widzę zmian...
Pokaż źródło wygenerowanych obrazków





