Archief - JS : pop-up (foto_size)

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.

Lagoas

Legacy Member
Yow gasten, mij pa heeft hier een vraagsken,
en ik kan er eerlijk gezegd niet op antwoorden.

Hij zit met wat thumbnails op een pagina,
en dus als je erop klikt, worden de foto's geopend
in een pop-up, met de originele/grote foto.

You know, the usual (javascript).

Nu begint em te zagen, da er rond zijn foto nog een witte band te zien is, dus tussen de foto (bv 400*300) en het venster is er nog altyd een witte band.

Nu heeft hij ergens gezien da het mogelijk is om foto perfect in het venster te plaatsen, alleen weet hij ni hoe,
en ik ook niet :-)

Iemand een idee?


Ahja, en bij het resizen van pop-up window, in uw settings,
in javascript dus, euhm, als venster kleiner wordt dan de foto zelf, zal er links vanboven altyd die witte hoek blijven staan, tis een detail ma ja , tzou wegmoeten.

Een voorbeeld van hoe het zou moeten zijn vind je op
http://www.z3roadster.com/galleries.asp?c=1&g=1


:confused:

zero2one

Legacy Member
Al ooit van "bron weergeven" gehoord?

dan had je deze vraag niet hoeven te stellen want het antwoord op alle gestelde vragen zit op de pagina die je als voorbeeld opgaf:

PHP:
<html>
<head>
<title>Z3 Roadster</title>
</head>

<body onLoad="self.resizeTo(document.img.width,document.img.height+25)" topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0 marginwidth=0 marginheight=0>
<img src="i/r/es_01.jpg" name="img">
</body>
</html>
de onLoad zorgt ervoor dat het venster zich aanpast aan de img propertys,
de topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0 marginwidth=0 marginheight=0 zorgen ervoor dat er geen witte rand is

(best wel de propertys quoten):
PHP:
topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"

Lagoas

Legacy Member
zero2one zei:
<html>
<head>
<title>Z3 Roadster</title>
</head>

<body onLoad="self.resizeTo(document.img.width,document.img.height+25)" topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0 marginwidth=0 marginheight=0>
<img src="i/r/es_01.jpg" name="img">
</body>
</html>
[/PHP]
de onLoad zorgt ervoor dat het venster zich aanpast aan de img propertys,
de topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0 marginwidth=0 marginheight=0 zorgen ervoor dat er geen witte rand is

Hmm, versta ik niet,
het moet wel degelijk via een popup zijn hé,
originele index.html bevat dus thumbnails
<img src ="bla.jpg">
en bij een onclick moet er een popup tevoorschijn komen
met de exacte formaten van height en width :confused:



body onLoad="self.resizeTo(document.img.width,document.img.height+25)"
=> wa is de bedoeling van die 25 ?



<img src="i/r/es_01.jpg" name="img">

=> die i/r da is toch niets speciaals hé?
=> das gewoon de link (via 2 submappen) naar die foto
toch hé? just checking :confused:


moet ik dan via javascript een onclick functie gebruiken?

Lagoas

Legacy Member
w8
ik denk dat ik het systeem door heb :D


maar die +25 is denk ik wat weinig,
eventjes verder proberen...

Lagoas

Legacy Member
Ik probeer

<html>
<head>
</head>
<body>
<a href="start.jpg" onclick="window.open('start.jpg', 'start', 'toolbar=no,scrollbars=no,menubar=no,topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0,marginwidth=0 marginheight=0'); return false">
linktekst</a>

</body>
</html>

maar dit lukt precies niet om die foto start.jpg mooi
in het venster te krijgen :eek:

Lagoas

Legacy Member
dêsh' zei:
Als ik die site hier probeer (ff) werkt dat toch perfect.

mja
bekijk de foto
en kijk links bovenaan de foto

er is nog altyd een witte rand tussen de foto en het venster
(ik denk een halve cm ofzo)
en op die site van bmw die ik hier gepost heb is dat dus niet :(

Dece

Legacy Member
hebde de foto in de popup wel een name attribuut meegegeven???

Lagoas

Legacy Member
Dece zei:
hebde de foto in de popup wel een name attribuut meegegeven???

ik heb mijn (exacte) code toch hierboven gecopypaste?

ik zal vanavond (als ik tyd heb) proberen
een screenshot te tonen, want ik denk niet
dat mijn probleem duidelijk omschreven is door mezelf.

Dece

Legacy Member
Code:
JS gedeelte op u hoofdpagina:

function popupImage(url)
{
window.open(url,'_blank','width=800,height=600,resizable=yes,scrollbars=no,status=no,toobar=no,menubar=no,location=no');
}
Code hoofdpagina:
<a href="#" onclick="popupImage('linknaarhtmlbestandimage')"><img src="thumbnail" /></a>


Code popup
<html>
<head>
<title>popup pic</title>
</head>
<body onLoad="self.resizeTo(document.img.width,document.img.height+25)" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<img src="linknaarimage" name="img" />
</body>
</html>
blijkt hier wel te werken

Lagoas

Legacy Member
mijn index.html ziet er zo uit :


<html>
<head>
function popupImage(url)
{
window.open(url,'_blank','width=800,height=600,resizable=yes,scrollbars=no,status=no,toobar=no,menubar=no,location=no');
}
</head>
<body>
<a href="#" onclick="popupImage('popup.html')"><img src="start.jpg"/></a>

</body>
</html>



mijn popup.html looks like this :

<html>
<head>
<title>popup pic</title>
</head>
<body onLoad="self.resizeTo(document.img.width,document.img.height+25)" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<img src="start.jpg" name="img" />
</body>
</html>



Indien ik dan begin vanaf index.html
zie ik mijn javascript als output, dus er klopt iets niet,
ook krijg ik totaal geen popup.

:eek:


:doh:

WoDkA

Legacy Member
ik kreeg die witte rand niet weg, dus daarom heb ik maar bij mij overal evenveel rand gedaan :p

en ik doe :

<img src="thumbnailpad" width="thumbnailwidth" height="thumbnailheight" onclick="openPopup('orignelefotopad',orginelefotowidth,originelefotoheight)"

en dan JS :

function openFoto(url,w,h)
{
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
w = w+20;
h = h+20;
winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+'resizable=0';
window.open(url,"", winprops)
}

dit centreert ook de foto btw ..

Smoerf

Legacy Member
Dit is (ik weet niet of ze compatibel is in alle browsers) een zelfgeschreven functie):
De plaats zal in de titel gebruikt worden (voorbeeld: Foto van mijn fiets)
De url, hoogte en breedte snap je wel denk ik. Btw, deze functie zorgt er ook voor da je pop-up altijd in het midden van je scherm staat, als je dat niet wil dan moet je dat maar aanpassen bij top en left.

Code:
function popup(plaats, url, hoogte, breedte){

fotovenster = window.open(url,"_blank"," toolbar=no,location=no,directories=no,scrollbars=y
 es,status=no,menubar=no,resizable=no,copyhistory=y
es,width="+breedte+",height="+hoogte+",top="+((screen.height)?(screen.height-hoogte)/2:100)+",left="+((screen.width)?(screen.width-breedte)/2:100)+",");
fotovenster.document.writeln("<html><head><title>" + plaats + "</title>"); 
fotovenster.document.writeln("<link rel=\"stylesheet\" type=\"text/css\" href=\"rampaffairz.css\">");
fotovenster.document.writeln("</head>"); 
fotovenster.document.writeln("<body style=\"overflow:hidden;\">");
fotovenster.document.writeln("<img src=\"" + url + "\" style=\"cursor:hand;\" onclick=\"window.close();\" vspace=\"0\" hspace=\"0\" alt=\"Click to close\" />"); 
fotovenster.document.writeln("</body></html>"); 
fotovenster.document.close() 

}

Hopelijk ben je hier iets mee

zero2one

Legacy Member
Wat lees ik op Lagoas zijn Personal CV :
Zeer goede kennis :
MS Office, Windows 9x ,2000 ,XP
HTML , CSS, CoffeeCup FTP, Dreamweaver
Adobe Photoshop 7.0, Adobe ImageReady 7.0
Visual Basic 6, Java

en dan komt hij vragen over :
Nu begint em te zagen, da er rond zijn foto nog een witte band te zien is, dus tussen de foto (bv 400*300) en het venster is er nog altyd een witte band.

hij heeft goede kennis van html/css maar kent de volgende tags niet om witte randen weg te werken:
PHP:
 topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"

geloofwaardige cv moet ik zeggen :naughty:

Lagoas

Legacy Member
Da marcheert dus nog altyd niet hé
waarsch omdagge niet weet wa ik bedoel
ik heb dus nog altyd een witte band rond mijn foto.

Khoop vanavond tyd te hebben om screenshots te tonen
zodanig dat jullie eindelijk weten op welke witte band ik het heb :D

Tot vanavond.

Smoerf

Legacy Member
En dat wit is geen deel van de prent zelf?

Btw, normaal zou het moeten werken met de code die ik hierboven gepost heb, want ik gebruik het zelf, en het werkt. (zonder boorden oid)

zero2one

Legacy Member
Lagoas zei:
Khoop vanavond tyd te hebben om screenshots te tonen
zodanig dat jullie eindelijk weten op welke witte band ik het heb :D

Ge kunt mischien beter alles on-line zetten dan kunnen we beter zien wat er misloopt
:niceone:

Lagoas

Legacy Member
Het zal voor dit weekend zijn zé gasten,
gisteren geen tijd gehad
en deze avond ben ik ook pas thuis rond 9u :(

See you...

Jellepunk

Legacy Member
voor mij werkt da perfect, tnx, dit was juist wat ik zocht
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