Bildergalerie, wie anfangen???

[schmichl]

Hi Leute!

Ich will mir eine PHP-Bildergalerie programmieren, die folgendes können soll:
-Tabelle mit Vorschaubildern (Thumbnails)
-Mehrere Untergalerien/Kategorien
-Wenn man auf ein Bild klickt, wird es vergrößert angezeigt und man Slideshowmäßig vor- und zurückgehen.
-unter jedem Bild eine Beschreibung (z.B. Das ist Peter vor dem Krankenhaus)

Damit man sich das besser vorstellen kann, es soll ungefähr so aussehen:

z.B.: http://www.hundund.de/rassen/deutscherschaeferhund/images/
(hab leider kein besseres Beispiel gefunden)

Hat jemand so eine Galerie schon mal gemacht?

Ich bin kein Experte in PHP, und ich weiß nicht, wie ich das ganze anpacken soll.

Das sind so meine Ideen wie man das lösen könnte, nur hab ich schon länger nichts mehr mit PHP gemacht und ich weiß nicht wo ich anfangen soll.

Die Bilder der jeweiligen Kategorien können alle in einem eigenen Unterordner liegen.
Also zB. die Fotos von der Australiengalerie in einem Ordner australien

Dann müssten die Fotos nur durchnummeriert sein, und man könnte sie glaub ich aus dem Ordner auslesen. Über die Bildnummer kann man ja denk ich leicht zum nächsten/vorrigen Bild, mit &nr++, oder!?? Dann für jedem Bild ein Kommentar zuordnen (könnte man die Kommentare in einer seperaten Datei einfach in ein Array schreiben???)
Für Bild bild5.jpg kommt dann Kommentar [5] drunter.

Die Kategorien könnte man vielleicht so lösen:
z.B.:
galerie.php?id=frankreich
galerie.php?id=australien
Aber wenn das mit den Kategorien nicht geht, dann ist es auch egal, weil dann macht man einfach mehrere Ordner und man verwendet das Script dann halt mehrmals (galerie1.php, galerie2.php usw.)

Ich hab mir jetzt schon so viele Tutorials usw. angesehen und mir platzt fast der Kopf, weil ich genau weiß, wie ich es haben will aber es trotzdem nicht angehen kann.

Ich hoffe, irgendjemand erbarmt sich für mich und kann mir irgendwie helfen!

MfG,
schmichl

[Horst Reinelt]

Hi Leute!

Hallo auch!

Ich will mir eine PHP-Bildergalerie programmieren, die folgendes

Für PHP hab ich leider nichts, aber als Perl-Script könnte ich dir meine zur Ansicht geben, die diese Seiten bauen:
http://www.mpics.de/

Gesteuert wird das über ascii-Files, eines fürs Menü und jeweils eines für jeden Tag. Dort stehen dann auch die Beschreibungstexte der Fotos drin.

Vielleicht kannst du ja aus dem Script ein paar Anregungen (z. B. zur Rekursion usw.) holen.
Bei Bedarf, sag Bescheid.

MfG,
schmichl

Tschüss
  Horst

[Tom]

Hello,

anfangen solltest Du immer mit einem Konzept, dass Du im Klartext _schriftlich_ und skizzenhaft niederlegst. Das hast Du ja im Thread schon ganz gut begonnen. Also weitermachen.

Dann bildhafte Darstellung der Datendarstellung und der Benutzer-Eingriffsmöglichkeiten
auf Deutsch: die vorgesehenen Bildschirme zeichnen, die Buttons drauf... Bitte die Bildschirme nicht vergessen, die Fehler quittieren.

Die Zettelchen irgendwir sinnvoll anordnen und dazwischen die Beziehungen, die durch die Interaktion entstehen, einfügen. das sind die Scripte bzw. die Funktionen eines Zentralscriptes.

Und schon bist Du zur Hälfte fertig.

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

[schmichl]

Hallo Tom!
So was hab ich eh auch schon gemacht, nur nicht ganz so detailliert...

Ich hab mittlerweile schon mal das geschafft:

<?php
$bild_pfad ="./fotos/test/"; // Ordner in dem die Bilder sind
$open_pfad=opendir($bild_pfad); // Ordner öffnen

$PicCODE= 1;

