Forum PHP.pl > [PHP][JavaScript] Jak posortować automatyczną galerie.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [PHP][JavaScript] Jak posortować automatyczną galerie.

mirkolo

5.11.2014, 11:05:09

Naskrobałem kiedyś z różnymi pomocami mały skrypt który tworzy prostą galerię na podstawie plików w katalogu.
Skrypt działa ładnie, z jednym małym poroblemem, zdjęcia są nie posortowane.
Na poczatku mi to nie przeszkadzało bo galeria zawierała zdjecia bez chronologi.
teraz chce stworzyć galerię która będzie chronologiczna.
nie wiem jak to poprawić.. :-( moje poprawki dają mizerne efekty.

Czy da się to jakoś prosto zrobić unikając zmiany wszystkiego na MySQL?

[PHP] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
	<title>Galeria z budowy</title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
	<script type="text/javascript" src="javascript/highslide-with-gallery.js"></script>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript">
	hs.graphicsDir = 'javascript/images/';
	hs.align = 'center';
	hs.transitions = ['expand', 'crossfade'];
	hs.outlineType = 'rounded-white';
	hs.fadeInOut = true;
	//hs.dimmingOpacity = 0.75;
 
	// Add the controlbar
	if (hs.addSlideshow) hs.addSlideshow({
		//slideshowGroup: 'group1',
		interval: 5000,
		repeat: false,
		useControls: true,
		fixedControls: 'fit',
		overlayOptions: {
			opacity: .75,
			position: 'bottom center',
			hideOnMouseOut: true
		}
	});
</script>
 
</head>
<body  bgcolor="#EEEEEE">
 
<table align="center" border="0" bgcolor="cccccc">
 
	<tr><td colspan="3"><?php include ('menu.php') ?></td></tr>
	<tr><td colspan="3" align="center"><h4>Galeria w trakcie produkcji</h4></td></tr>
  <tr><td colspan="3" align="center">
 
<div id="galeria">
<ul>
<?php
$katalog = "obrazki";
$katalogminiaturki = "miniaturki";
$galeria = opendir( $katalog );
while ( $zdjecie = readdir( $galeria ) ){
 
$odczyt = pathinfo( $katalog.'/'.$zdjecie );
  if ( $odczyt['extension']  == 'jpg' ){
 
    echo '<li><a href="'.$katalog.'/'.$zdjecie.'" class="highslide" onclick="return hs.expand(this)" title="Zdjęcie: '.$zdjecie.'"><img width="100" height="78" src="'.$katalogminiaturki.'/'.$zdjecie.'" alt="Zdjęcie: '.$zdjecie.'" /></a></li>';
  }
 
}
closedir($galeria);
?>
</ul>
</div>
 
</td></tr>
</table>
</body>
</html>
[PHP] pobierz, plaintext

grzes999

5.11.2014, 11:11:45

Jeżeli nie chcesz tego robić na bazie danych to masz dwa sposoby:

1. Nadawanie kolejnym plikom nazy w kolejności alfabetycznej, wtedy powinnno ci je odczytywać pokoleii.
2. Przed wyświetleniem utworzyć tablicę z nzawami plików oraz datą ich modyfikacji filemtime, posrtować i w pętli wyświetlić.

mirkolo

5.11.2014, 11:21:38

Na pomysł pierwszy wpadłem, (nazwy D010,D020, D030 ...) wyświetla w losowej kolejności
albo raczej wg jakiegoś sortowania mi nieznanego, bo na wszystkich komputerach i za każdym razem jest ta sama kolejność, ale nie jest ani wg. nazwy, ani daty utworzenia, ani rozmiaru.

Data utworzenia nie wiem czy bedzie najlepszym pomysłem, bo zdjęcia pochodza z rożnych źródeł, potem są obrabiane partiami, więc data utworzenia pliku nie zawsze będzie wyznacznikiem chronologi, dlatego stosuje numerowanie co 10 aby móc po środku wstawić jakiś numer zdjecia. A potem znów sobie przenumerować automatycznie co 10.

StrefaPi

5.11.2014, 11:25:27

zapisz nazwy zdjęć/plików w tablicy posortuj tablicę i w drugiej pętli ja dopiero wyświetlaj... :)

grzes999

5.11.2014, 11:31:21

Cytat(mirkolo @ 5.11.2014, 11:21:38 )

Żeby sortowało pliki należy skorzystać z funckji scandir

Odnośnie sortowania po datach może pobrać datę utworzenia pliku; a nie ostatniej modyfikacji. Chyba, że ta obróbka tworzy nowe pliki wtedy to nie zadziała.

mirkolo

5.11.2014, 13:31:26

czyli fragment:

[PHP] pobierz, plaintext 
$galeria = opendir( $katalog );
while ( $zdjecie = readdir( $galeria ) ){
 
$odczyt = pathinfo( $katalog.'/'.$zdjecie );
  if ( $odczyt['extension']  == 'jpg' ){
 
    echo '<li><a href="'.$katalog.'/'.$zdjecie.'" class="highslide" onclick="return hs.expand(this)" title="Zdjęcie: '.$zdjecie.'"><img width="100" height="78" src="'.$katalogminiaturki.'/'.$zdjecie.'" alt="Zdjęcie: '.$zdjecie.'" /></a></li>';
  }
}
closedir($galeria);
[PHP] pobierz, plaintext

mam zamienić na coś z

[PHP] pobierz, plaintext 
$odczyt2 = scandir( $galeria, 1); 
//  (1 aby odwrócic sortowanie, najnowsze na górze)
print_r($odczyt2);
[PHP] pobierz, plaintext

zaraz spróbuje poeksperymentować...

------------------

Zadzialało:-)
ale pojawil się problem taki że, tworzy też odniesienie do plików/katalogów "." oraz ".."
probowalem dodać linię nr 5 aby uwzględniał tylko jpg tak jak wcześniej
ale wtedy nic się nie wyświetla pomija wszystko...

[PHP] pobierz, plaintext 
$odczyt2 = scandir($katalog, 1); 
 
foreach ($odczyt2 as $number => $zdjecie) {
 
  if ( $zdjecie['extension']  == 'jpg' ){
 
    echo '<li><a href="'.$katalog.'/'.$zdjecie.'" class="highslide" onclick="return hs.expand(this)" title="Zdjęcie: '.$zdjecie.'"><img width="100" height="78" src="'.$katalogminiaturki.'/'.$zdjecie.'" alt="Zdjęcie: '.$zdjecie.'" /></a></li>';}
   }
[PHP] pobierz, plaintext

jak tą linijke poprawić aby uwzględniało tylko jpg?

-------------------
zmieniłem na:

[PHP] pobierz, plaintext 
$odczyt2 = scandir($katalog, 1); 
 
foreach ($odczyt2 as $number => $zdjecie) {
 
   $file_extn = substr( $zdjecie, strrpos( $zdjecie, '.')+1);
  if ($file_extn  == 'jpg' ) {
 
    echo '<li><a href="'.$katalog.'/'.$zdjecie.'" class="highslide" onclick="return hs.expand(this)" title="Zdjęcie: '.$zdjecie.'"><img width="100" height="78" src="'.$katalogminiaturki.'/'.$zdjecie.'" alt="Zdjęcie: '.$zdjecie.'" /></a></li>';}
   }
[PHP] pobierz, plaintext

i działa. Dzięki za pomoc:-)

=============================

dla potomnych cały kod Może komuś się przyda:-)

[PHP] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
	<title>Galeria z budowy</title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
	<script type="text/javascript" src="javascript/highslide-with-gallery.js"></script>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript">
	hs.graphicsDir = 'javascript/images/';
	hs.align = 'center';
	hs.transitions = ['expand', 'crossfade'];
	hs.outlineType = 'rounded-white';
	hs.fadeInOut = true;
	//hs.dimmingOpacity = 0.75;
 
	// Add the controlbar
	if (hs.addSlideshow) hs.addSlideshow({
		//slideshowGroup: 'group1',
		interval: 5000,
		repeat: false,
		useControls: true,
		fixedControls: 'fit',
		overlayOptions: {
			opacity: .75,
			position: 'bottom center',
			hideOnMouseOut: true
		}
	});
</script>
</head>
<body  bgcolor="#EEEEEE">
<table align="center" border="0" bgcolor="cccccc">
 
	<tr><td colspan="3"><?php include ('menu.php') ?></td></tr>
	<tr><td colspan="3" align="center"><h4>Galeria w trakcie produkcji</h4></td></tr>
  <tr><td colspan="3" align="center">
 
<div id="galeria">
<ul>
<?php
$katalog = "obrazki";
$katalogminiaturki = "miniaturki";
 
$odczyt = scandir($katalog, 1); //scandir($katalog, 1) aby sortować od końca, jak ma sortowac normalnie usuń ,1
 
foreach ($odczyt as $number => $zdjecie) {
 
   $file_extn = substr( $zdjecie, strrpos( $zdjecie, '.')+1);
  if ($file_extn  == 'jpg' ) {
 
    echo '<li><a href="'.$katalog.'/'.$zdjecie.'" class="highslide" onclick="return hs.expand(this)" title="Zdjęcie: '.$zdjecie.'"><img width="100" height="78" src="'.$katalogminiaturki.'/'.$zdjecie.'" alt="Zdjęcie: '.$zdjecie.'" /></a></li>';}
   }
?>
</ul>
</div>
</td></tr>
</table>
</body>
</html>
[PHP] pobierz, plaintext

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.