Bildergalerie mit Textzeile

[Compiwurstel]

Hallo zusammen,
ich habe vor einiger Zeit ein Skript gefunden, dass ich gerne für Bildergalerien nutze:

rotator=true;
n=0;
theImages="pics/name01.jpg, pics/name02.jpg, pics/name03.jpg, usw.".split(", ");
allImages=theImages.length;

imgObjects=new Array();
for (i in theImages){
imgObjects[i]=new Image();
imgObjects[i].src=theImages[i];
}

function rotate(srcimage,direction){
n=n+direction;
if (n==allImages) n=0;
if (n==-1) n=allImages-1;
document.images[srcimage].src=imgObjects[n].src;
}

Der Aufruf sieht wie folgt aus:

<div style="text-align:center; margin:8px 0px"><img class="picture" name="picbig" src="pics/name01.jpg" alt="" /></div>

<a href="javascript:rotate('picbig',-1)" class="bord2 tabhead" style="width:100px; margin:5px 5px 5px 210px; float:left">Zurück</a> <a href="javascript:rotate('picbig',1)" class="bord2 tabhead" style="width:100px; margin:5px; float:left">Vor</a><br clear="all" />

Für manche Galerien hätte ich es allerdings ganz gerne, dass zu jedem Bild eine passende Bildunterschrift geladen wird. Zwar weiss ich, wie ich diese Unterschriften generieren kann, wenn ich auf die einzelnen Bilder per ID zugreifen kann. Was ich aber nicht weiß, wie genau der array aussehen muss, in dem ich die IDs jedem Bild zuordne. Ich hab schon ziemlich rum experimentiert, komme aber nicht weiter und bin auch weit davon entfernt ein JS-Profi zu sein.

Hilfe wäre schön!

Gruß Compiwurstel

 

[Quaese]

Hi,

das notwendige Array erstellst du wie das Bilderarray mit Hilfe der split-Methode.

theTitles = "Titel 1###Titel 2###Titel3".split("###");

Es ist darauf zu achten, dass die gleiche Reihenfolge wie bei den Bildquellen eingehalten wird.

In der Funktion rotate wird der Titel in ein span-Element (siehe unten) eingefügt:

document.images[srcimage].parentNode.getElementsByTagName("span")[0].innerHTML = theTitles[n];

Das span-Element wird im DIV-Container eingefügt, der das Bild beinhaltet:

<div style="text-align:center; margin:8px 0px"><img class="picture" name="picbig" src="pics/name01.jpg" alt="" /><span></span></div>

Ciao
Quaese

 

[Compiwurstel]

Danke für die schnelle und konkrete Antwort. Ich habe das Skript entsprechend geändert, kriege aber ne Fehlermeldung: 'srcimage' ist undefiniert

Oder habe ich es falsch eingebunden:

imgObjects=new Array();
for (i in theImages){
imgObjects[i]=new Image();
imgObjects[i].src=theImages[i];
document.images[srcimage].parentNode.getElementsByTagName("span")[0].innerHTML = theTitles[n];
}

Viele Grüße
Compiwurstel

 

[Quaese]

Sorry, mein Fehler!

Das Einfügen ins span-Tag muss natürlich in der Funktion rotate erfolgen:

function rotate(srcimage,direction){
  n=n+direction;
  if (n==allImages) n=0;
  if (n==-1) n=allImages-1;
  document.images[srcimage].src=imgObjects[n].src;
  document.images[srcimage].parentNode.getElementsByTagName("span")[0].innerHTML = theTitles[n];
}

Ciao
Quaese

 

[Compiwurstel]

Super! Jetzt funktioniert es - allerdings nicht beim Laden der Seite, sondern erst ab dem Aufruf des nächsten Bildes (was natürlich durch die Einbindung in die Funktion auch logisch ist!).
Wenn ich allerdings eine neue Funktion mit

document.getElementsByTagName("span")[0].innerHTML = theTitles[n];

definiere, die ich mit onload verbinde, dann ist auch dieses Problem gelöst.
Und vor den SPAN-Container habe ich jetzt ein

<br />

gesetzt und ihm eine css-Klasse zugewiesen. So verschwindet jetzt nicht mehr ein Teil des Textes hinter dem Bild und ich kann den Text nach Belieben formatieren.

Also: Problem gelöst!
Vielen Dank und herzlichen Gruß
Compiwurstel