KOMPOOS.NL
blinds transition - cross browser
sitemap
voorbeeld blinds transition procedure
uitleg blinds transition
Plaats de stylesheet in de head-sectie van de pagina, de html-code en het script in de body-sectie, waarbij het script zo laag als mogelijk op de pagina geplaatst moet worden. Vul bij new show_blinds (onderaan het script) de adressen van de afbeeldingen in en bij function laad_blinds_plaatjes de url van het eerste plaatje. Het geheel valideert op html5 en het script is volgens de JSLint-norm foutloos.
stylesheet voor de transition
<style type="text/css">
#blinds_navigatie a{
padding:10px}
#blinds_container{
position:relative;
width:340px;
height:226px;
margin-bottom:80px}
#blinds_transition{
position:absolute;
width:340px;
height:226px;
margin:20px}
#blinds_navigatie{
position:absolute;
bottom:-45px;
left:10px}
</style>
javascript voor de blinds transition procedure
<script>
/*global window: false */
/*global alert: false */
var de_blinds_transition;
var snelheid_transition = 120,
i,
e,
e2,
w,
h,
_blinds,
x_i,
y_i,
j,
_blinds2;
var show_blinds = function() {
this.initialize.apply(this, arguments);
};
show_blinds.prototype = {
achtergrondkader: 'transparent',
lamel_breedte: 0.05,
_blinds_height_prc: 1,
_blinds_width: 0,
_blinds_height: 0,
transition_element_id: 'blinds_transition',
transition_element: null,
transition__element: null,
plaatjes_element: null,
het_volgende_plaatje: null,
vorige_id: 'vorige',
volgende_id: 'volgende',
image_list: [],
transition_function: 'draai_de_blinds',
image_transition: function(id) {
return this.transition_function + '(\'' + id + '\')';
},
welke_blind: function(i, j) {
return Math.log(Math.abs(i)) / Math.log(10) * 400 + j * 50;
},
initialize: function(images, options) {
this.image_list = images;
if (options && options.tiles_x) {
this.lamel_breedte = 1 / options.tiles_x + 'px';
}
if (options && options.tiles_y) {
this._blinds_height_prc = 1 / options.tiles_y + 'px';
}
if (options && options.transition) {
this.transition_function = options.transition;
}
if (options && options.welke_blind) {
this.welke_blind = options.welke_blind;
}
if (options && options.volgende_id) {
this.volgende_id = options.volgende_id;
}
if (options && options.vorige_id) {
this.vorige_id = options.vorige_id;
}
this.ophogen = 0;
try {
this.transition_element = document.getElementById(this.transition_element_id);
} catch(e) {
alert('er is geen element');
}
if (document.getElementById(this.volgende_id)) {
document.getElementById(this.volgende_id).onclick = function() {
return de_blinds_transition.next();
};
}
if (document.getElementById(this.vorige_id)) {
document.getElementById(this.vorige_id).onclick = function() {
return de_blinds_transition.previous();
};
}
try {
if (this.transition__element) {
this.image_emelent = document.getElementById(this.transition__element);
} else {
for (i = 0; i < this.transition_element.childNodes.length; i++) {
if (this.transition_element.childNodes[i].tagName && this.transition_element.childNodes[i].tagName.toUpperCase() == 'IMG') {
this.plaatjes_element = this.transition_element.childNodes[i];
}
}
}
} catch(e2) {
alert('geen plaatjes');
}
w = this.transition_element.offsetWidth;
h = this.transition_element.offsetHeight;
this.transition_element.style.overflow = 'hidden';
this._blinds_width = w * this.lamel_breedte;
this._blinds_height = w * this._blinds_height_prc;
},
next: function() {
this.ophogen++;
if (this.ophogen >= this.image_list.length) {
this.ophogen = 0;
}
this.wissel_blinds_plaatje(this.image_list[this.ophogen]);
return false;
},
previous: function() {
this.ophogen--;
if (this.ophogen < 0) {
this.ophogen = this.image_list.length - 1;
}
this.wissel_blinds_plaatje(this.image_list[this.ophogen]);
return false;
},
wissel_blinds_plaatje: function(new_src) {
this.het_volgende_plaatje = new Image();
this.het_volgende_plaatje.src = new_src;
var self = this;
setTimeout(function() {
self.setup_blinds_transition(new_src);
},
1);
},
setup_blinds_transition: function(new_src) {
if (!this.het_volgende_plaatje.complete || (typeof this.het_volgende_plaatje.naturalWidth != "undefined" && this.het_volgende_plaatje.naturalWidth === 0)) {
var self = this;
setTimeout(function() {
self.setup_blinds_transition(new_src);
},
1);
return;
}
x_i = 1 / this.lamel_breedte;
y_i = 1 / this._blinds_height_prc;
for (i = 0; i < x_i; i++) {
for (j = 0; j < y_i; j++) {
if (! (_blinds = document.getElementById('lamel__blinds_' + i + '_' + j))) {
_blinds = document.createElement('div');
}
_blinds2 = document.createElement('div');
_blinds.innerHTML = '';
_blinds.style.display = 'block';
_blinds.style.width = this._blinds_width + 'px';
_blinds.style.height = this._blinds_height + 'px';
_blinds.style.mozOpacity = 1;
_blinds.style.textAlign = 'center';
_blinds.style.zIndex = 100;
_blinds.style.display = 'block';
_blinds2.style.width = this._blinds_width + 'px';
_blinds2.style.height = this._blinds_height + 'px';
_blinds2.style.mozOpacity = 1;
_blinds.style.zIndex = 101;
_blinds2.style.background = this.achtergrondkader + ' url(' + this.plaatjes_element.src + ') -' + (i * this._blinds_width) + 'px -' + (j * this._blinds_height) + 'px no-repeat';
_blinds.style.position = 'absolute';
_blinds.style.left = this.plaatjes_element.offsetLeft + i * this._blinds_width + 'px';
_blinds2.style.margin = 'auto';
_blinds.style.top = this.plaatjes_element.offsetTop + j * this._blinds_height;
_blinds.id = 'lamel__blinds_' + i + '_' + j;
_blinds2.id = 'lamel_i__blinds_' + i + '_' + j;
_blinds.appendChild(_blinds2);
if (!document.getElementById('lamel__blinds_' + i + '_' + j)) {
this.transition_element.appendChild(_blinds);
}
_blinds2.onload = setTimeout(this.image_transition(_blinds2.id), this.welke_blind(i, j));
}
}
this.plaatjes_element.src = new_src;
}
};
function draai_de_blinds(id) {
if (parseInt(document.getElementById(id).style.width, 10) < 2) {
document.getElementById(id).style.display = 'none';
return;
}
if (!document.getElementById(id).style.MozOpacity) {
document.getElementById(id).style.MozOpacity = 1;
}
document.getElementById(id).style.width = parseInt(document.getElementById(id).style.width, 10) * 0.6 + 'px';
document.getElementById(id).style.MozOpacity = parseFloat(document.getElementById(id).style.MozOpacity) * 0.7;
document.getElementById(id).style.opacity = parseFloat(document.getElementById(id).style.opacity) * 0.7;
document.getElementById(id).opacity = parseFloat(document.getElementById(id).opacity) * 0.7;
setTimeout('draai_de_blinds(\'' + id + '\')', snelheid_transition);
}
window.onload = function() {
de_blinds_transition = new show_blinds(['http://static.dns5.nl/blinds-transition-1.jpg', 'http://static.dns5.nl/blinds-transition-2.jpg', 'http://static.dns5.nl/blinds-transition-3.jpg', 'http://static.dns5.nl/blinds-transition-4.jpg']);
};
function laad_blinds_plaatjes() {
document.getElementById("transition_start_1").src = "http://static.dns5.nl/blinds-transition-1.jpg";
}
setTimeout(function() {
laad_blinds_plaatjes();
},
300);
</script>
html code voor de cross browser blinds transition
<div id="blinds_container">
<div id="blinds_transition">
<img id="transition_start_1" alt="blinds plaatje 1" width="340" height="226" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' >
</div>
<div id="blinds_navigatie">
<a href="#" id="vorige">vorige</a> - <a href="#" id="volgende">volgende</a>
</div>
</div>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.
