PIP - Inleiding
Perfecte crossbrowser Image Popups
Van thumbnail naar the big pic
Je kent ze wel: thumbnails waar je op kunt klikken waarna een popup verschijnt waar de grote foto precies in past. De popup is gecentreerd en met een klik op de grote foto verdwijnt hij weer. Hoe krijg je dat in alle browsers werkend? Wat moet er gebeuren als JavaScript uit staat? En hoe krijg je het voor elkaar dat je niet zelf de maten van het grote plaatje mee hoeft te geven?
Als JavaScript uit staat
In dat geval moet de bezoeker nog steeds op de thumb kunnen klikken! De enige manier om dat te bereiken is de volgende:
Code (php)
1
<a href="plaatje.jpg"><img src="plaatje_tn.jpg"></a>
Een ouderwetsche hyperlink met een plaatje erin, dus. Er zijn nog altijd mensen die JavaScript uit hebben staan en die krijgen na een klik op het kleine plaatje gewoon het grote te zien. Met de backbutton kunnen ze terug, allemaal keurig zoals het hoort. Jij blij, bezoeker blij, W3C blij (p.s. natuurlijk niet vergeten een alt en een title tag op te geven voor het plaatje!)
JavaScript Popup
Als JavaScript wél aan staat (9 van de 10 keer) kunnen we gebruik maken van de functie window.open. De syntax staat hieronder:
Code (php)
1
window.open(URL, name [, features])
Bij 'URL' geven we een lege string op zodat we een blanco venster krijgen. De bedoeling is namelijk dat we de inhoud er straks met JavaScript in gaan schrijven. Bij 'name' geven we voorlopig ook een lege string op, want we schrijven de titel er ook zelf in, later.
Bij 'features' wordt het interessant. Daar kun je een aantal kenmerken opgeven. Voor een overzicht, zie DevGuru. Wat ik wil voor mijn popup zou er ongeveer zo uit zien:
Code (php)
1
window.open('', '', 'toolbar=no,scrollbars=no,left=300,top=300,width=300,height=300');
Bij left, top, width en height heb ik voorlopig 300 ingevuld, maar die worden later natuurlijk aangepast, afhankelijk van de JPG die erin komt te staan.