Er is geen CSS ondersteuning.
Om thumbnails vloeiend uit te vergroten hoef je alleen maar het onderstaande stukje css-code in de head-sectie van jouw pagina te plaatsen.
<style type="text/css">
.staties{position:absolute;white-space:nowrap}
img.pannen{vertical-align:top}
</style>
Het stukje html hieronder plaats je in de body van de pagina.
<div class="staties"> <p> <img class="pannen" alt="1" src="denaamvanjouwplaatje.jpg" width="60" height="75"> <img class="pannen" alt="2" src="denaamvanjouwplaatje.jpg" width="60" height="75"> <img class="pannen" alt="3" src="denaamvanjouwplaatje.jpg" width="60" height="75"> </p> </div>
En het stukje javascript plaats je zo laag mogelijk op de pagina in de body-sectie.
<script>
/*global window: false */
if(document.images){(function(){var i,cosin,tijd=30,snelheid=30;var eci=function(plaat){plaat=plaat||window.event;if(!eci.r.test(plaat.className))
{plaat=plaat.target||plaat.srcElement||null;}if(!plaat||!eci.r.test(plaat.className)){return;}
var e=eci,breedtehoogte=function(dim){return dim[0]*cosin+dim[1]+'px';},fixafmetingen=function(){cosin=(1-Math.cos((e.tjb[i].jump/tijd)*Math.PI))/2;plaat.style.width=breedtehoogte(e.tjb[i].w);plaat.style.height=breedtehoogte(e.tjb[i].h);if(e.tjb[i].d&&tijd>e.tjb[i].jump){++e.tjb[i].jump;e.tjb[i].timer=setTimeout(fixafmetingen,snelheid);}else if(!e.tjb[i].d&&e.tjb[i].jump>0){--e.tjb[i].jump;e.tjb[i].timer=setTimeout(fixafmetingen,snelheid);}},d=document.images,i=d.length-1;for(i;i>-1;--i){if(d[i]==plaat){break;}}
i=i+plaat.src;if(!e.tjb[i]){plaat.title='pan';e.tjb[i]={plaat:new Image(),jump:0};e.tjb[i].plaat.onload=function(){e.tjb[i].w=[e.tjb[i].plaat.width-plaat.width,plaat.width];e.tjb[i].h=[e.tjb[i].plaat.height-plaat.height,plaat.height];e(plaat);};e.tjb[i].plaat.src=plaat.src;return;}
if(e.tjb[i].timer){clearTimeout(e.tjb[i].timer);}e.tjb[i].d=!e.tjb[i].d;fixafmetingen();};eci.tjb={};eci.r=new RegExp('\\bpannen\\b');if(document.addEventListener){document.addEventListener('mouseover',eci,false);document.addEventListener('mouseout',eci,false);}
else if(document.attachEvent){document.attachEvent('onmouseover',eci);document.attachEvent('onmouseout',eci);}})();}
</script>
De procedure voor het traploos vergroten van thumbnails is valide html5 en CSS. De JSLint-validator geeft aan dat het script foutloos is.
cache 28-12-2010