De breedte/hoogte van een popup aanpassen aan een afbeelding

[bjpdekker]

Beste mensen,

ik heb een probleempje.
Ik ben bezig met een fotoboek aan het maken.
Daarin heb ik thumbs staan en wanneer op een thumb wordt gedrukt wordt de eigenlijke foto in een popupvenster geladen.

Tot zover is het nog simpel, maar nu:

Hoe kan ik de breedte en de hoogte van een popupvenster laten aanpassen aan de breedte en hoogte van de foto. Ik heb namelijk foto's in verschillende afmetingen en om ze allemaal goed te kunnen laden in een popup wordt wat lastig.

Ik maak gebruik van php, javascript en html (geen gd op de server).

Wie kan mij verder helpen.

Groetjes,

Bas

[Shedman]

Je kan met javascript de eigenschappen van de foto opvragen, misschien moet je daar eens naar gaan zoeken?

[WvdWest]

bjpdekker schreef op 17 april 2004 @ 11:42:
Beste mensen,

ik heb een probleempje.
Ik ben bezig met een fotoboek aan het maken.
Daarin heb ik thumbs staan en wanneer op een thumb wordt gedrukt wordt de eigenlijke foto in een popupvenster geladen.

Tot zover is het nog simpel, maar nu:

Hoe kan ik de breedte en de hoogte van een popupvenster laten aanpassen aan de breedte en hoogte van de foto. Ik heb namelijk foto's in verschillende afmetingen en om ze allemaal goed te kunnen laden in een popup wordt wat lastig.

Ik maak gebruik van php, javascript en html (geen gd op de server).

Wie kan mij verder helpen.

Groetjes,

Bas

Deze vraag hoor eigenlijk in W&G thuis. Zoek eens op window.open De eerste link geeft je al het antwoord.

[sjaakaq]

YHmm ja maar ik denk dat bjpdekker bedoeld dat hij de hoogte- en breedtevariant van de pop-up niet zelf hoeft in te voeren, maar dat de computer die uitleest en automatisch een pop-up van die grootte maakt.

[bjpdekker]

ja dat klopt, dat wil ik graag maar ik kom er nog steeds niet uit.
Heeft iemand een voorbeeld voor mij?

En zeg maar Bas hoor

[djluc]

http://www.php.net/getimagesize
Werkt overigens met iedere PHP install, dus ook zonder gd.

Deze vraag hoor eigenlijk in W&G thuis.

Vertel dan maar eens even hoe je met JavaScript het formaat crossbrowser kunt achterhalen

[ Voor 96% gewijzigd door djluc op 17-04-2004 12:17 ]

[WvdWest]

djluc schreef op 17 april 2004 @ 12:15:
http://www.php.net/getimagesize
Werkt overigens met iedere PHP install, dus ook zonder gd.

[...]
Vertel dan maar eens even hoe je met JavaScript het formaat crossbrowser kunt achterhalen

Zo bijv. Ik zeg niet dat het makkelijk is maar het kan wel degelijk.

[bjpdekker]

Erg bedankt!

Het laatste voorbeeld is echt wat ik bedoel.

Nogmaals erg bedankt!

[crisp]

djluc schreef op 17 april 2004 @ 12:15:
[...]
Vertel dan maar eens even hoe je met JavaScript het formaat crossbrowser kunt achterhalen

Dat werkt in principe in elke browser gelijk: als het plaatje eenmaal clientside ingeladen is kan je de width en height property van de image uitlezen. Je zal dan dus altijd met een onload event handler moeten werken; de resizing doe je dus achteraf, tenzij je een preloader gebruikt, maar dan krijg je dus een vertraging tussen het preloaden en het openen van je window.

[djluc]

crisp schreef op 17 april 2004 @ 13:41:[...]Dat werkt in principe in elke browser gelijk: als het plaatje eenmaal clientside ingeladen is[...]krijg je dus een vertraging tussen het preloaden en het openen van je window.

Dan moet je toch eerst het plaatje weergeven, waardoor je dus eerst alle afbeeldingen volledig op moet halen? Dan is het hele nut van die popup toch weg? De TS wil thumbs weergeven, daardoor gebruik je minder bandbreedte en worden de volledige afbeeldingen alleen maar geladen als het nodig is.

Het leek me wel vanzelfsprekend dat dit dus niet moest gebeuren aan de hand van een clientside afbeelding.

[ Voor 9% gewijzigd door djluc op 17-04-2004 14:15 ]

[faabman]

djluc schreef op 17 april 2004 @ 14:15:
Dan moet je toch eerst het plaatje weergeven, waardoor je dus eerst alle afbeeldingen volledig op moet halen? Dan is het hele nut van die popup toch weg? De TS wil thumbs weergeven, daardoor gebruik je minder bandbreedte en worden de volledige afbeeldingen alleen maar geladen als het nodig is.

Het leek me wel vanzelfsprekend dat dit dus niet moest gebeuren aan de hand van een clientside afbeelding.

nee, je hoeft niet alle afbeeldingen volledig op te halen, want je voert de javascriptfunctie alleen uit bij de afbeelding die in de popup is geopend...

[djluc]

faabman schreef op 17 april 2004 @ 14:20:[...]nee, je hoeft niet alle afbeeldingen volledig op te halen, want je voert de javascriptfunctie alleen uit bij de afbeelding die in de popup is geopend...

Je wilt het formaat van de popup gaan veranderen nadat deze geopend is? Kan dat, en vooral: mag dat volgens de specs?

[Soultaker]

Dat kan en mag, maar in Mozilla kun je dat uitzetten en bezoekers doen dat natuurlijk ook.

