Archief - Javascript : Foto in ware grootte

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
R

Rutger

Legacy Member
Iemand javascriptje bij het klikken op een verkleinde foto dat hij dan in een apart venster op ware grootte wordt getoond?

Grtz Rutger
s

sir argeh

Legacy Member
<html>
<head>
<title>Untitled</title>

<script language="Javascript" type="text/javascript">
imagename='';
function vergroot(beeldnaam)
{
OpenWin = this.open("","GrootVenster","toolbar=no,menubar=no,location=no,scrollbars=no,resizable=no,status=no,width=320,height=275,left=241,top=200");
imagename = beeldnaam;
setTimeout('update()',500)
}
function update()
{
doc = OpenWin.document;
doc.write('<HTML><HEAD><TITLE>Groot beeld popup<\/TITLE><\/HEAD><BODY bgcolor="#0000CC" onBlur="self.focus()">');
doc.write('<center><IMG SRC="' + imagename + '">');
doc.write('<form><input type="button" value="Gelieve dit venster hier te sluiten."onClick="window.close()"><\/form><\/center><\/BODY><\/HTML>');
doc.close();
}
</script>

</head>
<body>

<a onclick="javascript:vergroot ('foto.jpg');" href="javascript:void(0);"><img height=60 width=60 alt="Klik voor groter beeld" src="foto.jpg" border="0"></a>

<a onclick="javascript:vergroot ('foto.jpg');" href="javascript:void(0);"><img height=60 width=60 alt="Klik voor groter beeld" src="foto.jpg" border="0"></a>

<a onclick="javascript:vergroot ('foto.jpg');" href="javascript:void(0);"><img height=60 width=60 alt="Klik voor groter beeld" src="foto.jpg" border="0"></a>

<a onclick="javascript:vergroot ('foto.jpg');" href="javascript:void(0);"><img height=60 width=60 alt="Klik voor groter beeld" src="foto.jpg" border="0"></a>

<a onclick="javascript:vergroot ('foto.jpg');" href="javascript:void(0);"><img height=60 width=60 alt="Klik voor groter beeld" src="foto.jpg" border="0"></a>


</body>
</html>




deze, maar bij mij geeft ie de melding dat er dan een fout optreedt,
misschien kan iemand ze hier verbeteren, wel niet op de img src letten
R

Rutger

Legacy Member
Is idd al goed, maar moet eiglijk nen autostretch gebeure he, want der zijn wel fotos breder dan 320 pixels en hoger dan 275 pixels.. Of zitk ernaast?

sir argeh zei:
<html>
<head>
<title>Untitled</title>

<script language="Javascript" type="text/javascript">
imagename='';
function vergroot(beeldnaam)
{
OpenWin = this.open("","GrootVenster","toolbar=no,menubar=no,location=no,scrollbars=no,resizable=no,status=no,width=320,height=275,left=241,top=200");
imagename = beeldnaam;
setTimeout('update()',500)
}
function update()
{
doc = OpenWin.document;
doc.write('<HTML><HEAD><TITLE>Groot beeld popup<\/TITLE><\/HEAD><BODY bgcolor="#0000CC" onBlur="self.focus()">');
doc.write('<center><IMG SRC="' + imagename + '">');
doc.write('<form><input type="button" value="Gelieve dit venster hier te sluiten."onClick="window.close()"><\/form><\/center><\/BODY><\/HTML>');
doc.close();
}
</script>

</head>
<body>

<a onclick="javascript:vergroot ('foto.jpg');" href="javascript:void(0);"><img height=60 width=60 alt="Klik voor groter beeld" src="foto.jpg" border="0"></a>

<a onclick="javascript:vergroot ('foto.jpg');" href="javascript:void(0);"><img height=60 width=60 alt="Klik voor groter beeld" src="foto.jpg" border="0"></a>

<a onclick="javascript:vergroot ('foto.jpg');" href="javascript:void(0);"><img height=60 width=60 alt="Klik voor groter beeld" src="foto.jpg" border="0"></a>

<a onclick="javascript:vergroot ('foto.jpg');" href="javascript:void(0);"><img height=60 width=60 alt="Klik voor groter beeld" src="foto.jpg" border="0"></a>

<a onclick="javascript:vergroot ('foto.jpg');" href="javascript:void(0);"><img height=60 width=60 alt="Klik voor groter beeld" src="foto.jpg" border="0"></a>


