foto album en uitleg script

Status
Niet open voor verdere reacties.
C

carthago

Nieuwe gebruiker
Lid geworden
28 apr 2008
Berichten
3
Ik wil graag een fotoalbum / presentatie online plaatsen.

Als voorbeeld heb ik deze pagina http://www.stanseatonphotography.co.uk/portraits.php waar een werkend script staat.

Voor mij moet de grote foto boven de thumbs staan en onclick op de thumbs wijzigt de grote foto.

Ik heb hier een stukje code welke ik gebruiken wil

Code: 
<!-- start photo album code -->
<div id="container-africa">
        <div id="gallery2" style="margin: 0pt 2px 0pt 2px; float: left; display: inline;">
<script language="JavaScript">
*/ Hier script welke in body te plaatsen is
</script>
<img src="afrika/foto1.jpg" alt="" title="© " id="" height="282" width="400">

<div class="thumbs2">
<a href="#_self" onclick="LoadGallery('','afrika/foto2.jpg')"><img src="afrika/foto2t.jpg" alt="" title="" height="68" width="97"></a>
<a href="#_self" onclick="LoadGallery('','afrika/foto3.jpg')"><img src="afrika/foto3t.jpg" alt="" title="" height="68" width="97"></a>
<a href="#_self" onclick="LoadGallery('',afrika/foto4.jpg')"><img src="afrika/foto4t.jpg" alt="" title="" height="68" width="97"></a>
<a href="#_self" onclick="LoadGallery('','.jpg')"><img src="t.jpg" alt="" title="" height="68" width="97"></a><br>
<a href="#_self" onclick="LoadGallery('','.jpg')"><img src="t.jpg" alt="" title="" height="68" width="97"></a>
<a href="#_self" onclick="LoadGallery('','.jpg')"><img src="t.jpg" alt="" title="" height="68" width="97"></a>
<a href="#_self" onclick="LoadGallery('','.jpg')"><img src="t.jpg" alt="" title="" height="68" width="97"></a>
<a href="#_self" onclick="LoadGallery('','.jpg')"><img src="t.jpg" alt="" title="" height="68" width="97"></a>
</div>
</div></div>

De code voor de thumbs heb ik overgenomen, maar ik kom er niet uit.

De basiscode moet deze zijn http://www.dynamicdrive.com/dynamicindex4/photoalbum.htm

Het kan allemaal eenvoudiger denk ik.

Dank voor de stapsgewijze hulp.

Carthago
 
Ik heb vlug iets simpels gemaakt, de opmaak heb ik achterwege gelaten.

Code: 
<html)>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>photoalbum</title>
<script type="text/javascript" language="javascript">
<!--
	function toonfoto(welke) {
		var source = welke.getAttribute("src");
		var foto = document.getElementById("foto");
		foto.src = source;
	}
-->
</script>
<style type="text/css">
	#main table img { width:50px; height:50px; }
	#main img {width:150px; height:150px; }
</style>
</head>

<body>
	<div id="main">
	<img id="foto" src="536659629_b60d375ed1_o.jpg" title="grote foto" />
	<table>
		<tr><td><img src="536659629_b60d375ed1_o.jpg" onclick="toonfoto(this)" /></td><td><img src="keyboard_close.jpg" onclick="toonfoto(this)" /></td></td><td><img src="webdesign.jpg" onclick="toonfoto(this)" /></td><td><img src="zelf_je_eigen_website_ontwerpen.jpg" onclick="toonfoto(this)" /></td></tr>
	</table>
	</div>
</body>
</html>

Ik heb een DIV geplaatst met alles erin, zodat je het kan positioneren zoals je zelf wilt. Voor de thumbs heb ik gewoon een tabelletje gebruikt (kon ook gewoon naast elkaar, of met een list).
Bij het klikken van een thumb, neem ik de waarde van de source en zet ik die in de src van de grote foto.

Ik weet niet in hoeverre ik je hierbij heb geholpen, ik ben zelf nog maar begonnen met javascript ...
 
Laatst bewerkt:
yveshessels,

Dank je voor je reaktie en voorbeeld. Ik zal het uitproberen en post dan weer. Nogmaals dank je.

carthago
 
Okay het script werkt zoals ik bedoelde en moet alleen nog e.e.a. in de css doen.

nogmaals dank,
Carthago
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan