Problem mit Fotoalbum in PhP

[Ritschie]

Hi zusammen :)

Ich bin grad dabe mir wieder mal meine kleine HP zu erweitern diesmal ist ein Fotoalbum dran :)

Ich hab mir in letzter zeit einige Tuts und vorgefertigte Alben angesehen und bin zu dem Entschluss gekommen das ich es selbst mal versuchen werde^^.

Problem ist das die vorgefertigten Alben für mich nur schwer anzupassen sind da ich mich in PhP bis jetzt nur mäßig auskenne.

Nach ein paar Stunden basteln hab ich nun folgendes zusammen geschustert:

    <div class="fotos">
        <?php
        $strDir = '/***/***/***/testpage/bilder';
        $arrFiles = scandir($strDir);
        
        if ($arrFiles[1] !== ''){
            ?><p> <img width="300" src="bilder/<? echo $arrFiles[1]; ?>" /> </p>
        <? }; ?>
        
        <?
        if ($arrFiles[2] !== ''){
            ?><p> <img width="300" src="bilder/<? echo $arrFiles[2]; ?>" /> </p>
        <? }; ?>
        
        <?
        if ($arrFiles[3] !== ''){
            ?><p> <img width="300" src="bilder/<? echo $arrFiles[3]; ?>" /> </p>
        <? }; ?>
        
        <?
        if ($arrFiles[4] !== ''){
            ?><p> <img width="300" src="bilder/<? echo $arrFiles[4]; ?>" /> </p>
        <? }; ?>
        
        <?
        if ($arrFiles[5] !== ''){
            ?><p> <img width="300" src="bilder/<? echo $arrFiles[5]; ?>" /> </p>
        <? }; ?>
        
        <?
        if ($arrFiles[6] !== ''){
            ?><p> <img width="300" src="bilder/<? echo $arrFiles[6]; ?>" /> </p>
        <? }; ?>
    </div>

Das funktioniert soweit ganz gut.
Ich nehme mir das Verzeichniss in dem die Fotos gespeichert sind lese es aus und gebe die Fotos wieder.

Wie man jedoch sieht wird das Album, so wie ich das gelöst habe, relativ aufwändig...

Jetzt zu meiner Frage:

Wie kann ich dieses Ungetüm an Code in eine schleife packen?

Ich hab mir schon ein paar Sachen dazu durchgelesen aber bis jetzt hab ich noch nichts gefunden was ich gedanklich dann auch wirklich so umsetzen könnte.

Herzlichen dank im vorraus für eure Antworten und Hilfen

Grüsse Richard

 

[thuemmy]

Da ist das passende foreach. Du solltest die einzelnen Elemente auch darauf hin überprüfen, ob es tatsächlich Dateien sind.

Gruß thuemmy

 

[_Thor_]

Mit foreach ist das ziemlich einfach.

foreach($arrFiles as $file) {
  if ($file !== '') {
    echo "<img src='bilder/$file' alt='' />";
  }
}

Du solltest aber noch prüfen, ob die Datei wirklich ein Bild ist, also Endung == 'png', 'jpg', 'gif' und was du alles zulassen möchtest.

 

[Ritschie]

Danke für die schnelle Antwort :)

Ich werd das mal versuchen.

 

[Ritschie]

*uppush*
Erstmal entschuldigung für den doppelpost :)

So ich hab den Code jetzt angepasst und auch eine Abfrage für das Format geschrieben:

        <?php
        $strDir = '/users/generaljack/www/testpage/bilder';
        $arrFiles = scandir($strDir);        

        foreach($arrFiles as $file) {
            if ($file !== '') {
                if (preg_match ("/.jpg/i", $file)){
                    echo "<p align='center'> $file </p> <br />";
                    echo "<img align='center' width='300' src='bilder/$file' alt='' /> <br />";
                }
            }
        };
        ?>

Jetzt noch 2 Fragen

