Fotoalbum - Alle Bilder aus Ordner anzeigen lassen

[aJunkie]

Halli Hallo,

ich möchte alle Fotos in ein Ordner laden und sie automatisch in fotos.php anzeigen lassen.

Bei Klick soll sich das Foto in groß öffnen und sich bei Klick wieder schließen. Also Thumbnails.

Wie bekomme ich das hin?

 

[Asipak4You]

Hi,

schau mal hier : Alle Bilder eines Verzeichnisses auflisten

und hier : Vorschaubilder erstellen

 

[ohrflieger]

Zum Anzeigen der Bilder könntest du die Lightbox (oder einen Abkömmling davon) nehmen.

 

[aJunkie]

Bei mir siehts jetzt so aus: aJunkie - Adrenaline Junkie

Das erste Bild ist total schlecht dargestellt. Und außerdem kann ich die Bilder nicht anklicken, um sie in einem Popup zu vergrößern.

Den Untertitel brauche ich auch nicht.

Also wie kann ich die Bilder so anzeigen lassen und auf Klick Originalgröße im Popup anzeigen lassen? Untertitel soll nicht der Dateiname sein.
Was muss ich am Code verändern?

Danke sehr.

<?php
$fh = opendir("./fotos"); //Verzeichnis
$verzeichnisinhalt = array();
while (true == ($file = readdir($fh)))
{
if ((substr(strtolower($file), -3)=="jpg") or (substr(strtolower($file), -3)=="jpg")) //Abfrage nach gültigen Datenformat
{
$verzeichnisinhalt[] = $file;
}
}

echo "<div id='galerie'><table width='480' cellspacing='50'>";
for($i=0;$i<count($verzeichnisinhalt);$i++)
{ //HTML Einbindung der Bilder
echo "<tr><td>";
echo "<img src='./fotos/".$verzeichnisinhalt[$i]."' height=150 width=200 ><br><center>".substr($verzeichnisinhalt[$i],0,strlen($verzeichnisinhalt[$i])-4)."</center></img></td>";
$i++;
if( $i < count($verzeichnisinhalt) )
{
echo "<td><img src='./fotos/".$verzeichnisinhalt[$i]."' height=150 width=200 ><br><center>".substr($verzeichnisinhalt[$i],0,strlen($verzeichnisinhalt[$i])-4)."</center></img></td>";
}
echo "</tr>";
}
echo "</table></div>";
?>

 

[daschifahrer]

das problem mit den namen würd ich so umgehn das ich den bildern einfach den namen geb der danach auch drunter stehn soll ansonsten musste des über ne db machen was meiner meinung nach zu umständlich ist ...

für den rest bitte jmd andern fragen da blick ich nimmer durch ;)

 

[thuemmy]

Mon aJunkie,

wie Du schon erkannt hast, gibt es in Deinem Script mehre Probleme. Fangen wir mal an.

Das erste Bild ist total schlecht dargestellt.

Das liegt daran, dass Du aus einem relativ großen Bild den Browser ein Vorschaubild skalieren lässt. Das sind eigentlich 2 Probleme in einem. Erstens ist der Browser kein Grafikprogramm und skaliert daher die Vorschaubilder nicht so schön, wie es eine Bildverarbeitung kann. Und zweitens wenn Du immer das große Bild lädst und dann den Browser das Bild skalieren lässt, erhöht das die Übertragungsbandbreite. Bei 2 Bildern mag das noch angehen, aber wenn es mehr werden, dauert es recht lang, bis die Seite aufgebaut ist.

Mein Lösungsvorschlag ist folgender:

1. Erstelle im Verzeichniss fotos ein neues Verzeichniss thumbs
2. Mache zu jedem Bild in fotos mit einer Bildbearbeitung ein Vorschaubild und speichere sie mit demselben Namen ab. (Achtung: Pass auf, dass Du die Originale nicht dadurch überschreibst!)
3. Lade die Vorschaubilder in das Verzeichnis fotos/thumbs hoch.
4. Ändere Dein Script so ab, dass nicht das Verzeichnis mt den großen Bildern angezeigt werden, sondern die Vorschaubilder.

Achja,. was mir auch aufgefallen ist, die Originalbilder sind für die meisten Bildschirme zu groß, die müssten dann auch vom Browser skaliert werden, was wieder für eine Verminderung der Qualität sorgt (Der Browser kann es wirklich nicht so gut wie eine Bildbearbeitung ;-) ). Und noch etwas ist mir aufgefallen. Du gehst grundsätzlich von einem Bild Bild mit dem Seitenverhältniss von 4:3 aus. Erstens scheint das bei dem ersten Bild nicht zu passen (oder ich habe mich eben verrechnet) und zweitens, was passiert wenn Du Bilder im Hochformat hast? Aber auch das Problem kann gelöst werden. Schau mal hier: PHP: getimagesize - Manual

