Vaak komen we de volgende situatie tegen. Een plaatje is te groot om op onze website in een pagina te tonen. Dus we tonen een kleinere versie. We willen echter wel de gebruiker de mogelijkheid geven om het plaatje in zijn originele grootte te bekijken. Dit willen we doen door als de gebruiker op het verkleinde plaatje klikt een nieuw window te openen met daarin het plaatje op ware grootte.
Maar hoe groot moet het window zijn zodat alle plaatjes passen? Het liefst hebben we altijd een 'passend' window, precies groot genoeg. In dit blog laat ik een mogelijkheid zien om dit te doen.
Dit is de 'normale' code die we gebruiken om een plaatje te laten zien in een nieuw window als we op het verkleinde plaatje klikken.
Code:
<A onclick="window.open('plaatje.jpg', null, 'height=200,width=400,status=yes,toolbar=no,menubar=no,location=no');return false;" href="plaatje.jpg"><IMG src="plaatje.jpg"></A>
In plaats van deze code gaan we meer gebruik maken van javascript.
Code:
function makeWindow(img)
{
ht = picfile.height + 20;
wd = picfile.width + 20;
var args= "height=" + ht + ",innerHeight=" + ht;
args += ",width=" + wd + ",innerWidth=" + wd;
if (window.screen)
{
var avht = screen.availHeight;
var avwd = screen.availWidth;
var xcen = (avwd - wd) / 2;
var ycen = (avht - ht) / 2;
args += ",left=" + xcen + ",screenX=" + xcen;
args += ",top=" + ycen + ",screenY=" + ycen + ",resizable=yes";
}
return window.open(img, '', args);
}
function fileCheck(img)
{
if( (picfile.width!=0) && (picfile.height!=0) )
{
makeWindow(img);
}
}
function viewPic(img)
{
picfile = new Image();
picfile.src =(img);
fileCheck(img);
}
Je ziet dat we drie nieuwe functies definiëren. We behandelen ze van beneden naar boven.
viewPic
Deze functie krijgt als parameter de naam (+ pad) van het te tonen plaatje mee. Hij maakt een nieuwe instance van een Image-object en vult de source hiervan met de parameter. Straks gaan we gebruik maken van deze instance om wat gegevens over het plaatje te lezen.
Als laatste roepen we de volgende functie, fileCheck, aan, we geven dezelfde parameter mee.
fileCheck
We controleren de breedte en hoogte van de instance die we in viewPic aangemaakt hebben. Als deze beiden groter dan 0 zijn gaan we door naar de laatste functie, makeWindow. Ook deze krijgt dezelfde parameter mee. Als minimaal één van beide waarden (breedte of hoogte) 0 is valt er niets te tonen en zijn we klaar.
makeWindow
Dit is de functie waarin het daadwerkelijk gebeurt. Eerst slaan we de hoogte en breedte op in variabelen. Deze gebruiken we om de parameters (arguments) van het te openen window op te stellen.
Met de code 'if (window.screen)' kijken we of we de grootte van het scherm op kunnen vragen. Eigenlijk of we deze functie kunnen benaderen.
Indien dit het geval is slaan we ook hiervan de maximale schermbreedte en -hoogte op. Let op, het betreft hier daadwerkelijk scherm-breedte en -hoogte, niet window-breedte en -hoogte!
Nu kunnen we berekenen waar we het window moeten positioneren om het midden in het scherm te krijgen als het zo groot is dat ons plaatje er precies in past. Ook deze gegevens geven we mee aan de parameters (arguments) van het nieuw te openen window.
Last but not least openen we het window waar het uiteindelijk allemaal om begonnen was en voila, een net gesized window!
De volgende code is onze 'nieuwe' code die de code waarmee we begonnen vervangt.
Code:
<A" onclick="viewPic('plaatje.jpg');return false;" href="plaatje.jpg"><IMG src="plaatje.jpg"></A>
Het 'return false' dat we uitvoeren na het aanroepen van de viewPic functie zorgt er voor dat na het uitvoeren van de onclick de link niet verder wordt uitgevoerd. Haal dit stukje weg en probeer het maar.
Happy programing!