1. Kann man die ausgabe irgendwie so ändern das die foreach schleife nur jedes 3. Bild einen Zeilenumbruch macht?

und

2. Wie füge ich bei preg_match mehrere Schlüsselworte ein? Also so das auch gif, bmp und pgn formate akzeptiert werden?

Grüsse euer Ritschie

 

[_Thor_]

1. Kann man die ausgabe irgendwie so ändern das die foreach schleife nur jedes 3. Bild einen Zeilenumbruch macht?

Ja, dafür definierst du dir vor der Schleife eine Variable, die in der Schleife bei jedem durchlauf um 1 erhöht wird, dann kannst du mit dem Modulo-Operator Modulo ? Wikipedia prüfen, ob es der dritte Durchlauf ist, oder ein mehrfaches von 3.

2. Wie füge ich bei preg_match mehrere Schlüsselworte ein? Also so das auch gif, bmp und pgn formate akzeptiert werden?

preg_match ("/\.png|\.jpg|\.gif/i", $file)

Die Punkte musst du maskieren mit einem \, sonst steht der Punkt für ein beliebiges Zeichen, das | bedeutet 'oder'.

 

[Ritschie]

Danke nochmals _Thor_ *verbeug*

Hab mich jedoch der Form halber entschieden das ganze mit CSS zu formatieren funktioniert prima und passt sich auch dem Fenster an^^

Zusätzlich hab ich mich an einer version versucht um die Bilder nicht nur anzuzeigen sondern auch bei klick in einem Popup zu vergrössern...
Das funktioniert leider nur mäßig (er vergrössert zwar jedoch nicht wie gewünscht in einem Popup) und ich finde meinen Fehler nicht...

hier mal die php des Fotoalbums:

<body>    
    <div align="center">

    <div class="header">
        <h1>Fotoalbum</h1>
        <p>vers. 0.1</p>
    </div>
    
    <div class="fotos">
        <?php
        $strDir = '/users/generaljack/www/testpage/bilder';
        $arrFiles = scandir($strDir);
        
        foreach($arrFiles as $file) {
            if ($file !== '') {
                if (preg_match ("/\.png|\.jpg|\.gif/i", $file)){
                        echo "<div class='clip'";
                        echo "<div class='fotoname'";
                        echo "<p align='center'> $file </p> <br />";
                        echo "</div>";
                        echo "<div class='fotobox'";
                        echo "<a href='bilder/$file' onClick='pop = window.open
                            (this.href,'g', 'width=360,height=240,scrollbars=auto,top=125,left=200'); 
                            pop.focus(); return false;' onFocus='this.blur()'>
                            <img border='0' src='bilder/$file' width='150' style='cursor:hand' 
                            onClick=''bilder/$file''; onFocus='this.blur()'></a>";
                        /*echo "<img align='center' width='150' src='bilder/$file' alt='' />";*/
                        echo "</div>";
                        echo "</div>";
                }
            }
        };
        ?>
    </div>
    </div>
</body>

und für all jene die das selbe Problem haben hier auch noch die CSS Datei:

.header    {    width:95%;
        }

.header h1    {    color:#FF0000;
                font-size:300%;
                text-align:center;
                font-family:Georgia, "Times New Roman", Times, serif;
                line-height:0pt;
            }

.header p    {    color:#000000;
                font-size:100%;
                text-align:center;
                font-family:Georgia, "Times New Roman", Times, serif;
                line-height:0pt;
            }
            
.clip    {    z-index:3;
            width:160px;
            float:left;
        }
            
.fotos    {    color:#000000;
            width:640px;
            padding:50px;
            vertical-align:super;
        }
        
.fotoname    {    color:#990000;
                font-size:50%;
                width:150px;
            }
        
.fotobox    {    border:#000099;
                border:double;
                border-spacing:2pt;
                width:150px;
            }

hoffe ihr könnt mir helfen grüsse Ritschie