Fotoalbum mit 20 Zeilen Quelltext?

[Conny]

Hallo,

ich suche die einfachste HTML-Datei, die mir im Browser ein Bild anzeigt und zwei Navigationselemente (vor+zurück), um dieses Bild mit anderen Bildern in einem Verzeichnis (am besten ohne jeden Dateinamen einzeln in den Quelltext zu schreiben) durchzublättern und zwar ohne Vorausladen etc.

Da ich mich nur in HTML mit CSS einigermaßen auskenne, bin ich bis jetzt durch das Reduzieren von irgendwelchen Fotoalben aus dem Netz nicht weitergekommen, weil die ganz schnell nicht mehr funktionieren und trotzdem noch viieele Zeilen haben.
Per HTML und CSS geht es ja nicht, wenn ich nicht für jedes Bild auch eine HTML-Datei habe. Am liebsten wär mir PHP, aber es muss wohl Javascript sein?

Vielen Dank für Eure Hilfe!

[Danny]

Hi,

aber es muss wohl Javascript sein?

Warum? Steht kein PHP zur Verfügung?

[Ingo Turski]

Hi,

ich suche die einfachste HTML-Datei, die mir im Browser ein Bild anzeigt und zwei Navigationselemente (vor+zurück),

diese solltest Du schon selbst erstellen und individuell gestalten können.

um dieses Bild mit anderen Bildern in einem Verzeichnis (am besten ohne jeden Dateinamen einzeln in den Quelltext zu schreiben) durchzublättern

Hierzu ist es - egal welche zusätzlich erforderliche Scriptsprache Du einsetzt - am sinnvollsten, den Bildern einfach Namen mit durchlaufender Nummerierung zu geben. Dann brauchst Du dem Script nur den Basisnamen und die Start- und Endnummer mitzuteilen.

und zwar ohne Vorausladen etc.

Sehr vernünftig. Das wäre auch fies, den Besuchern das Laden sämtlicher Bilder aufzuzwingen, auch wenn er sie hinterher garnicht sehen will.

Da ich mich nur in HTML mit CSS einigermaßen auskenne, bin ich bis jetzt durch das Reduzieren von irgendwelchen Fotoalben aus dem Netz nicht weitergekommen, weil die ganz schnell nicht mehr funktionieren und trotzdem noch viieele Zeilen haben.

Wieso spielt die Zeilenanzahl eine Rolle? Außerdem ist diese Zahl ohnehin wenig aussagekräftig, da ein Javascript auch komplett in eine einzige Zeile geschrieben werden kann.

Per HTML und CSS geht es ja nicht, wenn ich nicht für jedes Bild auch eine HTML-Datei habe. Am liebsten wär mir PHP, aber es muss wohl Javascript sein?

Serverseitige Scriptsprachen sind natürlich vorzuziehen. Mein günstiger Webspace unterstützt das leider nicht, weshalb ich mir mit Javascript behelfe. Besucher ohne Javascript können meine Diashow zwar nicht nutzen, aber zumindest die Bilder aus der Übersichtsseite einzeln aufrufen. Mein Script hat übrigens 58, wenn auch übersichtlich kurze Zeilen...

freundliche Grüße
Ingo

[Chräcker Heller]

Hallo,

und zwar ohne Vorausladen etc.
Sehr vernünftig. Das wäre auch fies, den Besuchern das Laden
sämtlicher Bilder aufzuzwingen, auch wenn er sie hinterher
garnicht sehen will.

oh, man könnte, stelle ich mir gerade so vor, zumindest das "nächste Bild" in der linearen Fotostrecke in ein ein mal ein Pixel großes image-Tag laden. So hat der Besucher beim betrachten des "jetzigen" Bildes die Chance, nach dem weiterklicken sofort aus dem cache das nächste Bild angezeigt zu bekommen - stell ich mir so vor ;-)

Chräcker

[Ingo Turski]

Hi,

oh, man könnte, stelle ich mir gerade so vor, zumindest das "nächste Bild" in der linearen Fotostrecke in ein ein mal ein Pixel großes image-Tag laden. So hat der Besucher beim betrachten des "jetzigen" Bildes die Chance, nach dem weiterklicken sofort aus dem cache das nächste Bild angezeigt zu bekommen - stell ich mir so vor ;-)

