Fotoalbum mit DHTML/JAVA/CSS

[estrep]

Hallo Leute

Ich bin ein ziemlicher Anfänger was die erweitere HTML-Programmierung angeht. Trotzdem denke ich, eine etwas anspruchsvolle, resp. spezifische Frage hier anzubringen zu können.:) Ist ja auch nicht so schwer... Egal. Ich hoffe hier von jemandem, der schon Erfahrung mit dynamischen Fotoalben gemacht hat, eine Hilfestellung zu erhalten.

Also, nun zum Punkt, ich habe folgendes Problem:

Mein Fotoalbum hat grob gesagt zwei Spalten. Die eine für die "Multiansicht" aller vorhanden Bilder, die mit Hilfe von Links- und Rechtspfeilen navigierbar ist und die andere für die Grossansicht des angewählten Bild. (siehe ZIP)

Hierfür werden jeweils zwei gleiche Bilder in verschiedene Grössen benötigt. Da die Seite zusätzlich ein Benutzersystem beinhaltet und für jede "Benutzerseite" (ähnliche dem mySpace-Aufbau) ein solches Fotoalbum bereitgestellt werden soll, wäre es zu aufwändig jedes Bild (ein Benutzer kann höchstens 5-6 Bilder uploaden) in zwei Formaten in der Datenbank (mySQL) abzuspeichern.

Hier ein Codeschnippsel aus meinem DHTML, der zeigt welche Bilder wo geladen werden sollen:

<div class="strip_of_thumbnails">
<div><a id="firstThumbnailLink" href="#" onmouseover="showPreview('images/art.jpg',this);return false;"><img src="images/art.jpg"></a></div>
<div><a href="#" onmouseover="showPreview('images/art1_big.jpg',this);return false;"><img src="images/art1.jpg"></a></div>
<div><a href="#" onmouseover="showPreview('images/art2_big.jpg',this);return false;"><img src="images/art2.jpg"></a></div>
</div>
<!-- End div for the first vertical strip of thumbnails-->
<div class="strip_of_thumbnails">
<div><a href="#" onmouseover="showPreview('images/art3_big.jpg',this);return false;"><img src="images/art3.jpg"></a></div>
<div><a href="#" onmouseover="showPreview('images/art4_big.jpg',this);return false;"><img src="images/art4.jpg"></a></div>
<div><a href="#" onmouseover="showPreview('images/art5_big.jpg',this);return false;"><img src="images/art5.jpg"></a></div>
</div>

Wie Ihr seht muss ich immer ein Bild in z. B. bild.jpg und in bild_big.jpg speichern, um recht eine gutaussehende Multiansicht zu gestalten. Könnte man das nicht irgendwie automatisch machen?

Ich habe im Anhang eine ZIP Dati mit einem Beispiel meines Fotoalbums. Es enthält leider nur 2-3 Bilder wegen der Grösse. Aber ich hoffe ihr könnt damit was anfangen.

Lange Rede, kurzer Sinn.

Ich wäre sehr froh, wenn ihr mir helfen könntet.

Danke im Voraus!

Guss estrep

 

[newlord]

Mein Ansatz wäre gewesen das ganze ohne MySQL zu lösen und die Bilder direkt aus den Userverzeichnissen mit PHP auszulesen. Die Zuordnung User => Userverzeichnis muss allerdings über ne Datenbank geschehen.

Um die Zuordnung hinzubekommen hätte ich beim Einloggen ein Cookie bzw. eine Session Variable gesetzt, welche den Pfad zum Userverzeichnis beinhaltet. Lädt der Benutzer nun ein Bild hoch, kannst du den Pfad in dem Cookie bzw. in der Session Variable auslesen und das Bild dahin speichern.

Dann hast du die Wahl das Originalbild erst zu speichern und erst beim Galleriaufruf das Thumbnail erstellen zu lassen, oder du lässt das Thumbnail direkt nach dem Hochladen erstellen. Dazu gibt es ein gutes Skript bei Webmaster-Resource. Kannst du dir hier anschauen:

Webmaster Resource: Tipps & Tricks: PHP: Thumbnails dynamisch erstellen

Das Auslesen der Bilder mache ich bei mir mittels der PHP Funktion glob();
Die Funktion liefert mir auch den Pfad zum Bild gleich mit und du kannst eben wenn du die Thumbnails im selben Verzeichnis generieren lässt, den Pfad entsprechend anpassen und zu guter Letzt auch richtig ausgeben lassen. Ein kurzes Beispiel:

<?php
    $bild_verzeichnis = 'user/bilder/';
    $thumb_verzeichnis = 'user/bilder/thumb/';

    $i = 0;
    foreach(glob($bild_verzeichnis.'*.jpg') as $bild) {
        $elem[$i][0] = $bild;
        $elem[$i][1] = str_replace($bild_verzeichnis,$thumb_verzeichnis,$bild);
        $i++;
    }

    print_r($elem);
?>

Das würde eine Ausgabe geben die in etwa so aussehen würde:

Array
(
    [0] => Array
       (
           [0] => user/bilder/bild1.jpg
           [1] => user/bilder/thumb/bild1.jpg
       )

    [1] => Array
       (
           [0] => user/bilder/bild2.jpg
           [1] => user/bilder/thumb/bild2.jpg
       )
)

Und darauf zugreifen könntest du denn in einer for-Schleife:

<?php
    $count = count($elem); // Anzahl Bilder ermitteln
    for($i=0;$i<$count;$i++) {
         echo '<a href="'.$elem[$i][0].'"><img src="'.$elem[$i][1].'" alt="" /></a>';
    }
?>

Und schon würden die Datenbanken für die Bilder entfallen. Entsprechende Prüfungen wie "Existiert das Userverzeichnis / Bildverzeichnis / Thumbnailverzeichnis" oder "Existieren von den Originalbildern schon Thumbnails" müssten entsprechend mit eingebaut werden. Aber schaue dir mal den Link zu den dynamisch erstellten Thumbnails an. Alles andere können wir ja dann sehen.


Off Topic:

Ich hab heute mein Gallerieskript fertig gebaut. 111 Zeilen Code, Blätterfunktion, automatischer Thumbnailgenerator, Slimbox Unterstützung, ohne MySQL, einfache Einbindung (2 Zeilen PHP, 3 Dateien für Slimbox), Anleitung ist vorhanden. Die Gallerie muss lediglich noch per CSS gestyled werden.

Ich erwähne das blos deshalb, da mein Skript auf dem selben Prinzip aufbaut wie der gepostete Quellcode

MfG

NewLord

 

[estrep]

Besten Dank erstmal - ich habe nicht damit gerechnet, eine so ausführliche Antwort zu erhalt.

Ich werd mal mein Konzept überdenken und mir deine Vorschläge zu Herzen nehmen. Diese erscheinen mir nähmlich sehr vielversprechend und vertraue daher auf deine Erfahrungen.

Wahrscheinlich bringe ich hier dann noch einige Fragen an, bzw. werde dir mein Ergebnis zeigen - vorausgesetzt es interessiert dich..

Hab mir deine Webseite angesehen. Sehr gut gestylt, wirkt auch sehr elegant und seröis.. Hut ab! Bin gespannt, wie deine Gallerie daherkommen wird;)

Danke nochmals

Gruss
erstep