# Bild in DIV laden (Fotogalerie)



## Dustin84 (6. Januar 2009)

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 (6. Januar 2009)

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 (6. Januar 2009)

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 (6. Januar 2009)

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 (6. Januar 2009)

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 (6. Januar 2009)

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

mfg Maik


----------



## Dustin84 (6. Januar 2009)

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 (6. Januar 2009)

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 (6. Januar 2009)

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 (6. Januar 2009)

Dustin84 hat gesagt.:


> 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


----------



## Dustin84 (6. Januar 2009)

> und im zweiten Parameter mußt du die Grafikdatei nennen



und genau da liegt das Problem. Ich müsste ja jedes einzelne Bild (Es sind über 500) dahin schreiben. 

Ich habe die Bilder alle in unterschiedlichen größen in meinen Bilderordner und erzeuge davon jeweils nur die Miniaturansichten (genannt "mini_slide" für die kleinen Preview Thumbs und einmal "mini_big" für die Großansicht.


----------



## Maik (6. Januar 2009)

Und wie rufst du die 500+ Bilder in der Galerie auf?

Ansonsten schau dir mal http://rus-star.com/portfolio.html genauer an, was doch gemäß deinem letzten Thread  Fotogalerie a la rus-star.com / jCarousel Fotogalerie einbinden die Inspiration deines Vorhabens war.

mfg Maik


----------



## Dustin84 (6. Januar 2009)

wie gesagt, es werden die einzelnen Bilderordner ausgelesen.


```
<we:field border="0" type="img" name="mini_slide" thumbnail="mini_slide" hyperlink="true">
```

Es gibt vorher eine Ordnerabfrage und we:field setzt dann alle Bilder in meinen Fotoslider, als thumbnail="mini_slide"  (Kleines Thumb, wird live verkleinert auf die vorher bestimmte Größe)


Hier der ganze Code, der das Selectfeld füllt:


```
<we:ifEditmode>
				<we:block name="fotoalben">
					Text: <we:input type="text" name="Beschreibung" size="9"/> - OrdnerID: <we:input type="text" name="VerzeichnisID" size="1"/> - Anzahlbilder: <we:input type="text" name="Bildanzahl" size="1"/>  - Datum: <we:input type="text" name="datum" size="2"/>
				</we:block><br /><br /><br /><br />
			</we:ifEditmode>
			<we:ifNotEditmode>
			<form name="FotoalbumAuswahl">
			<select name="auswahl" size="1" class="auswahl" onChange="Go(this.form.auswahl.options[this.form.auswahl.options.selectedIndex].value)">
				<?
				$GLOBALS["indizes"] = unserialize($GLOBALS["we_doc"]->getElement("fotoalben"));
				$GLOBALS["blockzaehler"] = 0;
				?>
				<we:block name="fotoalben">
					<? \$VerzID = \$GLOBALS["we_doc"]->getElement("VerzeichnisIDblk_fotoalben_".\$GLOBALS["indizes"][\$GLOBALS["blockzaehler"]]); ?>
					<option <? if(\$VerzID == \$_GET[album]) { echo 'selected="selected"'; } ?> value="/fotoalbum/index.php?album=<we:input type="text" name="VerzeichnisID" size="3"/>"><we:input type="text" name="Beschreibung" size="40"/></option>
					<? \$GLOBALS["blockzaehler"]++; ?>
				</we:block>
			</select>
			</form>
			</we:ifNotEditmode>
```


Und der Code, der den Fotoslider füllt:


```
</div><!-- Beginn Fotogalerie -->
	 	 <div id="wrap">
		 <ul id="mycarousel" class="jcarousel-skin-tango">
		 	<? if(!$_GET[album]) { $album = 16; } // DefaultBilderOrdner?>
			<we:listview name="ImageGallery" contenttypes="img" searchable="false" workspaceID="\$album">
				<we:repeat>
				<li><a href="#" onclick="swapImage ('start','mini_big')"><we:field border="0" type="img" name="mini_slide" thumbnail="mini_slide" hyperlink="true"></a></li> 
				</we:repeat>
			</we:listview> 
		</ul>
		</div>
```



> Ansonsten schau dir mal http://rus-star.com/portfolio.html genauer an, was doch gemäß deinem Thread Fotogalerie a la rus-star.com / jCarousel Fotogalerie einbinden die Inspiration deines Vorhabens war.



Habe ich schon. Auch dort hat er die Bilder per Hand verlinkt und jeden Link einzeln aufgeführt.


----------

