Waar je de transition op de pagina wilt hebben voeg je de html-code <div id="div_zoom_transition"></div> in. Plaats vervolgens het onderstaande javascript zo laag als mogelijk in de body-sectie van jouw pagina. Volgens de strenge normen van JSLint is het script foutloos. De zoom-procedure is geheel cross browser en valideert op elk mogelijke manier.
<script>
var transition_image = [];
transition_image[0] = "http://static.dns5.nl/zoom1.jpg";
transition_image[1] = "http://static.dns5.nl/zoom2.jpg";
transition_image[2] = "http://static.dns5.nl/zoom3.jpg";
transition_image[3] = "http://static.dns5.nl/zoom4.jpg";
var border_kleur = "ccc";
var dikte_border = 16;
var hoogte = 240;
var breedte = 200;
var grow_margin_top = 0;
var grow_margin_links = 0;
var hoogte_met = 0;
var maximum_vergroting = 420;
var milli_seconde_vertraging = 5000;
var innervar;
var zoom_id;
var transition_timer;
var grow_timer;
var transitie_stapje = 30;
var grow_css = "#div_zoom_transition{border:" + dikte_border + "px outset #" + border_kleur + ";width:" + breedte + "px;height:" + hoogte + "px;overflow:hidden}",
transition_element = document.createElement("style");
transition_element.type = "text/css";
if (transition_element.styleSheet) {
transition_element.styleSheet.cssText = grow_css;
} else {
transition_element.appendChild(document.createTextNode(grow_css));
}
document.getElementsByTagName("head")[0].appendChild(transition_element);
function zoom_transition() {
zoom_id = document.getElementById("plaatjesid");
if (hoogte < maximum_vergroting) {
zoom_id.style.width = breedte + "px";
zoom_id.style.height = hoogte + "px";
zoom_id.style.marginLeft = (grow_margin_links) + "px";
zoom_id.style.marginTop = (grow_margin_top) + "px";
breedte = breedte + 2;
hoogte = hoogte + 2;
grow_margin_top = grow_margin_top - 2;
grow_margin_links = grow_margin_links - 1;
grow_timer = setTimeout(function() {
zoom_transition();
},
transitie_stapje);
}
}
function zoom_grow_transition() {
if (document.getElementById) {
if (hoogte_met >= transition_image.length) {
hoogte_met = 0;
}
innervar = document.getElementById("div_zoom_transition");
innervar.innerHTML = '<img id="plaatjesid" src="' + transition_image[hoogte_met] + '" alt="plaatje" />';
hoogte = 260;
breedte = 200;
grow_margin_top = 0;
grow_margin_links = 0;
zoom_transition();
hoogte_met++;
transition_timer = setTimeout(function() {
zoom_grow_transition();
},
milli_seconde_vertraging);
}
}
onload = zoom_grow_transition;
</script>