✔ Sind mehrere javascript-Bildergalerien auf einer Site möglich?

M

mastertopo

Grünschnabel
Hallo zusammen,

ich habe mir für eine Website eine Bildergalerie mit javascript "gebastelt". Die Funktionalität ist mir wichtig, d.h. sie ist einfach gehalten. Es gibt thumbnails. Werden diese angeklickt, erscheint das entsprechende Bild in groß.

Gerne möchte ich nun auf der gleichen Site, eine 2. Bildergalerie erstellen zu einem 2. Thema.

Also in etwa so:
1. Zeile: Thema 1, großes Bild, daneben 5-6 thumbnails
2. Zeile: Thema 2, großes Bild, daneben wieder 5-6 thumbnails

Nun ist es so, dass bei Klick auf die thumbnails des Themas 2 sich das große Bild ändert, allerdings in Zeile 1 und nicht in Zeile 2. D.h. ich habe ein Zuordnungsproblem.

Hier noch entsprechender Code dazu (für die eine Bildergalerie, die bisher funktioniert):

<head>
<script type="text/javascript">function showbig(bildli) { bildlineu = new Image(); bildlineu.src = bildli; document.images["Anzeige"].src = bildlineu.src;}</script>
</head)

<body>
<div id="pic1"> <img name="Anzeige" src="pics/beispiel_01.jpg" /></div>

<a href="javascript:showbig('pics/beispiel_01.jpg');"><img src="buttons/beispiel_01.gif" height="30" width="44" border="0" /></a>
<a href="javascript:showbig('pics/beispiel_02.jpg');"><img src="buttons/beispiel_02.gif" height="30" width="43" border="0" /></a>
<a href="javascript:showbig('pics/beispiel_03.jpg');"><img src="buttons/beispiel_03.gif" height="30" width="43" border="0" /></a>
</body>

Könnt Ihr mir helfen, wie ich nun die 2. Galerie auf der gleichen Site einrichte, so dass die Zuordnung der thumbnails jeweils zum Großbild in der gleichen Zeile passt!?

Ich hoffe, dass ich mein Problem nicht allzu undeutlich erklärt habe! Wenn doch, bitte Bescheid geben!

Ich würde mich sehr über Eure Hilfe freuen! Danke.

Gruß, Ingo
 
Hi,

gib den Bilder-Elementen unterschiedliche Werte in den name-Attributen zu. Der Funktion zum Wechseln übergibst du zusätzlich den Name des Elements, dessen Bild geändert werden soll.
Code: 
unction showbig(bildli, strName) { 
  bildlineu = new Image(); 
  bildlineu.src = bildli; 
  document.images[strName].src = bildlineu.src;
}
HTML:
Code: 
<div id="pic1"> <img name="Anzeige1" src="pics/beispiel_01.jpg" /></div>
<a href="javascript:showbig('pics/beispiel_01.jpg', 'Anzeige1');"><img src="buttons/beispiel_01.gif" height="30" width="44" border="0" /></a>
<a href="javascript:showbig('pics/beispiel_02.jpg', 'Anzeige1');"><img src="buttons/beispiel_02.gif" height="30" width="43" border="0" /></a>
<a href="javascript:showbig('pics/beispiel_03.jpg', 'Anzeige1');"><img src="buttons/beispiel_03.gif" height="30" width="43" border="0" /></a>

<div id="pic2"> <img name="Anzeige2" src="pics/beispiel_01.jpg" /></div>
<a href="javascript:showbig('pics/beispiel_01.jpg', 'Anzeige2');"><img src="buttons/beispiel_01.gif" height="30" width="44" border="0" /></a>
<a href="javascript:showbig('pics/beispiel_02.jpg', 'Anzeige2');"><img src="buttons/beispiel_02.gif" height="30" width="43" border="0" /></a>
<a href="javascript:showbig('pics/beispiel_03.jpg', 'Anzeige2');"><img src="buttons/beispiel_03.gif" height="30" width="43" border="0" /></a>
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück