Bild in DIV laden (Fotogalerie)

[Dustin84]

Hallo,

ich habe ein Thumb und beim klicken soll die große Version davon in meinen div Container gealden werden. (selbe Seite )


Zielcontainer für großes Bild:

<div id="container" style="width="519" height="400"/></div>

Den Link muss ich ja mit einen onClick handler machen aber wie sieht das genau aus ?

Gruß
D

 

[Maik]

Hi,

bette in das DIV eine "Blind-Grafik" ein, die dann gegen die nachfolgenden Bilder ausgetauscht wird.

Nähere Details hierzu (Code-Beispiel) findest du in dem Thema JavaScript-basierte Bildergalerie.

mfg Maik

 

[Dustin84]

mit Blind Bild meinst du sowas:

<div id="container" style="width="519" height="400"/><img src="/_standards/bilder/pixel.gif" width="519" height="400" border="0" /></div>

 

[Maik]

Nein.

Auszug aus dem empfohlenen Quellcode:

<div id="imageBox">
   <img src="pic00.jpg" alt="" name="start">
</div>

#imageBox entspricht deinem #container.

Übrigens hast du hier beim style-Attribut einen Syntax-Fehler fabriziert:

style="width="519" height="400"

Daraus wird:

style="width:519px; height:400px"

mfg Maik

 

[Dustin84]

bei deinem geposteten Link werden die Bilder statisch eingegeben, richtig ?

Bei mir ist es ein wenig anders. Ich beziehe die Bilder aus einem Bilderordner. Hinterher werden es mehrere Hundert sein.

 

[Maik]

Ja und? Das ist doch für den Bildertausch unerheblich.

mfg Maik

 

[Dustin84]

ja stimmt, mein Fehler

mir ist nur nicht klar, welchen codeschnipsel ich nun in meinen Link einbauen muss.

Mein Link wäre: <li><we:field border="0" type="img" name="mini_slide" thumbnail="mini_slide" hyperlink="true" ></li>

 

[Maik]

Die Rezept-Zutaten sind doch alle im Quellcode enthalten.

Script-Funktion:

// swapImage
function swapImage(imgName,swapImg)
{
document.images[imgName].src=swapImg;
}

Funktionsaufruf:

onclick="swapImage('start','pic01.jpg')"

mfg Maik

 

[Dustin84]

Also, ich habe nun folgenden link für meine kleinen Thumbs: (mini_big ist der Name meiner großen Thumbbilder)

	<li>><a href="#" onclick="swapImage ('start','mini_big')"><we:field border="0" type="img" name="mini_slide" thumbnail="mini_slide" hyperlink="true"></a></li>

Und hier der Zielcontainer:

<div id="start" style="width="519px" /><img src="/_standards/bilder/pixel.gif" name="start" border="0" /></div><!-- Container großes Bild -->

Könnte das so richtig sein?

Hier nochmal mein aktuelles Javascript:

<script type="text/javascript"><!-- Thumb switchen -->
// swapImage
function swapImage(imgName,swapImg)
{
document.images[imgName].src=swapImg;
}
</script>

 

[Maik]

Könnte das so richtig sein

Sollen wir das jetzt für dich überprüfen? :suspekt:

Nicht ganz, denn http://www.tutorials.de/forum/1714248-post4.html

und im zweiten Funktionsparameter mußt du die Grafikdatei nennen, die zu laden ist - oder es fehlt hier schlichtweg ihre Dateiendung (.gif, .jpg, .png):

onclick="swapImage ('start','mini_big')">

Außerdem wird am Ende des <div>-Tags kein Schrägstrich notiert, da es sich hierbei nicht um einen Standalone-Tag, wie z.B. das img-Element handelt.

mfg Maik