Bilderzähler

[jürgen]

Hallo ihr Lieben!

1x noch beanspruche ich eure Hilfe und Nerven ;-)

Hier auf meiner Testseite hab ich eine ganz simple Foto-Galerie eingebaut, bei der das VOR und ZURÜCK bestens klappt und nun soll aber auch "Bild x von y" angezeigt werden.

Allerdings wirft mir die Variable "i" immer nur 1 aus anstatt mitzuzählen.

HEAD-Teil:

  
  <script language="JavaScript">  
var i = 1  
images = new Array  
images[01] = "fotos/01.jpg"  
images[02] = "fotos/02.jpg"  
images[03] = "fotos/03.jpg"  
images[04] = "fotos/04.jpg"  
images[05] = "fotos/05.jpg"  
images[06] = "fotos/01.jpg"  
images[07] = "fotos/02.jpg"  
images[08] = "fotos/03.jpg"  
images[09] = "fotos/04.jpg"  
images[10] = "fotos/05.jpg"  
AnzPic = (images.length-1);  
function gallery()  
{  
if (i == 1)  
document.getElementById('previous').value=""  
}  
function previmg()  
{  
if (i != 1)  
{  
i --  
document.img.src = images[i]  
document.getElementById('next').value = "Nächstes >"  
}  
if (i == 1)  
document.getElementById('previous').value=""  
}  
function firstimg()  
{  
i = 1  
document.img.src = images[i];  
aktuell = i  
document.getElementById('previous').value=" ";  
document.getElementById('next').value="Nächstes >"  
}  
function lastimg()  
{  
i = AnzPic  
document.img.src = images[i];  
document.getElementById('next').value=" "  
document.getElementById('previous').value="< Vorheriges";  
}  
function nextimg()  
{  
if (i != AnzPic)  
{  
i ++;  
document.img.src = images[i];  
document.getElementById('previous').value="< Vorheriges";  
}  
if (i ==AnzPic)  
document.getElementById('next').value="";  
}  
  </script>

Body-Teil:

  
<script type="text/javascript">  
document.write(i);  
</script>  
von  
<script type="text/javascript">  
document.write(AnzPic);  
</script>  

Dies wirft leider immer nur "1 von 10" aus ......
Wo liegt der Fehler?

[ingobar]

Hallo,

ich bekomme zwei "Fehler" im Firefox geliefert:

images[08] = "fotos/03.jpg"
images[09] = "fotos/04.jpg"

08 und 09 macht Probleme, warum schreibst du nicht einfach 8 und 9 etc.?

document.getElementById('previous').value=""

Sind die ; ausgegangen?

In Zeile 70 kommt der Fehler:

document.getElementById('previous') ist null.

D.h. er findet das Objekt previous nicht und kann damit nicht auf value zugreifen. Kontrolliere das mal.

[jürgen]

document.getElementById('previous') ist null.

D.h. er findet das Objekt previous nicht und kann damit nicht auf value
zugreifen. Kontrolliere das mal.

Da davor folgender Code steht:

  
if (i == 1)

nehme ich an, dass es bedeutet, wenn Zähler i = 1 dann wird von 'previous' (Name des "vorheriges Bild"-Button) kein Wert zurückgegeben da wir ja erst beim 1. Foto sind.

------------------

Hier wird beim Anklicken des "next"-Buttons in der Funktion folgendes ausgeführt:

  
i ++;  
document.img.src = images[i];  

das heisst doch i wird um 1 erhöht und an images übergeben womit das jeweilige Bild zur zugehörigen Zahl ausgewählt wird. Also ändert sich zwar "i" ständig aber doch wird dauernd nur 1 angezeigt ...

[jürgen]

ach ja!

hier der Link zur Testseite

[Micha]

Hallo jürgen,

Ingobar hat ja schon einiges an Fehlern aufgezählt - bei weiten nicht alle. Berichtige das aber trotzdem.

Zu Deinem Problem. Das i hochgezählt wird, kannst Du einfach prüfen, indem Du in der Funktion previmg() mal eine Ausgabe machst:

  
function previmg()  
{  
alert("Bildnummer: " + i);  
//...  

Du wirst erkennen, das i sich ändert. Du mußt also die Anzeige aktualsieren, wenn Du auch ein Bild neu lädst.

Mit freundlichem Gruß
Micha

[jürgen]

Hat wirklich niemand eine Idee wie ich den aktuellen Wert von "i" auslesen bzw. ausgeben kann?

Langsam dämmert mir was, glaub ich halt:

1.)
"i" selbst wird ja bei jeder Scriptabarbeitung mit
   var i = 1
auf 1 gesetzt, somit wird aus "i" leider immer nur 1 ausgelesen.

2.)
Im Code ist bei Seitenaufruf ein Foto vordefiniert:
   ~~~html <img alt="" name="img"
   src="fotos/hochzeit/hochzeit-01.jpg">

hier werden dann die Fotos mit "next"- bzw. "previous"-Buttons gewechselt  
  
3\.)  
Es wurde zB schon bis Bild 5 geklickt. Bei Aufruf des "next"-Buttons wird i um 1 erhöht und somit wird korrekt Bild 6 durch  
   ~~~javascript
images = new Array  
   images[6] = "fotos/hochzeit/hochzeit-06.jpg"

angezeigt

4.)
Das bedeutet, es ist aktuell Bild 6 aktiv.

5.)
UND JETZT:
Wie kann ich aus dem aktuell auf der Seite aufscheinenden
   images[6] = "fotos/hochzeit/hochzeit-06.jpg"
die Zahl 6 auslesen um für den Besucher die aktuelle Bildzahl angeben zu können???

(mit document.write(i + " von " + AnzPic) bleibt immer "1 von 13".)

Vielen Dank!

Jürgen

[JürgenB]

Hallo jürgen,

(mit document.write(i + " von " + AnzPic) bleibt immer "1 von 13".)

das document.write wird ja auch nur einmal ausgeführt. Du musst stattdessen ein Element (z.B. ein p) nehmen, und beim Start und bei jeder Bildänderung den Inhalt anpassen:

<p id="Zaehler"></p>

[ref:self812;javascript/objekte/document.htm#get_element_by_id@title=document.getElementById]("Zaehler").innerHTML = "Bild " + i + " von " + AnzPic ;

Gruß, Jürgen

[jürgen]

das document.write wird ja auch nur einmal ausgeführt. Du musst stattdessen ein Element (z.B. ein p) nehmen, und beim Start und bei jeder Bildänderung den Inhalt anpassen:

<p id="Zaehler"></p>

[ref:self812;javascript/objekte/document.htm#get_element_by_id@title=document.getElementById]("Zaehler").innerHTML = "Bild " + i + " von " + AnzPic ;

Gruß, Jürgen

Hallo Namensvetter,

kannst Du das ein bisschen genauer erklären ...

woher nimmt "Zähler" denn den Wert her?

[JürgenB]

Hallo jürgen,

kannst Du das ein bisschen genauer erklären ...

woher nimmt "Zähler" denn den Wert her?

der String "Zaehler" (mit ae) ist die ID des P-Elementes, auf das du per document.getElementById zugreifen kannst. Schau dir mal die Doku dazu an.

Die Zeile mit dem .innerHTML = ... muss überall dahin, wo auch das Bild geändert wird. Die Variablen i und AnzPic sind ja bekannt.

Gruß, Jürgen

[jürgen]

der String "Zaehler" (mit ae) ist die ID des P-Elementes, auf das du per document.getElementById zugreifen kannst. Schau dir mal die Doku dazu an.

Pfuuuhhh .....
Da blick ich nicht durch, schade.

Die Zeile mit dem .innerHTML = ... muss überall dahin, wo auch das Bild geändert wird. Die Variablen i und AnzPic sind ja bekannt.

"überall hin, wo das Bild geändert wird?"
Meinst Du damit die Position auf der Seite, wo die Fotos stehen oder meinst Du dort wo die Buttons geklickt werden?

Kann ich eigentlich mit dem Button, mit dem zB die Funktion "nextimg()" abgearbeitet wird auch mehrere Funktionen starten? Dann müsste doch der - wie Du sagtest - leider nur 1x beim Seitenaufruf ausgeführte Befehl "document.write" öfters gestartet werden? Aber das ist ja auch wieder keine Funktion ....

Mannomann, dachte nicht, dass es sooo schwierig ist, eine Variable auszugeben ...

Bitte um Gnade ob meiner rudimentären Kenntnisse

[JürgenB]

Hallo jürgen,

du musst im HTML-Bereich ein Element haben, wo du die Bildnummer ausgeben kannst. Hier bietet sich ein P-Element an. Dieses benötigt eine ID, damit du auf dieses Element zugreifen und seinen Inhalt verändern kannst. Dieses P-Element legst du dahin, wo der Bildzähler erscheinen soll.

Den Teil mit .innerHTML = ... notierst du im Script überall dort, wo du das Bild änderst, also in den Funktionen previmg und nextimg, und zwar unter oder über den Zeilen mit document.img.src = ...

Damit am Anfang schon die richtige Anzeige dort steht, musst du entweder das P-Element mit dem onload-Eventhandler des body mit dem Startwert füllen, oder du schreibst <p id="Zaehler">1 von 13</p>.

Wenn du diese Zeile automatisch an die Zahl der Bilder anpassen willst, kannst du auch die Ausgabe wie schon jetzt mit document.write machen. Du musst nur die ID ergänzen:

document.write("<p id='Zaehler'>" + i + " von " + AnzPic + "<\/p>");

Nach dem Laden der Seite, also z.B. beim Bildwechsel, darfst du document.write nicht mehr verwenden, da dann die Ausgabe gelöscht würde.

Gruß, Jürgen

[jürgen]

YEAHHH!

Du bist der Beste!!!

Danke!

[jürgen]

ach ja!

hier der Link zur Testseite