popUp Afbeeldingen (alle browsers)

Auteur: Addow - 03 februari 2005 - 17:03 - Gekeurd door: Dennisvb - Hits: 10427 - Aantal punten: 3.38 (8 stemmen)

Hoewel er zich al een pop-up script hier onder de andere scripts bevond, heb ik zelf een ander scriptje in elkaar gestoken, eentje dat zeker en vast geen scrollbars tevoorschijnt haalt, want dat is zeker bij Mozilla vaak een probleem.

Dit scriptje is ook zeer handig door het meegeven van enkele parameters. Dit opent onder andere perspectieven om bvb gebruikt te worden in fotoalbums (php/asp) waar foto's in verschillende folders geplaatst staan.

We zullen maar eens over gaan tot het weergeven vd code.

Code:

Plaats onderstaande code tussen <head> en </head> van je page

php code - Bekijk de code zonder highlighting - Klap code in

                <script language="JavaScript" type="text/JavaScript">
<!--
function popup(folder,bestand,b,h) {
  var loc=""+folder+"/"+bestand;
  var parameters="toolbar=no,scrollbars=no,location=no,status=no,menubar=no,resizable=yes,top=0,left=0,width="+b+",height="+h;
  foto = window.open("","pic",parameters);
  foto.moveTo((screen.availWidth-b)/2, (screen.availHeight-h)/2);
  foto.document.write("<html><head><title>:: Pic - "+bestand+" ::</title></head>");
  foto.document.write("<style>body { margin: 0px;overflow: hidden; }</style>");
  foto.document.write("<body><a href='javascript:window.close();' title='[Klik om te sluiten]'><img src='"+loc+"' border='0' height="+h+"></a></body></html>");
  foto.document.close();
}

//-->
</script>
            
<script language="JavaScript" type="text/JavaScript">
<!--
function popup(folder,bestand,b,h) {
  var loc=""+folder+"/"+bestand;
  var parameters="toolbar=no,scrollbars=no,location=no,status=no,menubar=no,resizable=yes,top=0,left=0,width="+b+",height="+h;
  foto = window.open("","pic",parameters);
  foto.moveTo((screen.availWidth-b)/2, (screen.availHeight-h)/2);
  foto.document.write("<html><head><title>:: Pic - "+bestand+" ::</title></head>");
  foto.document.write("<style>body { margin: 0px;overflow: hidden; }</style>");
  foto.document.write("<body><a href='javascript:window.close();' title='[Klik om te sluiten]'><img src='"+loc+"' border='0' height="+h+"></a></body></html>");
  foto.document.close();
}
 
//-->
</script>
 

Nu kan van eender waar het script aanroepen, dmv van onderstaande code:

De body-code (tussen <body> en </body):

php code - Bekijk de code zonder highlighting - Klap code in

                <img src="folder/th_bestand.gif" alt="thumbke" border="1" onClick="popup('folder','bestand.ext',breedte,hoogte);">

<img src="folder/th_bestand.gif" alt="thumbke" border="1" onClick="popup('folder','bestand.ext',breedte,hoogte);">

Verklarende parameterlijst:
*] folder = directory waar je image bestand zich bevindt (kan uit meerdere trappen bestaan)
*] bestand.ext = bestandsnaam inclusief extensie, bvb img_02521.jpg,ukkie.png,...
*] breedte = breedte van je fotobestand (in pixels)
*] hoogte = hoogte van je fotobestand (in pixels)

Zo, met dit scriptje hoop ik de kloof tussen de verschillende browsers weer wat kleiner gemaakt te hebben. Weliswaar zal er binnenkort nog een update doorgevoerd worden om het scriptje nog iets effectiever te maken.

Veel succes!

Download code (.txt)

Stemmen

Niet ingelogd.

Reacties

Post een reactie

Lees de reacties (6)