</body>
</html>




deze, maar bij mij geeft ie de melding dat er dan een fout optreedt,
misschien kan iemand ze hier verbeteren, wel niet op de img src letten
Klik om te vergroten...
S

S3cT0r

Legacy Member
Ik heb voor mijn site www.sp00fed.dk een stukje javascript gemaakt dat als je er op klikt dat het img dan in ware grootte wordt vertoond:
Code: 
function win(id) {
imgSelf = id.getAttribute('src')
tempImg = new Image()
tempImg.src = imgSelf
iWidth = tempImg.width + 16, iHeight = tempImg.height + 16
parameters = "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=yes, "
parameters += "width="+iWidth+", height="+iHeight
window.open(imgSelf ,'screenshot', parameters)
}
voorbeeldtag
Code: 
<a href="images/wow1.jpg" rel="external" onclick="win(this.firstChild); return false;"><img src="images/wow1.jpg" height="155px" width="185px" alt="Screenshot01" /></a>
L

Lashknife

Legacy Member
<a href="image.jpg" target="_blank"><img src="image.jpg" ... /></a>

Of heb je per se nood aan een fancy windowke met borders aan? dan moet je scripten...
R

Rutger

Legacy Member
En stel, ge hebt allemaal kleine images, en ge maakt daarnaast een groter img die leeg is, als ge dan op 1 van die thumbs klikt, hoe laadt ge dat dan in in die grote <img> ???
L

Lashknife

Legacy Member
euh, jouw vraag is nogal beperkt dan eh!

je vroeg, hoe kan ik als ik op een verkleinde foto klik, dat die foto dan realsize in een ander window geopend wordt...

niet: ik wil een script dat random images in een array kan doorlopen met prev/next buttons en waarvan ik het lijstje dynamisch genereer in een apart window met html opmaak laten openen.

maw: gewoon een link naar zichzelf, en dan opent de browser die image op zich (en da's default real size (behalve IE die clientside die instelling hebben om auto image resize te doen met da icoontje met oranje pijltjes)

dus veronderstel ik dat gij manueel intypt: <a href="image.jpg" target="_blank">link naar image in new window</a> en ik vervang de tussentekst met diezelfde image, maar dan met width en height attributes, alles manueel ingetypt, maar die vereiste heb jij niet gevraagd.... (maar zoals ik dan ook zei: als je fancy stuff wil, moet je scripten)

;)
R

Rutger

Legacy Member
Ja, of zoiets met pijltjes met Previous en Next is ook goed. Het probleem is dat het eerste script dat hierop stond, zoiets dat ik dus zocht niet werkt met mijn Asp.Net applicatie (gaat niet in combinatie met de quotes) Blame MS daarvoor...

Ik werk in men projectje met een DataRepeater. Kan ik dan zo een soort van albummeke maken met Vorige en Volgende knop? Iemand met ervaring daarover?

Grtz
R

RpR

Legacy Member
Rutger zei:
Ja, of zoiets met pijltjes met Previous en Next is ook goed. Het probleem is dat het eerste script dat hierop stond, zoiets dat ik dus zocht niet werkt met mijn Asp.Net applicatie (gaat niet in combinatie met de quotes) Blame MS daarvoor...

Ik werk in men projectje met een DataRepeater. Kan ik dan zo een soort van albummeke maken met Vorige en Volgende knop? Iemand met ervaring daarover?

Grtz
Klik om te vergroten...
use double quotes :) "" = "
B

Boddah

Legacy Member
het tonen van verkleinde foto's als thumbs is niet echt aan te raden, want dit betekend dat alle foto's op ware grootte worden gedownload, zelfs wanneer deze niet op ware grootte worden getoond.
bv: 10 foto's van 640*480 van 100kb elk, betekend dus 1mb om enkel het album overzicht te tonen. beter is om van die foto's 10 thumbs te maken, die 20, 30 keer minder opslag vragen waardoor de pagina sneller laadt.
L

Lashknife

Legacy Member
kweet wel boddah, maar kging er van uit dat dat wel normaal zou zijn :D
maar ik kan het niet meer editten...

<a href="realsizeimage.jpg" target="_blank"><img src="thumbimage.jpg" ........ /></a>
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan