thumbnail-galerie verlinken

[Vinzenz Mai]

Hallo,

jetzt mache ich schon wieder ewig rum und etwas ist immer noch falsch:

ewig? Kann gar nicht sein. Du hast doch erst heute angefangen. Erwartest Du von Dir selbst, auf Anhieb eine Meisterin zu sein? Hoffentlich nicht.

<a href="image_tipsy.jpg" id="imagetipsy" alt="Tipsy Ritzenhoff" width="600" height="300" >
<img src="thumbnail_romeo.jpg" id="thumbnailromeo" alt="Thumbnail    Elephant Romeo" width="60" height="60">
</a>

<a href="thumbnail_romeo.jpg" id="thumbnailromeo" onclick="imagetipsy"; return false; alt="Thumbnail Elephant Romeo" width="60" height="60">
</a>

ganz schlau werde ich daraus nicht. Ich erläutere noch einmal kurz meinen Vorschlag:

Du hast ein Element, in dem Dein Vollbild dargestellt werden soll. Damit Du das Bildelement identifizieren kannst, vergibst Du diesem Zielelement eine id:

<img id="Vollbild" src="" alt="Vollbildanzeige">

Deine Thumbnails verlinkst Du, z.B.

<a href="image_tipsy.jpg"><img src="thumbnail_romeo.jpg" id="thumbnailromeo" alt="Thumbnail    Elephant Romeo" width="60" height="60"></a>  

Damit beim Anklicken des Links bei aktiviertem Javascript an entsprechender Stelle das Vollbild angezeigt wird, nutzen wir den Handler onclick. Wir rufen dabei eine Funktion auf (die Du z.B. im head-Bereich in einem script-Element einbinden kannst). Diese Funktion heißt

anzeigenVollbild

Ihr übergeben wir einen Funktionsparameter, den Wert des href-Attributs des angeklickten Links:

<a href="image_tipsy.jpg" onclick="anzeigenVollbild(this.href)"><img src="thumbnail_romeo.jpg" id="thumbnailromeo" alt="Thumbnail    Elephant Romeo" width="60" height="60"></a>  

Wir müssen darauf achten, dass der onclick-Handler den Wert false zurückliefert, damit dem Link nicht gefolgt wird.

Nun zur Funktion selbst:

// Die Funktion erhält die url des anzuzeigenden Bildes  
// Das Bild soll in dem Element mit der id="Vollbild" angezeigt werden.  
function anzeigenVollbild(url) {  
    // Wir verschaffen uns über die id des Zielelementes Zugriff auf dieses  
    var target = document.[ref:self812;javascript/objekte/document.htm#get_element_by_id@title=getElementById]("Vollbild");  
  
    // Wir müssen das src-Attribut dieses Elementes setzen  
    // und zwar mit dem übergebenen Wert, dem Wert des href-Attributs  
    // des angeklickten Links  
    target.[ref:self812;javascript/objekte/images.htm#src@title=src] = url;  
  
    // Nun müssen wir noch den boolschen Wert false zurückgeben,  
    // damit der Link nicht ausgeführt wird  
    return false;  
}  

Die ersten beiden Zeilen kann man auch zusammenfassen und auf die Variable target einfach verzichten, unkommentiert der von mir angekündigte Zweizeiler:

function anzeigenVollbild(url) {  
    document.getElementById("Vollbild").src = url;  
    return false;  
}  

Ich hoffe, Du siehst, dass Du diese Funktion mit dem immer gleich bleibenden Aufruf

onclick="anzeigenVollbild(this.href)"

jedem Deiner Links um die Thumbnails mitgeben kannst, ohne irgendetwas ändern zu müssen. Das

this.href

sorgt dafür, dass stets der Wert des href-Attributs des angeklickten Links an die Funktion übergeben wird.

Kommst Du damit weiter? Wenn ja, dann kannst Du den nächsten Schritt unternehmen. Wenn nein, dann sag bitte, wo Du hängengeblieben bist. Ich denke, Du solltest den Unterschied zu Deinen Versuchen erkennen können.

Freundliche Grüße

Vinzenz