Met dit script worden foto's weergegeven, de als de foto's groter zijn dan een bepaalde waarde worden ze verkleind, maar de hoogte/breedte verhouding blijft gelijk!
Te grote foto's worden niet weergegeven om de site niet uit te laten rekken.
Zoals misschien uit het script op te maken is, is de hoogte maximaal 100, dit is aan te passen, als deze bijvoorbeeld 90 is, dan blijft de hoogte 90, hde afbeelding wordt dus niet uitgerekt.
Kleine wijziging: er zit nu een popupfuntie bij, de maten van de popup zijn afhankelijk van de grootte en breedte van het plaatje.
<script language="javascript">
function popup(page,title,width,height) {
var winl = (screen.width - width) / 2;
var wint = (screen.height - height) / 2;
window.open(''+page,''+title,'width='+width+',height='+height+',top='+wint+',left='+winl+',resizable=no,scrollbars=no,toolbar=no');
}
</script>
<?php
$img = array('afbeelding1.jpeg', 'afbeelding2.gif', 'afbeelding3.jpg');//alle plaatjes in een array($img), mogen zoveel toegevoegd worden als men wil
foreach($img as $key => $value)//lusje om alle plaatjes te laten zien
{
$size = getimagesize ($value);//maten van afbeelding meten
$verhouding = $size[0]/$size[1];//verhouding tussen de hoogte en breedte uitrekenen
if($size[0] >= 800)//als het plaatje zo lang is dat het gevolgen heeft voor de site
{
echo 'Je plaatje is te lang, dit heeft gevolgen voor de site.';
}
else//anders, ga door met de afmetingen bepalen
{
if($size[1] >= 100){ $size[1] = 100; }//als de hoogte groter is dan 100, dan maakt de hoogte 100
$hoogte = 'height="'.$size[1].'"';
$breedte = 'width="'.$size[1]*$verhouding.'"';
echo "<a href='#' onClick=\"popup('".$value."','".$value."','".$size[0]."','".$size[1]."');\"><img src=".$value." ".$hoogte." ".$breedte." border='0'></a><br>";//afbeelding laten zien met popup
}
}
?>
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
