Gfx-Unterseiten - Teil 2

TutorialTutorial von: Isa
Kategorie: PHP

Gfx-Unterseiten einfach erstellen - Teil 2
Die Einleitung zum VerstÀndnis dieses Tutorial findet ihr hier: Teil 1

Dort werden Schleifen Schritt fĂŒr Schritt erklĂ€rt und erlĂ€utert wie man sie auf Unterseiten einsetzen kann. Jedoch wird dort nur erklĂ€rt, wie man dies mit Icons tun kann - nicht wie man es mit Vorschauen + Orginalbildern (wie bei Headern oder Wallpapern etc.) macht, die solche benötigen!

Problemfall
Unser Ziel ist es nicht jedes Mal auf unserer PHP-Unterseite den Code fĂŒr die Bilder zu kopieren und unsere Datei so ins Unendliche laufen zu lassen. Wir möchten etwas, wo wir nicht jedes mal eine Stunde am kopieren/einfĂŒgen/Ă€ndern sind, wenn wir 20 neue Wallpaper ausstellen wollen! Und wie wird das gemacht?

Die Lösung
Gemacht wirds mit: Schleifen! Bei denen man beim updaten/aktualisieren der Datei nur eine Stelle mit einer Zahl erhöhen muss und nicht tausende Mal copy+paste. Damit der folgende Code und das gesamte Tut funktioniert, mĂŒsst ihr eure Graphiken natĂŒrlich entsprechend umbenennen.

Was brauchen wir?

Ihr mĂŒsst euch entscheiden ob ihr eure Orginalbilder und die Vorschauen dazu in einen Ordner hochlĂ€d oder in 2


Wollt ihr sie getrennt/seperat lagern, können sie natĂŒrlich gleich heißen, da sie sich ja nicht ĂŒberschreiben können zb: wallpaper1.png, wallpaper2.png

Wollt ihr sie in einem Ordner lagern, so mĂŒsst ihr sie folgend benennen: orginal1.png, orginal2.png usw. und die vorschauen vorschau1.png, vorschau2.png usw. (da dies die kompliziertere Möglichkeit ist, werde ich euch diese hier zeigen - lagert ihr sie getrennt, so könnt ihr im folgenden Code natĂŒrlich alle Bildernamen umbenennen)

Der Code

1. Schritt: Nach dem wir wie im anderen Tut beschrieben, PHP geöffnet haben, starten wir anschließend eine Schleife:

Code:
<?php    for($i=1$i<30$i=$i+1) {       Inhalt    }<?> 


Zur ErklÀrung: mit dem for()-Befehl beginnen wir die Schleife, das $i ist unsere Variable, die wir auf 1 setzen und die bei jedem Durchlauf eine Zahl hochzÀhlt (mit dem $i=$i+1-Befehl). In der Mitte wird die Bedingung platziert. Unser letztes Bild trÀgt in diesem Tutorial die Nummer 29, also Stellen wir die Bedingung auf, dass die Schleife so lange durchlÀuft wie die Variable $i kleiner als 30 ist.

Nun haben wir bereits erziehlt, dass die Schleif 29 mal durchlĂ€uft, aber darin muss natĂŒrlich auch etwas geschehen...


2. Schritt: ... Wir möchten genauer gesagt, dass die Schleife eine Vorschaugfx ausgibt und beim Klick darauf ein Bild in OgrinalgrĂ¶ĂŸe.
(bei jedem Durchlauf daher eine neue kleine Vorschau mit dem dazu gehörigen Orginalbild) Jedoch machen wir es erstmal ohne Vorschaubild!
Ausgaben tÀtigt man in PHP mit dem Echo-Befehl, mit dem nicht nur Text sondern auch Html Elemente ausgeben kann:

Code:
<?php    
    
for($i=1$i<30$i=$i+1) {    
        echo 
"<a href=&#8242;DEINEURL/gfx/orginalNUMMER.png&#8242;>Klick</a>";    
    }    
?> 

Zur ErklĂ€rung: Wir starten also mit Echo und 2 AnfĂŒhrungszeichen, zwischen denen der Text steht, die Ausgabe. Damit PHP auch erkennt wo die Ausgabe genau zu Ende ist und nicht ab dem 2. AnfĂŒhrungszeichen sofort aufhört werden die diese entweder mit einem "Backslash" davor gekennzeichnet oder es werden diese HĂ€ckchen auf der Raute-Taste verwendet! Wichtig ist auch das Semikolon nach dem letzten AnfĂŒhrungszeichen.

Nun könnt ihr das Script schon testen, in dem ihr den Pfad in der Text-Ausgabe mal anpasst und fĂŒr NUMMER eine Beipielnummer einsetzt.

Genau dieser Icon wird dann exakt 29 mal ausgegeben...


3. Schritt: ... Wir wollen ja aber dass PHP uns die genau an dieser Stelle hochzĂ€hlt. DafĂŒr ergĂ€nzt man dort etwas, statt NUMMER wird die Ausgabe unterbrochen und die Variable, die hochgezĂ€hlt wird, wird angefĂŒgt (dazu MUSS der Punkte vor und nach $i stehen!):

Code:
<?php    
    
for($i=1$i<30$i=$i+1) {    
       echo 
"<a href=&#8242;DEINEURL/gfx/orginal".$i.".png&#8242;>Klick</a>";    
    }    
?> 


Nun sollte alles klappen, probiert es doch mal aus :) Ihr werdet merken, dass das ohne Vorschau und nur mit Links nicht so das Wahre ist...

4. Schritt: Nun fĂŒgen wir daher die Vorschaubilder ein:

Code:
<?php    
    
for($i=1$i<30$i=$i+1) {    
        echo 
"<a href=&#8242;DEINEURL/gfx/orginal".$i.".png&#8242;><img src=&#8242;DEINEURL/gfx/vorschau".$i.".png&#8242;></a>";    
    }    
?>


Und fertig ist unsere Unterseite :)

Allein der letzte Code ist unser gesamter Inhalt der Datei (nicht alle Codes untereinander, die oberen dienen nur zum Schritt-fĂŒr-Schritt VerstĂ€ndnis)

Die Zahl 30 ist das einzige, was ihr dann im Script immer Ă€ndern mĂŒsst, wenn neue Icons hinzukommen sollen! Über und unter dem PHP-Script könnt ihr natĂŒrlich noch normale Html-Elemente wie eine Überschrift und einen Text setzen.

Ihr wollt aber die neuste Gfx oben haben und nicht unten?
.. dann drehen wir den Spieß einfach um:

Code:
<?php    
    
for($i=30$i>=1$i=$i-1) {    
        echo 
"<a href=&#8242;DEINEURL/gfx/orginal".$i.".png&#8242;><img src=&#8242;DEINEURL/gfx/vorschau".$i.".png&#8242;></a>";   }    
?>

Kommentare

Leider haben wir für diesen Eintrag noch keine Kommentare erhalten.

Kommentar schreiben

Name
E-Mail
Homepage
Text
captchaWie viele ausgefüllte Kreise sind auf dem Bild?