Fotoalbum, Vor/Zurück-Funktion

[yens]

Hallo,

ich schreibe gerade eine Fotoalbum und befasse mich im Moment mit der Ansicht eines einzelnen Albums.

Etwa so soll das ganze aussehen
###########################################

<--- THUMB - THUMB - THUMB - THUMB - THUMB

S E H R  G R O S S E S  B I L D

THUMB - THUMB - THUMB - THUMB - THUMB <---

###########################################

Ich habe als Struktur mal eine html-<table> gelegt, ich denke, das ist nicht grundsätzlich falsch oder?

Nun möchte ich 2 Buttons (vor und zurück), die praktisch die Bildschleife weiterziehen. Mit PHP will ich das nicht lösen, oder würdet ihr mir dazu raten? Gäbe es da vll eine Möglichkeit, die Bilder nicht ständig neu zu laden?

Jedenfalls, mit Javascript bin ich schon so weit, dass die erforderlichen Variablen (also URL und Dateiname, Bildgröße etc.) über PHP in das JS-Script dynamisch deklariert werden, und ich kann auch schon die Schleife durchziehen. (habe das mit innerHTML gelöst, die <img src="bla"> Tags werden bei Klick auf vor/zurück neu zwischen die <td></td> geschrieben)

Allerdings werden auch bei dieser Lösung im Moment noch jedesmal die Bilder neu geladen, wobei ja eigentlich nur das Laden des nächsten Thumbs und des nächsten großen Bildes in der Mitte nötig wäre.

Wie kann ich das anstellen, dass zwar alle Bilder verschoben, aber nur die 2 neu geladen werden? Die <td></td> haben natürlich alle schon eine id!

lg yens

[wucher wichtel]

Hallo!

Ich habe als Struktur mal eine html-<table> gelegt, ich denke, das ist nicht grundsätzlich falsch oder?

Naja, es sind keine tabellarischen Daten. Deswegen gehören sie nicht in eine Tabelle.

Mit PHP will ich das nicht lösen, oder würdet ihr mir dazu raten?

Ich würde es mit PHP lösen. User, die kein JavaScript haben, können so auch in den Genuss deiner Bilder kommen.

Gäbe es da vll eine Möglichkeit, die Bilder nicht ständig neu zu laden?

Normalerweise sind sie im Cache abgelegt.

Jedenfalls, mit Javascript bin ich schon so weit, dass die erforderlichen Variablen (also URL und Dateiname, Bildgröße etc.) über PHP in das JS-Script dynamisch deklariert werden, und ich kann auch schon die Schleife durchziehen. (habe das mit innerHTML gelöst, die <img src="bla"> Tags werden bei Klick auf vor/zurück neu zwischen die <td></td> geschrieben)

Diesen Abschnitt habe ich nicht so richtig, bzw. nur teilweise verstanden, aber das ist warscheinlich auch nicht ausschlaggebend ;-)

Allerdings werden auch bei dieser Lösung im Moment noch jedesmal die Bilder neu geladen,

Sind diese nicht im Cache?

wobei ja eigentlich nur das Laden des nächsten Thumbs und des nächsten großen Bildes in der Mitte nötig wäre.

Nein. Wenn du alle Bilder im Dokument drinstehen hast, dann werden die auch geladen.

Wie kann ich das anstellen, dass zwar alle Bilder verschoben, aber nur die 2 neu geladen werden?

Könntest du darauf nochmal eingehen? Ich verstehe es nicht so richtig. Hast du einen Link zu deiner Seite? Aber du könntest das src-Attribut des großen Bildes verändern. Dann würde nur dieses geladen. Welche _2_ du meinst, ist mir nicht klar. Es muss doch nur eines geladen werden...

ciao, ww

[yens]

Naja, es sind keine tabellarischen Daten. Deswegen gehören sie nicht in eine Tabelle.

Okay, wie kann man das besser machen? ich habe die Tabelle genommen, weil sie bis jetzt die einzige Möglichkeit von den von mir getesteten ist, die Größe des Bildes zu resizen (divs/spans haben nicht funktinoiert)

Mit PHP will ich das nicht lösen, oder würdet ihr mir dazu raten?

Ich würde es mit PHP lösen. User, die kein JavaScript haben, können so auch in den Genuss deiner Bilder kommen.

Gäbe es da vll eine Möglichkeit, die Bilder nicht ständig neu zu laden?

Normalerweise sind sie im Cache abgelegt.

Aber wenn ich das mit PHP löse, wird ja eine neue Seite geladen, im Gegensatz zu JS, des wegen hatte ich mich für die Variante entschieden! Bist du ganz sicher, dass dann immer noch aus dem Cache geladen wird?
Und wie lang ließt der Browser dann aus dem Cache? Nur während der aktuellen Sitzung? Es kann ja auch möglich sein, dass sich das Bild unter der angegebenen URL ändert! Wenn die Bilder nur einmal pro Browser öffnen geladen werden, wär das ja tatsächlich die ideale Lösung!

Jedenfalls, mit Javascript bin ich schon so weit, dass die erforderlichen Variablen (also URL und Dateiname, Bildgröße etc.) über PHP in das JS-Script dynamisch deklariert werden, und ich kann auch schon die Schleife durchziehen. (habe das mit innerHTML gelöst, die <img src="bla"> Tags werden bei Klick auf vor/zurück neu zwischen die <td></td> geschrieben)

Diesen Abschnitt habe ich nicht so richtig, bzw. nur teilweise verstanden, aber das ist warscheinlich auch nicht ausschlaggebend ;-)

Damit hab ich gemeint, ich hab es hinbekommen, über PHP HTML Seiten zu programmieren, die den richtigen JavaScript enthalten (also die entsprechenden Variablen, mit URL, Bildgröße etc. der einzelnen Bilder aus dem angewählten Album.)
Mittels dieser Variablen kann ich die <img> Tags überschreiben (bei Funktionsaufruf wechsel(step))

Allerdings werden auch bei dieser Lösung im Moment noch jedesmal die Bilder neu geladen,

Sind diese nicht im Cache?

Hm, mittlerweile hab ich doch den Eindruck, dass die Bilder aus dem Cache geladen werden! Bei den ersten Klicks baute sich das Bild noch jedesmal kurz ganz neu auf, aber mittlerweile geht das "Ziehen" der Schleife eigentlich flüssig vonstatten! Von daher hat sich das Problem, wenigstens praktisch, möglicherweise von selbst gelöst *ups*

wobei ja eigentlich nur das Laden des nächsten Thumbs und des nächsten großen Bildes in der Mitte nötig wäre.

Nein. Wenn du alle Bilder im Dokument drinstehen hast, dann werden die auch geladen.

Ne, eben doch, denn ich habe ja immer nur 13 <img>-Tags gleichzeitig im Dokument stehen (6 thumbs ober-und unterhalb des großen Bildes). Die Tags werden dann per Klick mit neuen Tags aus den JavaScript-Variablen gelesen!

Wie kann ich das anstellen, dass zwar alle Bilder verschoben, aber nur die 2 neu geladen werden?

Könntest du darauf nochmal eingehen? Ich verstehe es nicht so richtig. Hast du einen Link zu deiner Seite? Aber du könntest das src-Attribut des großen Bildes verändern. Dann würde nur dieses geladen. Welche _2_ du meinst, ist mir nicht klar. Es muss doch nur eines geladen werden...

Doch, es müssen 2 geladen werden! nämlich der neue Thumb, der von der einen Seite in die Schleife kommt, und das große Bild, von dem vorher nur der Thumb geladen wurde.

Also, es scheint, als wäre das Problem von der praktischen Seite gar nicht so groß! Ich programmiere jetzt noch ein wenig, denn die Schleife funktioniert noch nicht richtig, von der Abfolge.
Danach schicke ich dir noch einen Link mit PW (ist eine interne Seite meines Chors), wenn es dich noch interessiert, gut möglich, dass du Verbesserungsvorschläge hast (gerade wegen der Sache PHP/JS).

Danke mal für deine Hilfe, vll kannst noch meine Fragen oben beantworten, wäre super!

lg Jens

[wucher wichtel]

Hallo!

Okay, wie kann man das besser machen? ich habe die Tabelle genommen, weil sie bis jetzt die einzige Möglichkeit von den von mir getesteten ist, die Größe des Bildes zu resizen (divs/spans haben nicht funktinoiert)

Ich weiß nicht, wie du das resizen machst, aber normalerweise sollte das auch mit anderen Elementen (<p>, <div>, ...) laufen.

Aber wenn ich das mit PHP löse, wird ja eine neue Seite geladen,

Ja, das ist schon richtig. Aber in jedem Fall müssen die Bilder geladen werden. Also auch, wenn du das mit JavaScript löst. Wenn sie im Cache sind, dann werden sie immer ausgelesen, egal ob du JavaScript oder PHP benützt. Also verlängert sich das Laden beim Einsatz von PHP nur durch das HTML-Dokument. Das hat ja normalerweise ein paar KB. Ich glaube kaum, dass das im Gegensatz zu den Bilder auffällt.

im Gegensatz zu JS, des wegen hatte ich mich für die Variante entschieden!

Bei JS wird halt das HTML-Dokument nicht neu geladen. Damit sparst du aber nur sehr wenig.

Bist du ganz sicher, dass dann immer noch aus dem Cache geladen wird?

Wenn die Bilder auf einer neuen Seite sind? Ja, ich denke schon. Der Browser merkt sich ja die Adresse der Bilder. Die bleibt ja immer gleich, auch wenn die Bilder auf zwei verschiedenen Seiten sind.

Und wie lang ließt der Browser dann aus dem Cache? Nur während der aktuellen Sitzung?

Das kann ich dir leider nicht sagen. Aber du kannst es ja einfach ausprobieren. Gib im Firefox about:cache in die Adressleiste ein. Dann siehst du, was gerade im Cache gespeichert ist. Dann kannst du ja den Browser schließen/den Computer runterfahren/etc. und dann schauen, was noch da ist.

Es kann ja auch möglich sein, dass sich das Bild unter der angegebenen URL ändert!

Wie oft? Einmal täglich?

Wenn die Bilder nur einmal pro Browser öffnen geladen werden, wär das ja tatsächlich die ideale Lösung!

Du kannst mit PHP z.b. das aktuelle Datum rausfinden und dann als GET-Parameter an die Bildadresse hängen. Damit ist AFAIK sichergestellt, dass dann morgen (wenn das Datum von morgen dranhängt) das Bild neugeladen wird. So kannst du das auch mit Stunden, Wochen, oder Monaten machen.

Damit hab ich gemeint, ich hab es hinbekommen, über PHP HTML Seiten zu programmieren, die den richtigen JavaScript enthalten (also die entsprechenden Variablen, mit URL, Bildgröße etc. der einzelnen Bilder aus dem angewählten Album.)

Achso. Aber dann reicht es doch auch einfach eine HTML-Seite zu schreiben, oder? Wenn du von PHP nichts machen lässt, außer den HTML-Code auszuliefern, dann bringt dir PHP ja nichts.

Ne, eben doch, denn ich habe ja immer nur 13 <img>-Tags gleichzeitig im Dokument stehen (6 thumbs ober-und unterhalb des großen Bildes). Die Tags werden dann per Klick mit neuen Tags aus den JavaScript-Variablen gelesen!

Ok, habs verstanden :) Mein Denkfehler.

Danach schicke ich dir noch einen Link mit PW (ist eine interne Seite meines Chors),

Wie wäre es, wenn du eine Beispiel-Seite baust, die du allen zeigen kannst, ohne dass man ein Passwort braucht? Wenn du dich nur auf mich verlässt, dann ehrt mich das ;) Aber dir entgehen die möglichen Antworten, der Leute, die viel mehr können, wie ich :)

Danke mal für deine Hilfe, vll kannst noch meine Fragen oben beantworten, wäre super!

Ich hoffe, dass jetzt etwas klarer ist :)

ciao, ww

[yens]

okay,

ich hab mal eine testumgebung gemacht. der upload wird nicht funktionieren, da ich sonst neue DB anlegen müsste und die scripte umschreiben.
und ich habe nur 3 alben hochgeladen, das sollte reichen.

die Adresse wäre: voiceevent.de/home/intern/testumgebung/fotoalbum/
Zugang: test/test

Kannst es dir ja mal anschauen, es ist noch nicht überprächtig funktional, und die umlaufenden Thumbs an der Seite wackeln immer hin und her, wenn die Breite des großen Bildes sich ändert.

Ich glaube, ich ändere die Form nochmal und schreibe die Navigation in PHP.

Vielleicht so:

###############################################################

navigation(submit-buttons l,r,o,u für aufruf einer neuen php
        seite) zusätzlich für JS-User auf tastendruck pfeil l,r,o,u

++++++++++++++++++++++++++++++++++++++

thumb_o

thumb_l    "auf bestimmte größe gequetschtes orig bild"    thumb_r
              (bei anklicken voll ansicht)

thumb_u

+++++++++++++++++++++++++++++++++++++++

Vollansicht (alle Bilder des Ordners als Thumb), Markierung um Bild, das sich in der Großansicht befindet

thumb1 thumb2 thumb3 thumb4
thumb5 thumb6 thumb7 thumb8 etc.

#################################################################

Kann ich irgendwie einstellen, dass dann nur der Navigationsteil neu geladen wird UND DENNOCH die Markierung in der Vollansicht verschoben?
Vll über dieses css? (das kenn ich noch überhaupt nicht)
Oder geht das nur, wenn Javascript zusätzlich aktiv ist?

lg Jens

[wucher wichtel]

Hallo!

ich hab mal eine testumgebung gemacht. der upload wird nicht funktionieren, da ich sonst neue DB anlegen müsste und die scripte umschreiben.

Ist ja für dein Problem auch nicht so wichtig.

und ich habe nur 3 alben hochgeladen, das sollte reichen.

Ich sehe Alben, aber keine Bilder? Neulich, wo ich schnell reingeschaut habe, waren die Bilder noch da. Allerdings solltest du darauf achten valides HTML zu schreiben.

Ich glaube, ich ändere die Form nochmal und schreibe die Navigation in PHP.

Das wäre nicht schlecht.

Vielleicht so:

Sorry, aber das kann ich nicht wirklich nachvollziehen. Das, was ich nachvollziehen kann, hört sich aber gut an :-P Wenn du es fertig hast, dann kannst du es ja auch wieder hier zerreissen lassen ;-)

Kann ich irgendwie einstellen, dass dann nur der Navigationsteil neu geladen wird

Ja. Mit JavaScript (evtl. AJAX) kannst du das machen.

UND DENNOCH die Markierung in der Vollansicht verschoben?

Das geht auch mit JavaScript. Ich weiß nicht so recht, wie du die Markierung realisieren willst, aber das müsste man auch hinbekommen.

Vll über dieses css? (das kenn ich noch überhaupt nicht)

Nein. Mit CSS kannst du nichts laden oder so. Das ist für die Darstellung verantwortlich.

Oder geht das nur, wenn Javascript zusätzlich aktiv ist?

Ja.

ciao, ww