while ($find = readdir($open_pfad)) // Ordnerinhalt auslesen
{
    if (preg_match("/.(jpg|gif)$/i", $find))
    {
    $bild[$PicCODE] = "$bild_pfad/$find";
    $PicCODE++;
    }

}
$datei=$PHP_SELF;

$max= $piccount;
$gallery_size = sizeof($bild);

if (!isset($s)) { $s=1; } //Wenn kein Bildangabe oder falsch, erstes Bild

$zurück = $s-1; //$s (bild) -1 d.h. bild[aktuell] -1

$vor = $s+1; //$s (bild) +1 d.h. bild[aktuell] +1

if ($vor>=$max) { $vor=$max; }

if($zurück<=0){ //Wenn zurück möglich, Link ausgeben
echo "<a href="$datei?s=$zurück" style="visibility:hidden; display:;none">";
echo "<img src="gfx/icons/left.gif" align="middle">zur&uuml;ck</a>"; } //Link ausblenden, wenn nicht gebraucht
else {
echo "<a href="$datei?s=$zurück"><img src="gfx/icons/left.gif" align="middle">zur&uuml;ck</a>";//Zurück Link
}

echo "&nbsp;<img class="foto" src="$bild[$s]" alt="Bild $s von $max" title="Bild $s von $max">&nbsp;"; //Ausgabe des Bildes

if ($s<$gallery_size) {
echo "<a href="$datei?s=$vor"><img src="gfx/icons/right.gif" align="middle">weiter</a><br>"; //Vor Link
}
if ($s == $gallery_size) {
echo "<a href="$datei?s=$vor" style="visibility:hidden; display:;none">";
echo "<img src="gfx/icons/right.gif" align="middle">weiter</a><br>"; }//Link ausblenden, wenn nicht gebraucht

echo "<br>$s von $max "; //Bild x von y

?>

Hab ich in einem Tutorial gefunden und ein bisschen abgeändert.

Jetzt bräuchte ich noch die Thumbnailvorschauen dazu und die Kommentare.

Wie ich die Vorschautabelle machen soll, hab ich keine Ahnung.

Aber bei den Kommentaren hab ich eine Idee.

Lg,
Michael

[Auge]

Hallo

$PicCODE= 1;

Du kannst ruhig mit 0 beginnen. :-)

