Om de image-flip op jouw pagina te plaatsen moet je in de body sectie de onderstaande html-code en het javascript plaatsen. De div plaats je waar het image-flip-effect moet verschijnen, en het javascript plaats je zo laag als mogelijk. Voer in het script zoveel plaatjes in als jou goed-dunkt en doe dat door de array "flip_images" uit te breiden (voor wat betreft de nummering). De variabele flip_vierkant bepaalt de grootte van het kader waarin de plaatjes verschijnen. Het is handig als je de plaatjes dezelfde grootte maakt. Probeer de plaatjes zo "vierkant" als mogelijk te houden. Het effect is het beste als de plaatjes vierkant zijn.
<div id="flip_flop_div"></div>
<script>
/*global window: false */
var flip_vierkant = 110;
var flip_images = [];
flip_images[0] = "image/flip-1.jpg";
flip_images[1] = "image/flip-2.jpg";
flip_images[2] = "image/flip-3.jpg";
var stop = 0;
var lengte_image_array = flip_images.length;
var de_css_code = "#flip_image{position:absolute;border:2px solid #808080;line-height:" + flip_vierkant + "px;text-align:center;height:" + flip_vierkant + "px;width:" + flip_vierkant + "px;}.spacer{height:" + (flip_vierkant + 5) + "px}",
stijl_element = document.createElement("style");
stijl_element.type = "text/css";
if (stijl_element.styleSheet) {
stijl_element.styleSheet.cssText = de_css_code;
} else {
stijl_element.appendChild(document.createTextNode(de_css_code));
}
document.getElementsByTagName("head")[0].appendChild(stijl_element);
var tekstregel = '<p id="flip_image"><img src="' + flip_images[lengte_image_array - 1] + '" width="' + flip_vierkant + '" height="' + flip_vierkant + '" alt="flip-flop" id="flop_flip" /></p><p class="spacer"></p>';
document.getElementById("flip_flop_div").innerHTML = tekstregel;
var teller = -1;
var timer_flip_image,
flip_image_timer,
flip_verloop_pixels = 2,
flip_verloop_in_milliseconden = 2,
pauze_tussen_flip_flop = 3000,
flip_of_flop = "flip";
function flip_flop() {
if (flip_of_flop == "flip") {
var welke_flip_of_flop = document.getElementById("flop_flip").getAttribute("width");
welke_flip_of_flop = welke_flip_of_flop - flip_verloop_pixels;
document.getElementById("flop_flip").setAttribute("width", welke_flip_of_flop);
if (welke_flip_of_flop < 2) {
teller++;
if (teller > lengte_image_array - 1) {
teller = 0;
}
document.getElementById("flop_flip").setAttribute("src", flip_images[teller]);
flip_verloop_pixels = -flip_verloop_pixels;
}
if (welke_flip_of_flop == flip_vierkant) {
flip_of_flop = "flop";
flip_verloop_pixels = -flip_verloop_pixels;
flip_image_timer = setTimeout(function() {
flip_flop();
},
pauze_tussen_flip_flop);
} else {
timer_flip_image = setTimeout(function() {
flip_flop();
},
flip_verloop_in_milliseconden);
}
} else {
var flop_hoogte = document.getElementById("flop_flip").getAttribute("height");
flop_hoogte = flop_hoogte - flip_verloop_pixels;
document.getElementById("flop_flip").setAttribute("height", flop_hoogte);
if (flop_hoogte < 20) {
teller++;
if (teller > lengte_image_array - 1) {
teller = 0;
}
document.getElementById("flop_flip").setAttribute("src", flip_images[teller]);
flip_verloop_pixels = -flip_verloop_pixels;
}
if (flop_hoogte == flip_vierkant) {
flip_of_flop = "flip";
flip_verloop_pixels = -flip_verloop_pixels;
flip_image_timer = setTimeout(function() {
flip_flop();
},
pauze_tussen_flip_flop);
} else {
timer_flip_image = setTimeout(function() {
flip_flop();
},
flip_verloop_in_milliseconden);
}
}
}
window.onload = flip_flop;
</script>