Je kan in het wipe center gebeuren verschillende parameters instellen. In het script staat de variabele transition_img_directory. Vul hier in de directory waar jouw plaatjes staan. Als voorbeeld: "jouw_plaatjes/". Staan de plaatjes in dezelfde directory vul dan niets in. De maximale afmetingen van het "venster" alsmede de maximale afmeting van de afbeelding kan je instellen. De namen van de variabelen spreken voor zich. Waar de transitie op de pagina moet verschijnen, voeg je de html-code: <div id="transitie_container"></div> in. Het onderstaande javascript plaats je zo laag als mogelijk in de body-sectie van de pagina. Het script is foutloos volgens de strenge JSLint norm en de rest van de pagina valideert op alle mogelijke manieren.
<script>
/*global window: false */
var transition_img_array = [
"transition-wipe-0.jpg",
"transition-wipe-1.jpg",
"transition-wipe-2.jpg",
"transition-wipe-3.jpg"
];
var transition_img_directory = '';
var kader_breedte = 200;
var kader_hoogte = 200;
var maximum_breedte_afbeelding = 200;
var wisselen_in_seconden = 3;
var transition_start_plaatje = 0;
var transition_stapjes = 50;
var fix_scherm = 400;
var transitie_tijd = 32;
var wipe_center_plaatjes = [];
var i,
temp_wipe,
temp_wipe_twee,
als_resultaat,
type_twee,
optie_twee,
tijd_variabele_,
tijd_variabele_2,
tijd_variabele_3,
tijd_variabele_4,
trans_wipe = 50,
centreer_breedte,
centreer_hoogte,
de_procenten,
centreerbreed,
centreerhoog,
stapjebreed,
voeg_code_toe,
stapje_hoogte;
var ie = (document.all);
var plaatje_eerste = "plaatje_eerste";
var plaatje_tweede = "plaatje_tweede";
var plaatje_breedte;
var plaatje_hoogte;
var centreerlinks = 0;
var centreertop = 0;
function setup_functies() {
for (i = 0; i < wipe_center_plaatjes.length; i++) {
type_twee = 'wipe(center)';
optie_twee = type_twee.split('(');
wipe_center_plaatjes[i].trans = optie_twee[0] + "(0, '" + optie_twee[1] + "');";
optie_twee = type_twee.split('(');
wipe_center_plaatjes[i].time = wisselen_in_seconden * 1000;
wipe_center_plaatjes[i].title = '';
}
}
function centreer_image(obj) {
centreer_breedte = parseFloat(wipe_center_plaatjes[transition_start_plaatje].centreer_plaatje.width);
centreer_hoogte = parseFloat(wipe_center_plaatjes[transition_start_plaatje].centreer_plaatje.height);
if (centreer_breedte > maximum_breedte_afbeelding) {
de_procenten = centreer_breedte / maximum_breedte_afbeelding;
centreer_breedte = Math.floor(centreer_breedte / de_procenten);
centreer_hoogte = Math.floor(centreer_hoogte / de_procenten);
}
centreerlinks = (kader_breedte - centreer_breedte) / 2;
centreertop = (kader_hoogte - centreer_hoogte) / 2;
document.getElementById(obj).style.left = centreerlinks + 'px';
document.getElementById(obj).style.top = centreertop + 'px';
document.getElementById(obj).width = centreer_breedte;
document.getElementById(obj).height = centreer_hoogte;
}
function stel_opacity_in(object, hetlevel) {
if (ie) {
document.getElementById(object).style.filter = "alpha(opacity=" + hetlevel + ")";
} else {
if (hetlevel == 100) {
hetlevel = 99.999;
}
document.getElementById(object).style.MozOpacity = hetlevel / 100;
document.getElementById(object).style.KHTMLOpacity = hetlevel / 100;
document.getElementById(object).style.opacity = hetlevel / 100;
}
}
function init_transitie() {
document.getElementById('wipe_transition').innerHTML = '<img id="plaatje_eerste" class="plaatje_eerste"' + ' style="top: 0px; left: 0px; overflow:hidden; position:absolute;">' + '<img id="plaatje_tweede" class="plaatje_eerste"' + ' style="top: 0px; left: 0px; overflow:hidden; position:absolute;">';
stel_opacity_in('plaatje_eerste', 0);
stel_opacity_in('plaatje_tweede', 0);
document.getElementById('plaatje_tweede').src = wipe_center_plaatjes[transition_start_plaatje].centreer_plaatje.src;
document.getElementById('plaatje_tweede').width = wipe_center_plaatjes[transition_start_plaatje].centreer_plaatje.width;
document.getElementById('plaatje_tweede').height = wipe_center_plaatjes[transition_start_plaatje].centreer_plaatje.height;
document.getElementById('plaatje_tweede').style.left = 0 + 'px';
document.getElementById('plaatje_tweede').style.top = 0 + 'px';
centreer_image('plaatje_tweede');
setTimeout(wipe_center_plaatjes[transition_start_plaatje].trans, 0);
}
function zet_transition_klaar() {
for (i = 0; i < transition_img_array.length; i++) {
temp_wipe = transition_img_array[i].split('"');
als_resultaat = transition_img_directory + temp_wipe[0];
if (typeof(temp_wipe[1]) != 'string') {
temp_wipe[1] = '';
temp_wipe_twee = temp_wipe[1];
temp_wipe_twee = temp_wipe_twee.replace(/<trans[^>]*>/gi, "");
temp_wipe_twee = temp_wipe_twee.replace(/<title[^>]*>/gi, "");
temp_wipe_twee = temp_wipe_twee.replace(/<time[^>]*>/gi, "");
}
wipe_center_plaatjes[i] = {
centreer_plaatje: new Image(),
description: temp_wipe[1],
caption: temp_wipe_twee,
trans: '',
time: '',
title: ''
};
wipe_center_plaatjes[i].centreer_plaatje.src = als_resultaat;
}
setup_functies();
init_transitie();
}
function verander_afbeelding() {
var wipe_center_plaatjes_length = wipe_center_plaatjes.length;
var milliseconds = wipe_center_plaatjes[transition_start_plaatje].time;
document.getElementById('plaatje_eerste').src = wipe_center_plaatjes[transition_start_plaatje].centreer_plaatje.src;
document.getElementById('plaatje_eerste').width = wipe_center_plaatjes[transition_start_plaatje].centreer_plaatje.width;
document.getElementById('plaatje_eerste').height = wipe_center_plaatjes[transition_start_plaatje].centreer_plaatje.height;
document.getElementById('plaatje_eerste').style.left = 0 + 'px';
document.getElementById('plaatje_eerste').style.top = 0 + 'px';
centreer_image('plaatje_eerste');
tijd_variabele_2 = setTimeout(function() {
stel_opacity_in('plaatje_eerste', 100);
},
trans_wipe);
tijd_variabele_3 = setTimeout(function() {
stel_opacity_in('plaatje_tweede', 0);
},
trans_wipe);
transition_start_plaatje++;
if (transition_start_plaatje == wipe_center_plaatjes_length) {
transition_start_plaatje = 0;
}
setTimeout("document.getElementById('plaatje_tweede').src = wipe_center_plaatjes[" + transition_start_plaatje + "].centreer_plaatje.src;", fix_scherm);
tijd_variabele_4 = setTimeout(function() {
centreer_image("plaatje_tweede");
},
(fix_scherm + 50));
setTimeout(wipe_center_plaatjes[transition_start_plaatje].trans, milliseconds);
}
function wipe(hoeveel, is_van) {
plaatje_breedte = document.getElementById('plaatje_tweede').width;
plaatje_hoogte = document.getElementById('plaatje_tweede').height;
stapjebreed = plaatje_breedte / transition_stapjes * hoeveel;
stapje_hoogte = plaatje_hoogte / transition_stapjes * hoeveel;
centreerbreed = plaatje_breedte / 2;
centreerhoog = plaatje_hoogte / 2;
stapjebreed = centreerbreed / transition_stapjes * hoeveel;
stapje_hoogte = centreerhoog / transition_stapjes * hoeveel;
document.getElementById('plaatje_tweede').style.clip = 'rect(' + Math.round(centreerhoog - stapje_hoogte) + 'px, ' + Math.round(centreerbreed + stapjebreed) + 'px, ' + Math.round(centreerhoog + stapje_hoogte) + 'px, ' + Math.round(centreerbreed - stapjebreed) + 'px)';
if (hoeveel == 1) {
stel_opacity_in('plaatje_tweede', 100);
}
hoeveel++;
if (hoeveel < transition_stapjes) {
window.setTimeout("wipe(" + hoeveel + ", '" + is_van + "');", transitie_tijd);
} else {
document.getElementById('plaatje_tweede').style.clip = 'rect(auto, auto, auto, auto)';
tijd_variabele_ = setTimeout(function() {
verander_afbeelding();
},
transitie_tijd);
}
}
var transitie_regel = '<div id="wipe_transition" class="wipe_transition"' + ' style="width: ' + kader_breedte + 'px; height: ' + kader_hoogte + 'px; overflow: hidden; position: absolute;">' + '</div><div style="height:' + kader_hoogte + 'px;"</div>';
document.getElementById("transitie_container").innerHTML = transitie_regel;
voeg_code_toe = document.getElementById("wipe_transition");
voeg_code_toe.style.border = '2px solid #808080';
window.onload = zet_transition_klaar;
</script>