[djluc]

Is het misschien een idee om helemaal van die popup af te stappen en een divje te gebruiken? Je maakt dus gewoon een divje die je over de pagina heen legt waarin je die afbeelding laat zien. Dan kun je het formaat rustig aanpassen aan de hand van de gegevens zoals je die volgens Crisp kunt verkrijgen.

[crisp]

djluc schreef op 17 april 2004 @ 14:15:
[...]
Dan moet je toch eerst het plaatje weergeven, waardoor je dus eerst alle afbeeldingen volledig op moet halen? Dan is het hele nut van die popup toch weg? De TS wil thumbs weergeven, daardoor gebruik je minder bandbreedte en worden de volledige afbeeldingen alleen maar geladen als het nodig is.

Het leek me wel vanzelfsprekend dat dit dus niet moest gebeuren aan de hand van een clientside afbeelding.

Nee, je hoeft het volledige plaatje niet eerst volledig weer te geven; preloaden kan onzichtbaar en on demand, maar je zit dan met een vertraging. Enige voordeel is dan wel dat je de popup meteen op de juiste grootte kan openen, en anders moet je dus de popup openen en na het laden van het plaatje resizen.
Dat kan en mag dus volgens de specs, maar zoals Soultaker terecht opmerkt kan je dat in sommige browsers uitschakelen. Het risico dat popups zelf al helemaal geblokkeerd worden is echter vele malen groter. Maar goed, dat is een beslissing van de gebruiker, dus die moet dan ook niet huilen
Ik probeer zelf toch zo veel mogelijk serverside al de afmetingen te bepalen, of geef die toch met de hand mee in een array of iets dergelijks - iets meer werk bij het toevoegen van plaatjes, maar minder gedoe met javascript e.d.

[ Voor 8% gewijzigd door crisp op 17-04-2004 14:33 ]

[Soultaker]

De oplossing van sitepoint heeft in deze vorm ook als probleem dat 'ie JavaScript en HTML integreert, wat niet echt mooi is, en bovendien afhankelijk is van JavaScript om ueberhaupt te werken.

Ik zou het liefst uitgaan van een 'schone' HTML pagina:

HTML:

<html>
<head><title>Gallery</title></head>
<body>
<a name="popup" href="Image1.gif" target="_new">Thumbnail 1</a>
<a name="popup" href="Image2.gif" target="_new">Thumbnail 2</a>
<a name="popup" href="Image3.gif" target="_new">Thumbnail 3</a>
</body>
<script language="JavaScript" src="popup.js" type="text/javascript"></script>
</html>

En dan met behulp van JavaScript de popup-code toevoegen:

JavaScript:

var anchors = document.getElementsByName('popup');
for(var n = 0; n < anchors.length; ++n)
{
    anchors[n].onclick=function() {
        var img = new Image;
        img.onload = function() {
            var win = window.open('', '', 'width='+this.width+',height='+this.height);
            win.document.open('text/html', 'replace');
            win.document.writeln('<html><body style="margin:0;padding:0">'+
                '[img]"'+this.src+'"[/img]</body></html>' );
            win.document.close();
        }
        img.src = this.href;
        return false;
    }
}

Wat het script doet, is aan elke link een onclick-handler toevoegen. Die handler maakt het plaatje dat in de popup moet komen aan en geeft het een onload-handler die een venster opent zodra het plaatje geladen is.

Het voordeel hiervan is dat de popup in één keer met de goede grootte geopend wordt (wat visueel wat mooier is), het werkt ook als de bezoekers het resizen van vensters verboden heeft, en uiteraard werkt het zonder JavaScript ondersteuning ook, al zijn de vensters dan niet op maat.

Een belangrijk nadeel is dat er geen venster zichtbaar is terwijl het plaatje geladen wordt. Als dat lang duurt (langer dan, zeg, een seconde) dan is het voor de gebruiker waarschijnlijk vervelend, omdat 'ie niet kan zien dat er achter de schermen wat gebeurt.

edit:
De code in actie: Gallery.

[ Voor 73% gewijzigd door Soultaker op 17-04-2004 15:00 ]

[whoami]

client-side stuff in w&g, neit in p&w
-> w&g

[djluc]

whoami schreef op 17 april 2004 @ 15:20:
client-side stuff in w&g, neit in p&w
-> w&g

offtopic:
Het kan op verschillende manier: serverside met PHP en cliëntside met JS. Een move naar 13,5 lijkt me beter. Verder is neit geen Nederlands woord

[ontopic]Is het idee van een divje waarin je de image plaatst nou zo heel gek, of ziet niemand dat zitten? Ik zie namelijk wel voordelen als geen pop-up killer problemen.[/ontopic]

[ Voor 13% gewijzigd door djluc op 17-04-2004 17:29 ]

[Soultaker]

Het is een keuze, maar het is dan jammer dat je plaatje over het thumbnail venster heengaat. Als je plaatjes een redelijke maximumgrootte hebben (iets als 600x450 bijvoorbeeld) dan kan ik me nog wel voorstellen dat je een deel van de pagina inruimt voor de foto met daar onder of naast de thumbnails. Je hoeft dan tenminste niet eerst de foto weg te klikken voor je een nieuwe thumbnail kan selecteren.

Bij foto's met een uiteenlopende grootte lijkt het me bovendien nogal irritant om het browservenster steeds te moeten resizen.

[djluc]

Als je fullscreen werkt lijkt me me wel handig omdat je dan toch vrijwel alle beschikbare schermruimte kunt gebruiken.

[mmniet]

dit werkt niet op een MAC, weet iemand daar een oplossing voor?