images-Verzeichnis auslesen, sortieren u. anzeigen

[Kirzz]

Hallo Zusammen!

Ich habe mir einen Ast gegoogelt, komme aber nicht so weiter, wie ich's gern hätte.

Ich brauche ein script, das images aus einem Ordner ausliest, und nach Namen sortiert in ein vogefertigtes Template ausgibt. Klasse wäre, wenn sich die Sortierreihenfolge im script nach Wunsch ändern lässt, A-Z, Z-A, zum Beispiel? Muss aber nicht sein.

Ich habe einiges im Web gefunden, scheitere aber bei der Ausgabe der Daten ins Template, leider habe ich null Ahnung von PHP. Die jüngsten scripts die ich gefunden habe waren von 2005 und nicht wirklich brauchbar. Kennt vielleicht jemand was geeignetes?

<div style="width:600px;">
<div style="background-color:#FFF;">
<div style="background-color:#CCC;"><img src=„verzeichnis/a_datei.gif“ alt=""></div>
<div style="background-color:#EEE;"><img src=„verzeichnis/b_datei.gif“ alt=""></div>
<div style="background-color:#CCC;"><img src=„verzeichnis/c_datei.gif“ alt=""></div>
<div style="clear:both;"></div>
</div>

<div style="background-color:#FFF;">
<div style="background-color:#CCC;"><img src=„verzeichnis/d_datei.gif“ alt=""></div>
<div style="background-color:#EEE;"><img src=„verzeichnis/e_datei.gif“ alt=""></div>
<div style="background-color:#CCC;"><img src=„verzeichnis/f_datei.gif“ alt=""></div>
<div style="clear:both;"></div>
</div>

<div style="background-color:#FFF;">
<div style="background-color:#CCC;"><img src=„u.s.w. “ alt=""></div>
…
<div style="clear:both;"></div>
</div>

Würde es funktionieren, das die Daten sich in dreispaltigen divs untereinander aufbauen, je nach Inhalt und Menge des ausgelesenen Ordners?

Ich hoffe das mein Wunsch nicht allzu blöd oder unmöglich ist, wie gesagt, ich habe kaum Ahnung von PHP.

Danke für jede Hilfe,
Gruß, Kazuhisa

[TobiaZ]

Was das Script angeht, so ist es wahrscheinlich zu simpel als dass es dafür etwas fertiges gäbe. Im Projekthilfe-Forum bist du daher wahrscheinlich besser aufgehoben.

Würde es funktionieren, das die Daten sich in dreispaltigen divs untereinander aufbauen, je nach Inhalt und Menge des ausgelesenen Ordners?

Klar. Das ist ja nur eine Abfrage, die im PHP-Code definiert werden muss. solltest allerdings noch abklären, was passieren soll, wenn "je nach Inhalt und Menge" nicht eintrifft.

Dieser Spezialfall unterstützt jedoch meine Vermutung, dass du nichts fertiges finden wirst, sondern auf die Projekthilfe setzen musst, oder lieber ein Jobangebot draus machst.

[Kirzz]

@TobiaZ
Was das Script angeht, so ist es wahrscheinlich zu simpel als dass es dafür etwas fertiges gäbe. Im Projekthilfe-Forum bist du daher wahrscheinlich besser aufgehoben.

Danke, ich habs noch einmal im entspr. Forum gepostet. Ich wusste nicht, das es so simpel ist, für mich ist es unlösbar

[AmicaNoctis]

Danke, ich habs noch einmal im entspr. Forum gepostet.

Hättest du nicht tun müssen. Ich hab das Duplikat eben gelöscht.

Bitte die Zitat-Funktion () benutzen, wenn du dich auf einen anderen Beitrag beziehst.

Gruß,

Amica

[boeserfrosch]

Du könntest es mit folgendem Script probieren:
Hier bei werden dann die Biler in drei gleichgroße Div´s geschrieben.

<?php
//Verzeichnis der Bilder
$verzeichnis = './xyz/';
$order = "ASC";
if(isset($_GET["AbisZ"]))
{
$order = $_GET["AbisZ"];
}
$verz = scandir($verzeichnis);
if($order == "ASC")
{
sort($verz);
}
else
{
rsort($verz);
}
$n = count($verz);
$a = round($n/3);
$i = 0;
$x = 1;
if($order == "ASC")
{
    echo "<a href=\"$_SERVER[PHP_SELF]?AbisZ=DESC\">Z - A</a><br>";
}
else
{
    echo "<a href=\"$_SERVER[PHP_SELF]?AbisZ=ASC\">A - Z</a><br>";
}
echo "<div style=\"width:600px;\">
<div style=\"background-color:#FFF;\">";
foreach($verz as $file)
{
    $info = @getimagesize($verzeichnis.$file);
    if(($info[2]==(1||2||3)) && $file != "." && $file != ".." 
&& !is_dir($verzeichnis.$file) && is_file($verzeichnis.$file))
    {
    $i++;
if($i == $a and $i != $n)
{
    echo "ok";
    $i = 0;
    echo "</div>
    <div style=\"background-color:#FFF;\">";
}
if($x == 1)
{
    $x = 2;
    $farbe = "#CCC";
}
else
{
    $x = 1;
    $farbe = "#EEE";
}
echo "<div style=\"background-color:$farbe;\"><img src=\"$verzeichnis$file\"></div>";
    }
}
echo "</div>";
?>

[Kirzz]

Du könntest es mit folgendem Script probieren:
Hier bei werden dann die Biler in drei gleichgroße Div´s geschrieben.

Danke, das auslesen des Verzeichnisses funktioniert wunderbar.
Die Ausgabe hakelt noch ein bißchen, bevor ich schreibe wo es hakt, hier mein Wunschaufbau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<style type="text/css">
<!--
.refs {
width : 100%;
margin-top : 10px;
}
.refs_links {
float : left;
width : 200px;
height : 150px;
margin-right : 10px;
border : 1px solid #cccccc;
background-position : center;
background-attachment : fixed;
background-repeat : no-repeat;
}
.refs_mitte {
float : left;
width : 200px;
height : 150px;
margin-right : 10px;
border : 1px solid #cccccc;
background-position : center;
background-attachment : fixed;
background-repeat : no-repeat;
}
.refs_rechts {
float : left;
width : 200px;
height : 150px;
border : 1px solid #cccccc;
background-position : center;
background-attachment : fixed;
background-repeat : no-repeat;
}
.spacer {
clear : both;
}
-->
</style>

</head>

<body>

<div class="refs">
<div class="refs_links" style=\"background-image: url(<img src=\"$verzeichnis$file\">);\"></div>
<div class="refs_mitte" style=\"background-image: url(<img src=\"$verzeichnis$file\">);\"></div>
<div class="refs_rechts" style=\"background-image: url(<img src=\"$verzeichnis$file\">);\"></div>
<div class="spacer"></div>
</div>

</body>
</html>

Ich habe versucht das image als background-image einzufügen, damit ich es in den DIVs mittig zentriert bekomme.

Die Ausgabe sollte möglichst so aussehen (Beispiel: 5 images im Ordner):

<body>

<div class="refs">
<div class="refs_links" style="background-image: url(<img src="http://www.php-resource.de/forum/images/a_datei.gif">);"></div>
<div class="refs_mitte" style="background-image: url(<img src="http://www.php-resource.de/forum/images/b_datei.gif">);"></div>
<div class="refs_rechts" style="background-image: url(<img src="http://www.php-resource.de/forum/images/c_datei.gif">);"></div>
<div class="spacer"></div>
</div>

<div class="refs">
<div class="refs_links" style="background-image: url(<img src="http://www.php-resource.de/forum/images/d_datei.gif">);"></div>
<div class="refs_mitte" style="background-image: url(<img src="http://www.php-resource.de/forum/images/e_datei.gif">);"></div>
<div class="refs_rechts" style="background-image: url(<img src="">);"></div>
<div class="spacer"></div>
</div>

</body>

Das Z - A u. A - Z kann als Link wegfallen. Wäre es vielleicht möglich, das ich die Auswahl im script festzulegen, z.B.:
[COLOR="Blue"]$rsort = "a-z";[/COLOR] oder [COLOR="Blue"]$rsort = "z-a";[/COLOR]


Ich habe versucht es selber hinzubekommen, scheitere aber beim der Ausgabe, bei mir ergibt dieser klägliche Versuch (sorry!) ein einziges DIV-Chaos:

<?php
//Verzeichnis der Bilder
$verzeichnis = './images/refs/';
$order = "ASC";
if(isset($_GET["AbisZ"]))
{
$order = $_GET["AbisZ"];
}
$verz = scandir($verzeichnis);
if($order == "ASC")
{
sort($verz);
}
else
{
rsort($verz);
}
$n = count($verz);
$a = round($n/3);
$i = 0;
$x = 1;
if($order == "ASC")
{
    echo "<a href=\"$_SERVER[PHP_SELF]?AbisZ=DESC\">Z - A</a><br>";
}
else
{
    echo "<a href=\"$_SERVER[PHP_SELF]?AbisZ=ASC\">A - Z</a><br>";
}
echo "<div class=\"refs\">
<div class=\"refs_links\" style=\"background-image: url(<img src=\"$verzeichnis$file\">);\">";
foreach($verz as $file)
{
    $info = @getimagesize($verzeichnis.$file);
    if(($info[2]==(1||2||3)) && $file != "." && $file != ".." 
&& !is_dir($verzeichnis.$file) && is_file($verzeichnis.$file))
    {
    $i++;
if($i == $a and $i != $n)
{
    echo "ok"; //Geht's vielleicht ohne das OK?
    $i = 0;
    echo "</div>
    <div class=\"refs_mitte\" style=\"background-image: url(<img src=\"$verzeichnis$file\">);\">";
}
if($x == 1)
{
    $x = 2;
    $farbe = "";
}
else
{
    $x = 1;
    $farbe = "";
}
echo "<div class=\"refs_rechts\" style=\"background-image: url(<img src=\"$verzeichnis$file\">);\"></div>";
    }
}
echo "<div style=\"clear:both;\"></div>
</div>";
?>

Eigentlich kriege ich den Zusammenbau von DIVs wohl hin, in Kombination mit den echo's kriege ich es leider nicht hin…

[AmicaNoctis]

Sieh dir nochmal an, wie man Hintergrundbilder im CSS notiert. So, wie du es haben willst, ist es schlichtweg falsch. CSS kann man zwar in HTML einbetten, aber nicht umgekehrt, wie du es mit den img-Elementen machst.

Gruß,

Amica

[Kirzz]

Sieh dir nochmal an, wie man Hintergrundbilder im CSS notiert. So, wie du es haben willst, ist es schlichtweg falsch. CSS kann man zwar in HTML einbetten, aber nicht umgekehrt, wie du es mit den img-Elementen machst.

Oha, da habe ich nicht aufgepasst, sorry!
So sollte es funktionieren (?):

<div class=\"refs\">
<div class=\"refs_links\" style=\"background-image: url($verzeichnis$file);\"></div>
<div class=\"refs_mitte\" style=\"background-image: url($verzeichnis$file);\"></div>
<div class=\"refs_rechts\" style=\"background-image: url($verzeichnis$file);\"></div>

<div class=\"refs\">
<div class=\"refs_links\" style=\"background-image: url($verzeichnis$file);\"></div>
<div class=\"refs_mitte\" style=\"background-image: url($verzeichnis$file);\"></div>
<div class=\"refs_rechts\" style=\"background-image: url($verzeichnis$file);\"></div>
<div class=\"spacer\"></div>
</div>

ps: Wie breche ich den Code auf 100 Zeichen um??? Ich habe weder im Editor, noch in den Einstellungen, was finden können?

[AmicaNoctis]

Wie breche ich den Code auf 100 Zeichen um???

Von Hand

[Kirzz]

Von Hand

Es ging wahrscheinlich um die elendig langen CSS, richtig?
Sorry, das ist eine alte doofe Angewohnheit von mir, in einer Zeile zu arbeiten. Vor Postings lasse ich es normalerweise durch den W3C CSS Validator laufen, der formatiert das zeilenweise für mich. Entschuldigung, ich hatte das vorm Posting einfach vergessen. Ich arbeite mit Coda, vielleicht gibts auch dort die Möglichkeit zur zeilenweisen Formatierung (ohne Nutzung des CSS-Tools), mmhhh, muss ich mal checken?

Danke für den Hinweis.

[boeserfrosch]

Kannst dir ja mal dies anschauen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<style type="text/css">
<!--
.refs {
width : 100%;
margin-top : 10px;
}
.refs_links {
float : left;
width : 200px;
height : 150px;
margin-right : 10px;
border : 1px solid #cccccc;
background-position : center;
background-attachment : relative;
background-repeat : no-repeat;
}
.refs_mitte {
float : left;
width : 200px;
height : 150px;
margin-right : 10px;
border : 1px solid #cccccc;
background-position : center;
background-attachment : relative;
background-repeat : no-repeat;
}
.refs_rechts {
float : left;
width : 200px;
height : 150px;
border : 1px solid #cccccc;
background-position : center;
background-attachment : relative;
background-repeat : no-repeat;
}
.spacer {
clear : both;
}
-->
</style>

</head>
<body>

<?php
//Verzeichnis der Bilder
$verzeichnis = './images/refs/';
$verz = scandir($verzeichnis);



// A - Z
sort($verz);
// Z - A
//rsort($verz);

$n = count($verz);
$a = round($n/3);
$i = 0;
$x = 1;



 echo "<div class=\"refs\">\n"; 

foreach($verz as $file)
{

$info = @getimagesize($verzeichnis.$file);
if(($info[2]==(1||2||3)) && $file != "." && $file != ".." && $file != "" 
&& !is_dir($verzeichnis.$file) && is_file($verzeichnis.$file))
    {
      
    $i++;
if($i > 3 and $i != $n)
{

    $i = 0;
    echo "<div class=\"spacer\"></div></div>
        <div class=\"refs\">
    \n";
}



if($x == 1)
{
    $zusatz = 2;
    $x = 2;
echo "
<div class=\"refs_links\" style=\"background-image: url(".$verzeichnis.$file.");\"></div>\n";
}
elseif($x == 2)
{
    $zusatz = 1;
    $x = 3;
    echo "
    <div class=\"refs_mitte\" style=\"background-image: url(".$verzeichnis.$file.");\"></div>\n";
}
else
{
    $zusatz = 0;
    $x = 1;
echo "<div class=\"refs_rechts\" style=\"background-image: url(".$verzeichnis.$file.");\"></div>\n";
    }
    }
}
$ueberpruefung = 0;
while($ueberpruefung < $zusatz)
{
$ueberpruefung++;
if($ueberpruefung == 1)
{
echo "<div class=\"refs_mitte\" style=\"background-image: url(none);\"></div>";
}
else
{
    echo "<div class=\"refs_rechts\" style=\"background-image: url(none);\"></div>";
}

}
echo "</div>";
?> 
</body>
</html>

[Kirzz]

Kannst dir ja mal dies anschauen:
PHP-Code: …

Danke, das funktioniert super. Ein kleiner Fehler ist noch drin:

Das .spacer wird wie eingesetzt? Hier ein kleiner Quelltext mit 19 images:

<div class="refs">

<div class="refs_links" style="background-image: url(./images/refs/a_datei.gif);"></div>

    <div class="refs_mitte" style="background-image: url(./images/refs/b_datei.gif);"></div>
<div class="refs_rechts" style="background-image: url(./images/refs/c_datei.gif);"></div>

<div class="spacer"></div></div>
        <div class="refs">
    

<div class="refs_links" style="background-image: url(./images/refs/d_datei.gif);"></div>

    <div class="refs_mitte" style="background-image: url(./images/refs/e_datei.gif);"></div>
<div class="refs_rechts" style="background-image: url(./images/refs/f_datei.gif);"></div>

<div class="refs_links" style="background-image: url(./images/refs/g_datei.gif);"></div>
<div class="spacer"></div></div>
        <div class="refs">
    

    <div class="refs_mitte" style="background-image: url(./images/refs/h_datei.gif);"></div>
<div class="refs_rechts" style="background-image: url(./images/refs/i_datei.gif);"></div>

<div class="refs_links" style="background-image: url(./images/refs/j_datei.gif);"></div>

    <div class="refs_mitte" style="background-image: url(./images/refs/k_datei.gif);"></div>
<div class="spacer"></div></div>
        <div class="refs">
    
<div class="refs_rechts" style="background-image: url(./images/refs/l_datei.gif);"></div>

<div class="refs_links" style="background-image: url(./images/refs/m_datei.gif);"></div>

    <div class="refs_mitte" style="background-image: url(./images/refs/n_datei.gif);"></div>
<div class="refs_rechts" style="background-image: url(./images/refs/o_datei.gif);"></div>
<div class="spacer"></div></div>

        <div class="refs">
    

<div class="refs_links" style="background-image: url(./images/refs/p_datei.gif);"></div>

    <div class="refs_mitte" style="background-image: url(./images/refs/q_datei.gif);"></div>
<div class="refs_rechts" style="background-image: url(./images/refs/r_datei.gif);"></div>

<div class="refs_links" style="background-image: url(./images/refs/s_datei.gif);"></div>
<div class="refs_mitte" style="background-image: url(none);"></div>
<div class="refs_rechts" style="background-image: url(none);"></div>

</div>

Im ersten wrapper "refs" wird der "spacer" gesetzt. Nach dem zweiten "refs_rechts" folgt kein "spacer", es folgt ein "refs_links", und dann der "spacer". Aus diesem Grund ist es ab der zweiten Zeile 4spaltig, und die letzte Zeile mit den leeren DIV's sogar 6spaltig.

Hängt das vielleicht mit der $ueberpruefung zusammen? Die Überprüfung ist glaube ich (!?) so angelegt, das "refs_mitte" und "refs_rechts" leer bleibt. Ist eigentlich auch logisch, für "refs_links" muss keine Überprüfung gemacht werden, in diesem Fall würde einfach kein DIV "refs" gebraucht werden. Mmhhh?
Oder ist das <div class="refs"> ab dem zweiten 3er DIV an falscher Position? Nein, das passt eigentlich. Nochmal mmhhh, siehst Du vielleicht wo's hakt?

Tausend Dank!

[AmicaNoctis]

Noch ne kleine Empfehlung von mir. Statt der vielen Hintergrundgrafiken, die nur die Ladezeit rauftreiben, kannst du auch ein einziges nehmen. Google mal nach "CSS-Sprite". Ein Beispiel für diese Technik findest du auch bei mir.

Gruß,

Amica

[boeserfrosch]

schnell geändert.
Ich hatte einen kleinen Denkfehler drin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<style type="text/css">
<!--
.refs {
width : 100%;
margin-top : 10px;
}
.refs_links {
float : left;
width : 200px;
height : 150px;
margin-right : 10px;
border : 1px solid #cccccc;
background-position : center;
background-attachment : relative;
background-repeat : no-repeat;
}
.refs_mitte {
float : left;
width : 200px;
height : 150px;
margin-right : 10px;
border : 1px solid #cccccc;
background-position : center;
background-attachment : relative;
background-repeat : no-repeat;
}
.refs_rechts {
float : left;
width : 200px;
height : 150px;
border : 1px solid #cccccc;
background-position : center;
background-attachment : relative;
background-repeat : no-repeat;
}
.spacer {
clear : both;
}
-->
</style>

</head>
<body>

<?php
//Verzeichnis der Bilder
$verzeichnis = './images/refs/';
$verz = scandir($verzeichnis);



// A - Z
sort($verz);
// Z - A
//rsort($verz);

$n = count($verz);
$a = round($n/3);
$i = 0;
$x = 1;



 echo "<div class=\"refs\">\n"; 

foreach($verz as $file)
{

$info = @getimagesize($verzeichnis.$file);
if(($info[2]==(1||2||3)) && $file != "." && $file != ".." && $file != "" 
&& !is_dir($verzeichnis.$file) && is_file($verzeichnis.$file))
    {
      
    
if($i == 3)
{

    $i = 0;
    echo "<div class=\"spacer\"></div>
        </div>
        <div class=\"refs\">
    \n";
}



if($x == 1)
{
    $zusatz = 2;
    $x = 2;
echo "
<div class=\"refs_links\" style=\"background-image: url(".$verzeichnis.$file.");\"></div>\n";
}
elseif($x == 2)
{
    $zusatz = 1;
    $x = 3;
    echo "
    <div class=\"refs_mitte\" style=\"background-image: url(".$verzeichnis.$file.");\"></div>\n";
}
else
{
    $zusatz = 0;
    $x = 1;
echo "<div class=\"refs_rechts\" style=\"background-image: url(".$verzeichnis.$file.");\"></div>\n";
    }
    $i++;
    }

}
$ueberpruefung = 0;
while($ueberpruefung < $zusatz)
{
$ueberpruefung++;
if($ueberpruefung == 1)
{
echo "<div class=\"refs_mitte\" style=\"background-image: url(none);\"></div>";
}
else
{
    echo "<div class=\"refs_rechts\" style=\"background-image: url(none);\"></div>";
}

}
echo "</div>";
?> 
</body>
</html>

[AmicaNoctis]

Das wird aber so nicht funktionieren, wenn alle dasselbe Bild benutzen und dieselbe background-position haben. Oder übersehe ich grad was?