while ($find = readdir($open_pfad)) // Ordnerinhalt auslesen
{
    if (preg_match("/.(jpg|gif)$/i", $find))

Der Ausdruck prüft, ob die Endung .jpg oder .gif ist, oder?
Ein erseits kann es sein, dass beim Upload ausversehen ein Bild, dass nicht in die Galerie gehört dort hineingelangt (mir schon mit anderen Dateien passiert).
Deshalb habe ich mir ein Namensschema gemacht, damit solche Dateien weitestgehend herausgefiltert werden können.

Die Dateien sind so aufgebaut: abcdefgh_00.jpg und werden gegen diesen Ausdruck geprüft:

preg_match("/^[1]{1,}\_[0-9]{1,2}.(jpg|png|gif)$/",$bdatei)

Der Name beginnt mit mindestens einem Buchstaben ([a-zA-Z]{1,}), gefolgt von einem Backslash (\_) und einer ein- oder zweistelligen Zahlenkombi ([0-9]{1,2}) und kann die angegebenen Endungen haben.

So werden aber nur die Datei_namen_ geprüft, aber nicht der Typ der Datei!
Dies kann man dann schon beim Upload per getimagesize tun. Das zurückgegebene Arrayelement 2 gibt ein Flag für den Dateityp an. Mit den Element 3 gibt den HTML-Code für die width- und height-Attribute an, der in deinem Beispiel noch fehlt.

$max= $piccount;

Wo kommt $piccount her? count($bild) liefert dir ebenfalls die Anzahl der Bilder.

$gallery_size = sizeof($bild);

sizeof ist ein Alias für count, in $max steht also schon das Gleiche drin.

echo "<a href="$datei?s=$zurück" style="visibility:hidden; display:;none">";

Entweder visibility:hidden; oder display:none;. Ersteres hält den Platz für das Element frei, es wird nur versteckt, Letzteres nimmt es vollständig aus dem Textfluss heraus.

echo "&nbsp;<img class="foto" src="$bild[$s]" alt="Bild $s von $max" title="Bild $s von $max">&nbsp;"; //Ausgabe des Bildes

Wie oben schon erwähnt, fehlt hier die Angabe von width und height. Das ist zwar keine Pflicht, verhindert aber, dass nicht gleich der Platz für das Bild freigehalten wird und beim Laden des selben das layout "springt", weil das Bild mehr Platz braucht, als für das Icon, das zuerst angezeigt wird, freigehalten wird.

Jetzt bräuchte ich noch die Thumbnailvorschauen dazu und die Kommentare.

Die Thumbnails sollen ja wohl kleiner sein, als die Originale. Um die Seitenverhältnisse zu erhalten, liest du zuerst mit getimagesize die Längenangaben aus und teilst sie durch die Angabe für die längste Seite des Thumbnails. Beispiel (längste Seite soll 90px sein):

$aus = getimagesize($bild[0]);
$aa = $aus[0] / 90;
$ab = $aus[1] / 90;

Damit hast du einen Dividenden um die originalen Seitenlängen zu teilen. Danach ermittelst du, welche Seite länger ist (if ($aa<$ab) vice versa) und teilst die originalen Seitenlängen des Bildes.

Wenn die Bilder nicht allzugroß sind, kannst du die ermittelten Werte in die width- und height-Attribute der Bilder einfügen. Das hat den Vorteil, dass die Bilder gleich vollständig geladen werden und bei der Navigation zwischen den Bildern keine weiteren Wartezeiten auftreten, da die bilder im Original schon im Cache des Benutzers liegen.

Dies ist aber auch gleichzeitig der gravierende Nachteil. Wenn es nämlich sehr große und/oder sehr viele Bilder sind, dauert schon der Aufbau der ersten Seite ewig lange, da ja alle Bilder in ihrer originalen Dateigröße geladen werden.

In diesem Fall kannst du mit imagecopyresized das Bild verkleinern (Bitte auch die User Contributed Notes lesen.).

Aber bei den Kommentaren hab ich eine Idee.

Die Infos zu den Bildern kannst du in Textdateien oder einer Datenbank hinterlegen.

Tschö, Auge

---

1. a-zA-Z ↩︎

[schmichl]

Hallo!

Danke für deine Antwort, hat mir schon geholfen!

Jetzt bräuchte ich noch die Thumbnailvorschauen dazu und die Kommentare.

Die Thumbnails sollen ja wohl kleiner sein, als die Originale. Um die Seitenverhältnisse zu erhalten, liest du zuerst mit getimagesize die Längenangaben aus und teilst sie durch die Angabe für die längste Seite des Thumbnails. Beispiel (längste Seite soll 90px sein):

$aus = getimagesize($bild[0]);
$aa = $aus[0] / 90;
$ab = $aus[1] / 90;

Ich wollte eigentlich wissen, wie man das Script um einen Fotoindex mit Thumbnails erweitern kann, beim Tutorial (http://webmasterpro.de/content_tip-1337.php) ist das nur angedeutet.
Weil für die Thumbnailerzeugung hätte ich ein Programm.

Könnte ich dann auch das machen (für die Originalbilder jetzt):

$eigenschaft = getimagesize ($bild[$s]);
$width = $eigenschaft[&s];
$height = $eigenschaft[&s];

und dann wären bei echo "<img .... widht="$width" height="$height" "> die höhen/breitenangaben dynamisch dem Bild angepasst, oder?

geht das????

Ich hoffe du kannst mir beim Photoindex helfen, das mit den Kommentaren hab ich schon!

MfG,
schmichl

[Auge]

Hallo

$aus = getimagesize($bild[0]);
$aa = $aus[0] / 90;
$ab = $aus[1] / 90;

Könnte ich dann auch das machen (für die Originalbilder jetzt):

$eigenschaft = getimagesize ($bild[$s]);
$width = $eigenschaft[&s];
$height = $eigenschaft[&s];

Bis auf "$" anstatt "&" ist das genau das Gleiche, wie oben ohne " / 90".

und dann wären bei echo "<img .... widht="$width" height="$height" "> die höhen/breitenangaben dynamisch dem Bild angepasst, oder?

Richtig. Allerdings kannst du dann auch gleich width="$eigenschaft[0]" etc. schreiben. Oder du nimmst gleich $eigenschaft[3], dort steht, wie ich in meinem ersten Posting schrieb, der ganze String drin (width="xxx" height="xxx").

Tschö, Auge