Help me!! met mn "foto album"

[kisha]

hallo ik ben bezig voor een site een foto album te maken.. nou kan ik goed met photoshop ed. overweg.. alleen heb ik de balle verstand van het schrijven van websites.. alleen over de basis beschik ik..

ik wil dan ook iemand heel lief aan kijken om mij te helpen..

http://img146.imageshack.us/img146/3276 ... eld3ft.png



dit is wat ik ongeveer in me hoofd heb.. kan iemand alsjeblieft de code ervoor schrijven???


klein uitlegje;
ik wil zeg maar aan de linker kant thumbnails hebben en dat als je daar dan op klikt dat ie wordt vergroot in het vak aan de rechterkant.. snap je?

alvast heel erg bedankt

[julien]

Dat gaat niet zomaar lukken in HTML (zonder frames), je zal hiervoor javascript of Flash nodig hebben denk ik.

[Weeeyaa]

je kunt met php misschien de plaatjes uploaden naar een database met een id, en dan de thumbnail de link geven plaatje.png?id=1

als je daar op klikt een query met t id uitvoeren en dan dat plaatje echoen...

Thijs

[Derk]

[libia]

de scroller weet ik niet maar dat andere wel (dhtml ):

in de head:
[code="html"]
<script language="JavaScript">
// hier definieer je alle afbeeldingen
var afbeeldingen=new Array()
afbeeldingen[0]=["foto1.jpg", "#"] // "pad en naam van de foto", "eventuele hyperlink"
afbeeldingen[1]=["foto2.jpg", "#"]
afbeeldingen[2]=["foto3.jpg", "#"]
afbeeldingen[3]=["foto4.jpg", "#"]
afbeeldingen[4]=["foto5.jpg", "#"]
afbeeldingen[5]=["foto6.jpg", "#"]
afbeeldingen[6]=["foto12.jpg", "#"]
afbeeldingen[7]=["foto8.jpg", "#"]
afbeeldingen[8]=["foto9.jpg", "#"]
afbeeldingen[9]=["foto10.jpg", "#"]

var voorladen="nee" // "ja" of "nee"
var optlinktarget="" // optioneel: hier kun je een doel invullen bij framesgebruik
var beeldrandbreedte=0
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

// hieronder geen wijzigen aanbrengen

if (voorladen=="ja"){
for (x=0; x<afbeeldingen.length; x++){
var ditbeeldje=new Image()
ditbeeldje.src=afbeeldingen[x][0]}}

function beeldcode(dezeafbeelding){
var beeldhtml=""
if (dezeafbeelding[1]!="")
beeldhtml='<a href="'+dezeafbeelding[1]+'" target="'+optlinktarget+'">'
beeldhtml+='<img src="'+dezeafbeelding[0]+'" border="'+beeldrandbreedte+'">'
if (dezeafbeelding[1]!="")
beeldhtml+='</a>'
return beeldhtml}

function wijzigbeeld(beeldplaatsing, beeldindex){
if (document.getElementById){
var imgobj=document.getElementById(beeldplaatsing)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()}
imgobj.innerHTML=beeldcode(afbeeldingen[beeldindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false}}
</script>
[/code]

en de body:
[code="html"]
<table>
<tr>
<td><a onmouseover="wijzigbeeld('beeldplaatsing', 0)" href=""><img height=45 src="thumbnail1.jpg" width=60 border=1></a></td>
<td><a onmouseover="wijzigbeeld('beeldplaatsing', 1)" href=""><img height=45 src="thumbnail2.jpg" width=60 border=1></a></td>
<td rowspan="5"><div id=beeldplaatsing style="width: 500px; height: 300px" ;></div></td>
</tr><tr>
<td><a onmouseover="wijzigbeeld('beeldplaatsing', 2)" href=""><img height=45 src="thumbnail3.jpg" width=60 border=1></a></td>
<td><a onmouseover="wijzigbeeld('beeldplaatsing', 3)" href=""><img height=45 src="thumbnail4.jpg" width=60 border=1></a></td>
</tr><tr>
<td><a onmouseover="wijzigbeeld('beeldplaatsing', 4)" href=""><img height=45 src="thumbnail5.jpg" width=60 border=1></a></td>
<td><a onmouseover="wijzigbeeld('beeldplaatsing', 5)" href=""><img height=45 src="thumbnail6.jpg" width=60 border=1></a></td>
</tr><tr>
<td><a onmouseover="wijzigbeeld('beeldplaatsing', 6)" href=""><img height=45 src="thumbnail7.jpg" width=60 border=1></a></td>
<td><a onmouseover="wijzigbeeld('beeldplaatsing', 7)" href=""><img height=45 src="thumbnail8.jpg" width=60 border=1></a></td>
</tr><tr>
<td><a onmouseover="wijzigbeeld('beeldplaatsing', " href=""><img height=45 src="thumbnail9.jpg" width=60 border=1></a></td>
<td><a onmouseover="wijzigbeeld('beeldplaatsing', 9)" href=""><img height=45 src="thumbnail10.jpg" width=60 border=1></a></td>
</tr>
</table>
[/code]

[kisha]