Navigation in der Galerie

Guten Tag zusammen,

http://www.volner-reisel.bplaced.net/galerie/fotografie/galerie_02/f02-001_stopp.php

hier sieht man, wie die Navigation durch meine Bildergalerie aussieht. Leider wird durch den Klick auf weiter bzw. zurück immer die komplette Seite neu geladen (logisch, da weiter/zurück auf das nächste Bild verlinkt ist). Und genau das stört mich.

Welche Möglichkeiten gibt es, dass nur ein bestimmter Bereich, hier der Bildbereich, neu geladen wird und nicht die komplette Seite?
Das Ganze würde ich dann auch gerne für die Diashow umsetzen. Momentan läuft diese durch den Meta-Tag “Refresh”. Gibts da eine elegantere Methode?

Es wäre nett, wenn mir da jemand helfen könnte. Schon mal vielen Dank im Voraus.

Gruß Elsner

JavaScript / Ajax ist dein Freund

könntest ganz einfach das DOM von deinem img-Tag manipulieren

gibst dem weiter-button ein onclick eventListener
deinem img-Tag gibst du ne id
und bei weiterbutton.onclick schreibst ne funktion die bei document.getElementById(imgtagid) die src vom img ändert
die src von den bildern speicherst wohl am besten in nem array
könntest alle bilder in nem extra ordner speichern und dann mit php deinen js-array mit den urls erstellen

greez

Vielen Dank für die schnelle Antwort Morpheus.

Leider kann ich mit deiner Antwort wenig anfangen, da ich mit JavaScript und Ajax noch gar keine Erfahrungen habe.

Aber bei Gelegenheit werde ich mal nach den Begriffen aus deinem Beitrag im Netz suchen und kann dann hoffentlich etwas zusammen basteln.

Braucht man den für so etwas eigentlich wirklich JavaScript? Was passiert denn, wenn der Besucher es mal deaktiviert hat?

Wenn der Besucher es aktiviert hat passiert gar nix

du hast deinen button

aus dem machste

und aus deinem img-tag mit dem bild drin was angezeigt werden soll

->

in den head deiner html tust da das javascript

[code]…

...[/code]

nun musst nur noch das array füllen und gucken wie du es weiter arrangieren willst
ändern sich die bilder oder ists ne übersichtliche, gleichbleibende menge?

wenn du es per hand organisieren kannst schreib das array selbst
var pictures = new array("/pics/bild01.jpg", “/pics/bild02.jpg”, “/pics/bild03.jpg”);

ansonsten tust du mit php den ordner pics durchsuchen und erstellst das array dynamisch

[code]

<? //phpskript // string der art "/pics/bild01.jpg", "/pics/bild02.jpg", "/pics/bild03.jpg" in $pics ?>

var pictures = new array(<? echo $pics; ?>);[/code]

und ganz am ende prüfst natürlich voher noch ob globalcount auch im bereich der array.lenght ist, sonst hast n leeres src attribut, das is doof

WOW. Nochmals vielen Dank Morpheus. Die Codes helfen mir schonmal weiter.

Leider kann ich es in dem Sinn nicht für mein Vorhaben umsetzen, denn zu jedem Bild gehört eine eigene Kommentarbox.

Gibt es denn bei JavaScript die Möglichkeit, ganze Div-Bereiche einzufügen? So ähnlich wie bei include von PHP.

Die Idee, das Laden von Inhalten von java-script abhängig zu
machen, widerspricht der Grundidee von (X)HTML, Inhalt
zugänglich bereitzustellen. Die Idee ist daher schlecht.

In den transitional-Varianten kannst du iframe/framesets und
das Attribut target verwenden, um diese AJAX-Falle zu umgehen.

In den strict-Varianten fällt das Attribut target raus und statt des
der genannten Elemente verwendet man eher object, allerdings
muß man dann das Wechseln von Bild zu Bild in dem Dokument
bereitstellen, welches man als object eingebunden hat. Das
funktioniert ganz brauchbar, wenn man nur Funktionen wie
’ein Bild vorwärts’ braucht - für kompliziertere Aktionen täte man
dann wieder das gesamte Dokument nachladen.
Man kann etwa in das Hauptdokument eine Navigation mit
kleinen Vorschaubildern basteln, die beim Aufruf alles neu laden
und im object ein Dokument referenzieren, wo nur ein Verweis
zum nächsten Bild drin steht, was das angezeigte Bild umgibt.
Ist mit PHP alles recht effektiv umzusetzen.

Achso - bei diesen Varianten ist es natürlich auch kein Problem,
Kommentare mit in das object-Element reinzutun, muß dann
eben nur entsprechend größer sein.

Vielen Dank hoffmann.
Ich habe mir eben mal den Object-Tag bei selfhtml.org angesehen. Leider verstehe ich ihn nicht so recht und wie er im meinem Fall für die Weiterleitung sorgen soll.

Folgender Code ändert sich jeweils von Bild zu Bild:

[code]

<< zurück Übersicht Diashow weiter >>
...
[/code]

Wird dieser ganze Code nun von den Object-Tag umschlossen? Was sorgt beim Object-Tag für die Weiterleitung?

Nochmals vielen Dank. Du hast mir schon des Öfteren geholfen und ich bin mir sicher, dass du mir hier auch weiterhelfen kannst.

Also ich will ja nicht behaupten, daß das eine schöne Lösung
mit der automatischen Weiterleitung ist, aber das entsprechende
meta-Element setzt du einfach in das Dokument, welches
du im object referenzierst.

...

sonstiger Inhalt und globales Menü

...

<object data="show.html" type="text/html" width="90%" height="400">

<a href="show.html">Show als eigenständiges Dokument ansehen</a>
</object>

... weiterer Inhalt ...

show.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="refresh" content="5; URL=show2.html">
<title>Show</title>
</head>
<body>

<div>
<img src="Bild1.jpg" alt="Schneetreiben im Juni 2009"><br>
<a href="show2.html">Nächstes Bild...</a>
</div>

<p>
Kommentar: Da war schon was los in der Antarktis im Juni 2009...
</p>

</body>
</html>

Kann man dann natürlich noch mit PHP alles automatisieren
und mit CSS besser dekorieren, besonders die Größe des
object.

kannst auch mit ajax das komplette div (id=“bild”) neu laden

Morpheus - sowas funktioniert aber nicht, wenn der Nutzer
java-script nicht verfügbar hat, daher macht man das nicht, um
inhaltlich relevante Sachen nachzuladen, das schreddert die
ganze Seite.

OT:
ich weiß schon, dass man es vielleicht von der idee her nicht machen sollte
tatsächlich haben aber die wenigsten js aus;
die einzigen die es deaktiviert haben sind wohl extremfälle von sicherheitsbedenkern und das sind <1% der user

genauso wie man auch ruhig inzwischen websites erstellen kann die nicht mehr auf MSIE 5 & 6 abgestimmt sind
youtube ist auch dabei ^^ http://www.heise.de/newsticker/YouTube-stellt-Unterstuetzung-fuer-Internet-Explorer-6-ein–/meldung/141998

Stabilität des browsers kann auch ein Grund sein. Wenn der
Autor da irgendwelchen Blödsinn reinschreibt, den ein browser
vielleicht geschickter abfängt als ein anderer, hängt der eine
eben und der andere nicht, ist natürlich doof, wegen eines
mangelhaften Skriptes den kompletten browser mit 20 offenen
tabs abschmieren zu sehen ;o)
Vor allem ist es aber so, daß der Inhalt eben mit (X)HTML
bereitgestellt wird, das ist die Grundidee, wenn man (X)HTML
verwendet. Man hat das Format schlichtweg nicht verstanden,
wenn man da von irgendwoher mit Skript weiteren Inhalt
herzaubert. Was anderes ist es, wenn man ohnehin vorhandenen
Inhalt anders dynamisch zugänglich macht oder anders anordnet,
um die Nutzbarkeit der Seite für Leute zu verbessern, die
Verständnisprobleme bei einer statischen Seite haben. Wobei
da die Korrelation zwischen Skriptnutzern und Leuten mit
Verständnisproblemen problematisch sein könnte. Man kann
nicht davon ausgehen, daß alle Leute, die Skriptinterpretation
aktiviert haben, darauf angewiesen sind, besondere Hilfen zum
Verständnis der Seite zu bekommen, das täte ja implizieren,
daß man denen einen IQ in einem bestimmten Bereich
unterstellt ;o) Anders herum kann man auch nicht implizieren,
daß Leute ohne Skriptnutzung nie Hilfen zum Verständnis
benötigen, weswegen man auch denen die Hilfen zukommen
lassen sollte - oder man könnte auf einer speziellen Hilfeseite
darauf hinweisen, daß mit Skriptinterpretation spezielle Hilfen
bei Verständnisproblemen verfügbar sind. Der Nutzer kann sich
dann ja selbst überlegen, ob er Verständnisprobleme hat und das
dann eben nutzen oder auch eine andere Informationsquelle.
Insofern ist ein sinnvoller und intelligenter Einsatz von Skripten
eine nicht triviale Angelegenheit, auch schon ohne die konkreten
technischen Fragestellungen, wie unabhängig vom browser-Typ
und -Version das alles funktioniert.

Zur Statistik - ich habe durchaus auch Projekte, wo deutlich mehr
als 50% der Besucher sicher keine Skriptinterpretation aktiviert
haben. Gibt auch ganze Scharen von Programmen oder browsern,
die gar keine Skriptinterpretation implementiert haben, weil das
als inhaltlich nicht relevant gesehen wird, weil der Inhalt ja auch
ohne Skript verfügbar ist.

Vielen Dank an euch beide. Der Object-Tag geht in die Richtung, was ich mir vorgestellt habe. Damit probiere ich es mal.

Kleinigkeiten würde ich daran noch gerne ändern?

  • Kann man die Höhe (Weite) auch irgendwie dynamisch gestalten?
  • Kann man den Rahmen und den Scroll-Balken unterdrücken/ausschalten?
  • Kann man aus dem Object-Tag ausbrechen? Beispiel: Auf den Bilden liegt ein Link zur Bilddatei. Das verlinkte Bild soll bei der Aktivierung nicht im Fenster des Object-Tags angezeigt werden, sondern in einem leeren Browserfenster, wie normalerweise auch.

Schon mal vielen Dank im Voraus.

Gruß Elsner