Den Untertitel brauche ich auch nicht.

Ich sehe auf Deiner Seite keinen Untertitel?

Also wie kann ich die Bilder so anzeigen lassen und auf Klick Originalgröße im Popup anzeigen lassen?

Das die Bilder nicht in Originalgröße angezeigt werden, liegt daran, dass Du das Vorschaubild nicht in ein <a>-Element eingebettet hast. Wie das mit dem Popup geht, habe ich keine Ahnung. Popups haben zwei Nachteile. Zum einen gibt es Popup-Blocker, und zum anderen kann im Browser JavaScript deaktiviert werden. Popups nutze ich nie, und wenn ich mich dazu hinreisen lasse, sowas mit JavaScript zu lösen, dann nutze ich eine lightbox-Lösung (such' mal im Web nach lightbox2 clone, da findest Du eine Menge).

So, ich glaube, das sollte es erstmal gewesen sein.

Gruß thuemmy

 

[aJunkie]

Danke für die ausführliche Antwort.
Aber wie stellst du dir das vor?

Ich soll erstmal thumbs erstellen und diese auf der Homepage anzeigen. Bei Klick öffnet sich das Original!? In einem neuen Fenster? Das ist auch blöd.

Ich steige gerade von oyla auf bplaced um.
Wenn man auf der oyla Seite schaut, sieht man, wie die Fotos aussehen und genau so möchte ich es haben. Genau so soll es funktionieren. Die Bilder sind proportional verkleinert und öffnen sich auf Klick.
Adrenaline Junkie

Die Fotos sind schön gereiht und bei Klick öffnet es sich. Es ist kein Popup, ich weiß, aber weiß gerade nicht, wie es sonst heißt.

 

[Die Zahl]

Ich soll erstmal thumbs erstellen und diese auf der Homepage anzeigen. Bei Klick öffnet sich das Original!? In einem neuen Fenster? Das ist auch blöd.

Wieso du? Das kannst du auch PHP sagen ;) getimagesize wurde ja schon genannt.
Dann brauchst du ja nur noch:
ImageCreateFromJPEG,
ImageCreate,
imageCopy(Resized)
ImageJPEG

in der Reihenfolge.

Es ist kein Popup, ich weiß, aber weiß gerade nicht, wie es sonst heißt.

Wenn du die Fotos aus deinem letzten Link meinst, das sind auch "thumbs" und bei klick kommt man via target _self direkt auf die Source-Datei.

Mfg

 

[thuemmy]

Aber wie stellst du dir das vor?

So, wie ich es geschrieben habe.

Ich soll erstmal thumbs erstellen

Habe ich ja so geschrieben, denn ich bin der Meinung, dass Du das mit einer Bildbearbeitung am Besten kann. Kannst es allerdings auch mit den Funktionen aus der gd-Lib machen. Da hat ja schon die Zahl verlinkte Funktionen geschrieben.

und diese auf der Homepage anzeigen.

Klar, wo sonst?

Bei Klick öffnet sich das Original!? In einem neuen Fenster

So hatte ich das aus Deinem 2 Post gelesen:

Und außerdem kann ich die Bilder nicht anklicken, um sie in einem Popup zu vergrößern.

Zumindest da wolltest Du wohl die Bilder in einem PopUp anzeigen ;-)

Ich steige gerade von oyla auf bplaced um.

Wie ist es denn auf Deiner Seite bei oyla gelöst? Ich meine jetzt das mit den Thumbs. Wäre es nicht ein einfaches gewesen, mit einem FTP-Programm smämtliche Seiten von Deinem oyla-Account auf Deinen PC zu laden, Änderungen vorzunehmen, und dann bei bplaced wieder hochzuladen?

Das Anzeigen der Bilder in groß (bei oyla) ist mit JavaScript gelöst, und zwar mit irgendeiner lightbox-Variante.

Gruß thuemmy

 

[aJunkie]

Ich versuch mich mal dran.

Bei oyla habe ich nur ein Homepagebaukasten.
Da habe ich nur das Design hochgeladen. Das Gästebuch und die Bildergalerie wurde von oyla zur Verfügung gestellt.

Danke.