das hatte ich früher mal bei meiner ersten Diashow so ähnlich gemacht - allerdings schon sichtbar als Vorschaubild.

freundliche Grüße
Ingo

[Joerg]

Hi,

ich suche die einfachste HTML-Datei,

Die hab ich nicht zu bieten, AAABER ...

eine Fotoalbum-Funktion hab ich mir vor ein paar Jahren mal geschrieben, weil ich das auch benutze, um meine Digitalfotos damit auf CD zu packen und trotzdem ueberall blaettern zu koennen. Das "Blaettern" ist in JavaScript realisiert, und beim Erstellen des Albums wird der noetige Code "von alleine" erzeugt ;-)

http://homepage.sunrise.ch/mysunrise/joerg.hau/misc/scantips.htm#album

Gruss aus Lausanne,

• Joerg

[Conny]

Danke an alle Antworter, leider konnte ich mit Euren Vorschlägen auch nicht so richtig viel anfangen, weil ich zu wenig von JS verstehe.
Was ich eigentlich wollte ist folgendes:

<SCRIPT language=Javascript>
<!--

var num = 9;
function more(i) {
if (document.images){
img = new Array();
if (n > num) n = 1;
img[i]=new Image();
img[i].src="Foto0"+i+".jpg";
document.images.slides.src=img[i].src;
        }
    }
var n = 2
// -->
</SCRIPT>

<A href="javascript:more(n++)"><IMG name=slides src="Foto01.jpg" border="0"></A>
<br><br>
<A href="javascript:more(n++)"> nächstes Bild...</A>
<A href="javascript:more(n--)"> vorheriges Bild...</A>

Aber warum funktioniert das nicht richtig. Klickt man auf vor oder zurück, nachdem zuvor das jeweils andere gedrückt wurde, dann passiert genau das Gegenteil. :-((
Mit welchem "Link" komme ich zu einem bestimmten Bild mit Nummer x?

Nochmals Danke!

[Ingo Turski]

Hi,

<A href="javascript:more(n++)"><IMG name=slides src="Foto01.jpg" border="0"></A>

der Name sollte in Anführungsstrichen stehen.
Ich würde die Funktion auch mit (1) bzw. (-1) aufrufen unnd im Script dann die globale Variable direkt ändern, also num +=i;

freundliche Grüße
Ingo

[Conny]

Ich würde die Funktion auch mit (1) bzw. (-1) aufrufen unnd im Script dann die globale Variable direkt ändern, also num +=i;

also more(-1) für zurück?
Was soll "num +=1" denn sein und wo soll es hin???

Ich kann kein JS! Diesen Ausdruck verstehe ich nicht, sieht krank aus!

Schönen Gruß!

[Ingo Turski]

Hi,

also more(-1) für zurück?

ja.

Was soll "num +=1" denn sein und wo soll es hin???

Ich kann kein JS! Diesen Ausdruck verstehe ich nicht, sieht krank aus!

:-) schon möglich. ich meine aber num +=i und das ist die Kurzform für num = num + i. Erhöht bzw. verringert bei negativen Werten num um den wert i (=1).

freundliche Grüße
Ingo

[Conny]

Was soll "num +=1" denn sein und wo soll es hin???

Ich kann kein JS! Diesen Ausdruck verstehe ich nicht, sieht krank aus!
:-) schon möglich. ich meine aber num +=i und das ist die Kurzform für num = num + i. Erhöht bzw. verringert bei negativen Werten num um den wert i (=1).

Danke, jetzt hab ich es kapiert. Aber man muss das Skript schon noch mehr umbauen, "num" hat mit einem Zähler ja nichts zu tun, überhaupt ist gar keiner vorhanden:

<SCRIPT language=Javascript>
<!--

var num = 6;
var a = 1

function more(i) {
if (document.images){
a = a + i;
img = new Array();
if (a > num) a = 1;
if (a < 1) a = 6;
img[i]=new Image();
img[i].src="Test"+a+".png";
document.images.slides.src=img[i].src;
        }
    }
// -->
</SCRIPT>

<A href="javascript:more(1)"><IMG name=slides src="Test1.png" border="0"></A>
<br><br>
<A href="javascript:more(1)"> nächstes Bild...</A>
<A href="javascript:more(-1)"> vorheriges Bild...</A>

schönen Gruß,
Conny

[Ingo Turski]

Hi,

if (a < 1) a = 6;

warum definierst Du erst num, wenn Du hier eh wieder eine Konstante nimmst?

freundliche Grüße
Ingo

[Alexander Brock]

Hallo,

Ich habe mal ein extrem einfaches PHP-Script zu diesem Zweck geschrieben:

<?php
ob_start("ob_gzhandler");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Lustiges</title>
<link href="./bilder.css.php" rel="stylesheet" type="text/css" />
</head>

<body>
<div>

<?php

Die Variablen

$bilder = array();

if (!isset($_GET["pos"])) {
 $position = 0;
}

else {
 $position = $_GET["pos"];
}

$vorposition = $position-1;
$nachposition = $position+1;

Auslesen des Bilder-Verzeichnisses

$verz = opendir('./bilder');
while ($file = readdir($verz)) {
 if ($file != '.' && $file != '..') {
  array_push($bilder,$file);
 }
}
closedir($verz);

if (isset($bilder[$position])) {
 if (isset($bilder[$vorposition])) {
  echo '<a href="'.$_SERVER["PHP_SELF"].'?pos='.($position-1).'">Vorheriges Bild</a>
  ';
 }
 if (isset($bilder[$nachposition])) {
  echo '<a href="'.$_SERVER["PHP_SELF"].'?pos='.($position+1).'">N&auml;chstes Bild</a><br />
  ';
 }
 else {
  echo '<br />';
 }
 echo '<img alt="'.$bilder[$position].'" src="./bilder/'.$bilder[$position].'" />
 ';
}

else {
 echo '<a href="'.$_SERVER["PHP_SELF"].'">Zur Startseite</a>';
}
?>

</div>
</body>
</html>

Was haltet ihr davon (Performance, Sicherheit...)?

Gruß
Alexander Brock

[Conny]

Ich habe mal ein extrem einfaches PHP-Script zu diesem Zweck geschrieben:

Ist zwar nicht gerade einfach (für mich!), aber es funktioniert und ich kann es auch meinen (Gestaltungs-)wünschen anpassen.

Vielen Dank für diese schöne Lösung!

[Alexander Brock]

Hallo,

Ich habe mal ein extrem einfaches PHP-Script zu diesem Zweck geschrieben:

Ist zwar nicht gerade einfach (für mich!),

Mit einfach war gemeint, dass das Script überhaupt keine
"Features" hat, es kann nur die Grundfunktion.

Ich kommentiere es mal:

<?php
ob_start("ob_gzhandler");

Die Ausgabe wird komprimiert, bevor sie an den Client geschickt wird.

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Lustiges</title>
<link href="./bilder.css.php" rel="stylesheet" type="text/css" />
</head>

<body>
<div>

<?php

Die Variablen

$bilder = array();

der Ordner mit den Bildern:

$directory = "bilder";

if (!isset($_GET["pos"])) {
 $position = 0;
}

wenn keine Bildnummer angegeben ist, wird diese auf Null gesetzt.

else {
 $position = $_GET["pos"];
}

andernfalls die Bildnummer aus der URL übernommen.

$vorposition = $position-1;
$nachposition = $position+1;

selbsterklärend ?

Auslesen des Bilder-Verzeichnisses

$verz = opendir($directory);

der Ordner bilder wird zum lesen geöffnet

while ($file = readdir($verz)) {
 if ($file != '.' && $file != '..') {
  array_push($bilder,$file);
 }
}

alle Dateien (!) im Unter-Ordner bilder werden in das Array $bilder geschrieben.

closedir($verz);

der Ordner bilder wird wieder geschlossen.

if (isset($bilder[$position])) {

wenn es das Element des Arrays $bilder mit der übergebenen Bildnummer gibt

if (isset($bilder[$vorposition])) {
 # und es ein vorhergehendes Bild gibt
  echo '<a href="'.$_SERVER["PHP_SELF"].'?pos='.($position-1).'">Vorheriges Bild</a>
  ';
 # wird ein Link auf das vorhergehende Bild ausgegeben
 }
 if (isset($bilder[$nachposition])) {
 # wenn es ein weiteres Bild gibt
  echo '<a href="'.$_SERVER["PHP_SELF"].'?pos='.($position+1).'">N&auml;chstes Bild</a><br />
  ';
 # wird ein Link auf dieses Bild ausgegeben.
 }
 else {
  echo '<br />';
 }
 # andernfalls ein Zeilenumbruch
 echo '<img alt="'.$bilder[$position].'" src="./'.$directory.'/'.$bilder[$position].'" />
 ';

wenn es das Element des arrays $bilder mit der übergebenen

Bildnummer gibt wird dieses Bild angezeigt.

}

else {
 echo '<a href="'.$_SERVER["PHP_SELF"].'">Zur Startseite</a>';
}

Wenn alles falsch ist, gibts einen Link auf die Startseite.

?>

</div>
</body>
</html>

Ist das verständlich?
Tipp:
Wenn in dem Ordner noch andere Dateien sind, oder du die Reihenfolge
verändern willst, kannst du alles zwischen
"# Auslesen des Bilder-Verzeichnisses" und
"# der Ordner bilder wird wieder geschlossen."

weglassen und den Array $bilder selbst füllen
(so: $bilder = array("bild1.jpg","bild2.gif");).

Die Variable $directory (gerade eingeführt) gibt den Ordner
mit den Bildern an.

aber es funktioniert

Sonst hätte ich es nicht gepostet,
und damit ich es verwenden kann,
muss es ja funktionieren.

und ich kann es auch meinen (Gestaltungs-)wünschen anpassen.

Das sollte allerdings einfach sein.

Vielen Dank für diese schöne Lösung!

Bitte, gern geschehen. Ich hatte es halt herumliegen
und dachte mir, vielleicht ist es ja nützlich.

Gruß
Alexander Brock

[Conny]

Damit es im Kreis geht:

if (!isset($bilder[$vorposition])) {
  # und es *K*ein vorhergehendes Bild gibt
   echo '<a href="'.$_SERVER["PHP_SELF"].'?pos='.count($bilder).'">Letztes Bild</a>';
  # wird ein Link auf das LETZTE Bild ausgegeben

Äquivalent dazu für das letzte Bild statt "count()" einfach "1" ein Link aufs erste Bild.

Ist das verständlich?

Jawohl!

Wenn in dem Ordner noch andere Dateien sind, oder du die Reihenfolge
verändern willst, kannst du alles
weglassen und den Array $bilder selbst füllen

Oder in den vorhandenen if Vergleich != die auszuschließenden Dateien eintragen (sind i.A. weniger und man kann Bilder einfach hinzufügen).

Die Variable $directory (gerade eingeführt) gibt den Ordner
mit den Bildern an.

Einen externen Ordner kann man PHP-Prinzipbedingt ja hier nicht verwenden, oder?

Bitte, gern geschehen. Ich hatte es halt herumliegen
und dachte mir, vielleicht ist es ja nützlich.

Ja, sehr nützlich!
Danke,
Conny

[Alexander Brock]

Hallo,

Damit es im Kreis geht:

if (!isset($bilder[$vorposition])) {
  # und es *K*ein vorhergehendes Bild gibt
   echo '<a href="'.$_SERVER["PHP_SELF"].'?pos='.count($bilder).'">Letztes Bild</a>';
  # wird ein Link auf das LETZTE Bild ausgegeben

Das geht auch einfacher:

if (isset($bilder[$vorposition])) {
 # und es ein vorhergehendes Bild gibt
  echo '<a href="'.$_SERVER["PHP_SELF"].'?pos='.($position-1).'">Vorheriges Bild</a>
  ';
 # wird ein Link auf das vorhergehende Bild ausgegeben
 }
 else {
  # andernfalls
   echo '<a href="'.$_SERVER["PHP_SELF"].'?pos='.(count($bilder)-1).'">Letztes Bild</a>';
  # wird ein Link auf das LETZTE Bild ausgegeben
  }

Äquivalent dazu für das letzte Bild statt "count()" einfach "1" ein Link aufs erste Bild.

Vorsicht, numerische Arrays beginnen mit dem Element Nummer 0
und enden mit dem Element Nummer (count($Array)-1)!

Ist das verständlich?

Jawohl!

Gut :-)

Wenn in dem Ordner noch andere Dateien sind, oder du die Reihenfolge
verändern willst, kannst du alles
weglassen und den Array $bilder selbst füllen

Oder in den vorhandenen if Vergleich != die auszuschließenden Dateien eintragen (sind i.A. weniger und man kann Bilder einfach hinzufügen).

Blödsinn, das Script soll das gefälligst selbstständig machen:

while ($file = readdir($verz)) {
 if ($file != '.' && $file != '..' && (strpos($file, "gif") or strpos($file, "png") or (strpos($file, "jpg")))) {
  array_push($bilder,$file);
 }
}

Jetzt wird geprüft, ob der Dateiname ".gif", ".png" oder ".jpg"
enthält, bevor er in das Array eingetragen wird.

Die Variable $directory (gerade eingeführt) gibt den Ordner
mit den Bildern an.

Einen externen Ordner kann man PHP-Prinzipbedingt ja hier nicht verwenden, oder?

Wie meinst du das? Einen höherliegenden Ordner kann man auf jeden
Fall verwenden, einen Ordner auf einem Server eventuell,
wenn dieser einen Datei-Index des Ordners ausgibt
(wird aber trotzdem schwierig).

Gruß
Alexander Brock

[Conny]

Vorsicht, numerische Arrays beginnen mit dem Element Nummer 0
und enden mit dem Element Nummer (count($Array)-1)!

Guter Hinweis!
Und übrigens kann ein

sort($bilder);

recht hilfreich sein, wenn man sich über die Anzeigereihenfolge wundert ;-)

Fall verwenden, einen Ordner auf einem Server eventuell,
wenn dieser einen Datei-Index des Ordners ausgibt
(wird aber trotzdem schwierig).

Genau, anderen Server meinte ich (weil meiner zwar PHP kann, aber kaum Platz hat, die Bilder könnte man so leicht auf freien Speicher werfen. Aber wie Du gesagt hast und ich im Hinterkopf ist sowas schwierig).

Gruß,
Conny

[Alexander Brock]

Hallo,

Genau, anderen Server meinte ich (weil meiner zwar PHP kann, aber kaum Platz hat, die Bilder könnte man so leicht auf freien Speicher werfen. Aber wie Du gesagt hast und ich im Hinterkopf ist sowas schwierig).

Ich habe es versucht, habe es auch fast geschafft, habe jetzt aber ein Problem:
das ist meine Funktion:

function index_auslesen($index_url) {
$bilder_string = "";
$fp = fsockopen ($index_url, 80, $errno, $errstr, 30);
if (!$fp) {
   echo "$errstr ($errno)<br />\n";
} else {
   fputs ($fp, "GET / HTTP/1.0\r\n\r\n");
   while (!feof($fp)) {
       $bilder_string .= fgets($fp,128);
   }
   fclose($fp);
}

$bilder_string = strchr($bilder_string, "<hr>");
$bilder_string = strip_tags($bilder_string, "<a>");

$bilder_string = ereg_replace("">.*?\n", "", $bilder_string);

Das will nicht funktionieren. es soll alle Zeichen von '">'

bis zum Ende der Zeile löschen, ergibt aber immer nur die

Fehlermeldung

Warning: ereg_replace() [function.ereg-replace]:

REG_BADRPT:nrepetition-operator operand invalid in

E:\www\offentlich\php\Fotoalbum\fsocketopen\album.php on line 24

return $bilder_string;
}
echo index_auslesen("localhost");

Gruß
Alexander Brock

[Alexander Brock]

Hallo Conny,

Genau, anderen Server meinte ich (weil meiner zwar PHP kann, aber kaum Platz hat, die Bilder könnte man so leicht auf freien Speicher werfen. Aber wie Du gesagt hast und ich im Hinterkopf ist sowas schwierig).

Ich habe es geschafft. ich habe ein Script, das entweder einen lokalen
Ordner oder eine Apache-Index-Datei auslesen kann.

Download
Beispiel

Die Lizenz ist die GPL

Gruß
Alexander Brock

[Alexander Brock]

Hallo,

Ich hab das mal ausprobiert, wenn die Index-Datei, die ausgelesen werden
soll auf einem anderen Server liegt, dauert die Ausführung des Skriptes
um das 20-100 Fache länger, da der ausführende Server erst die index-Datei
herunterladen und dann mit 3x RegEx, 1x strip_tags() und 3x str_replace
diesen String verhackstücken muss.

Ist also nicht so zu empfehlen, außer es gibt keine andere Lösung.

Gruß
Alexander Brock