Stellen Sie sich vor, Sie möchten eine Seite erstellen, auf der Momentaufnahmen Ihrer neuesten Arbeit angezeigt werden. Eine Möglichkeit, dies zu tun, wäre das Festcodieren der Bilder in Ihr Dokument. Die offensichtliche Folge ist, dass Sie jedes Mal, wenn Sie ein neues Element hinzufügen möchten, Ihr HTML-Dokument manuell aktualisieren müssen. Eine andere Methode wäre das Speichern und Abrufen der Informationen aus einer MYSQL-Datenbank. Dies funktioniert einwandfrei, obwohl diese Lösung für viele Websites möglicherweise weitaus mehr Leistung bietet, als technisch erforderlich ist - ganz zu schweigen von den gestiegenen Hosting-Kosten.

In solchen Fällen ist es die beste Lösung, wenn PHP Ihren "Portfolio" -Ordner scannt und den Code dynamisch für Sie erstellt. Wenn Sie Ihre Seite mit einem neuen Snapshot aktualisieren möchten, ziehen Sie das Bild und das entsprechende Miniaturbild in die entsprechenden Ordner. PHP übernimmt den Rest. Lass es uns jetzt bauen!

Unsere Aufgabe

Lassen Sie uns kurz beschreiben, was wir erreichen müssen.

• Verwenden Sie PHP, um unseren Portfolioordner zu scannen. Es durchläuft dann jede Datei, dh ein Bild, und zeigt sie dann auf der Seite an.
• Gestalten Sie unsere Inhalte ein wenig mit CSS.
• Wenn der Benutzer auf eine Miniaturansicht klickt, verwenden wir jQuery, um die große Version des Bildes in das Hauptfenster zu laden.
• Wenn der Benutzer Javascript deaktiviert hat, wird er einfach zu einer neuen Seite weitergeleitet, die das Bild in voller Größe enthält

Wie benutzt man es?

Das Hinzufügen eines neuen Bildes zu unserem Portfolio ist einfach. Machen Sie einen Schnappschuss von Ihrer Website, Broschüre, Postkarte usw. und legen Sie eine Größe von 500 x 350 Pixel fest. Legen Sie dieses Bild in den Ordner "images / featured".

Als Nächstes erstellen Sie ein Miniaturbild, das 50px x 50px ist. Legen Sie dieses Bild in den Ordner "images / tn".

Sie müssen sicherstellen, dass die Bilder in voller Größe und die Miniaturansicht den gleichen Dateinamen haben.

Unser abschließendes HTML

          
 
Ein Portfolio
 
 '; ?> 
 
     '; ?> 
 
  

Unser abschließendes CSS

Sehen Sie es hier.

Kompensation für IE6

Zum Glück haben wir nur eine Sache zu beheben. Wenn Sie sich das Bild oben ansehen, werden Sie feststellen, dass die ungeordnete Liste von #options nicht die Float-Listenelemente enthält. Während moderne Browser die Elemente dank unseres "Überlaufs: ausgeblendet;" Stil, IE6 benötigt eine weitere Regel. Hängen Sie dies an Ihr Stylesheet an.

 ul # options … verschiedene Stile… Höhe: 1%; 

Ich hätte die Höhe auf alles einstellen können und es würde noch funktionieren. Stellen Sie sich vor, wie Drago IE6 ins Gesicht schlägt und ihm sagt: "Wach auf!". Dieser Stil zwingt IE6, so viel zu erweitern, wie nötig ist, um die untergeordneten Elemente zu löschen.

Das komplette Javascript (jQuery)

 $ (function () $ .preloadImage = function (path) $ ("# featured img"). attr ("src", path); $ ('ul # options li img'). click (function () $ ('ul li img'). removeClass ('selected'); $ (this) .addClass ('selected'); var imageName = $ (this) .attr ('alt'); $ .preloadImage ('images / featured / '+ imageName); var chopped = imageName.split ('. '); $ (' # featured h2 '). remove (); $ (' # featured ') .prepend ('
'+ gehackt [0] +'
') .kinder (' h2 '). fadeIn (500) .fadeTo (200, .6); ); $ ('ul # options li a'). click (function () return false;); );

Extra Gutschrift

Es gibt Möglichkeiten, Thumbnails unserer Bilder dynamisch zu erstellen. Versuchen Sie, einen Weg zu finden, wie PHP unseren "Featured" -Ordner scannen soll, erstellen Sie dann dynamisch eine Miniaturansicht-Version und speichern Sie sie im "tn" -Ordner.

• Abonnieren Sie den NETTUTS-RSS-Feed für mehr tägliche Webentwicklungsberichte und -artikel.