Bonjour, j'essaie d'implémenter sur mon site "Asset.images" avec le framework mootools.js et je n'arrive qu'a afficher un peu de css.
Je n'utilise jamais le java script mais pour de tels effets, je trouvais ça vraiment charmant.
Pourriez vous m'expliquer comment implémenter le code js
var busy = false, timer, loadedImages = [], gallery = $('gallery'), progress = $('progress'), bar = $E('#progress .bar');
var path = 'http://demos.mootools.net/demos/Asset.images/';
var images = [
path + 'cow1.png',
path + 'cow2.jpg',
path + 'cow3.jpg',
path + 'cow4.jpg',
path + 'cow5.jpg'
];
gallery.setStyles({'opacity': 0, 'display': 'none'});
progress.setStyle('visibility', 'hidden');
$('clear').setStyle('visibility', 'hidden');
$('start').addEvent('click', function(e){
e = new Event(e).stop();
$('start').setStyle('visibility', 'hidden');
$('clear').setStyle('visibility', 'hidden');
if(!busy){
var galleryImgs = $$('#gallery img');
if(galleryImgs.length > 0) galleryImgs.each(function(image){ image.remove(); });
busy = true;
progress.setStyle('visibility', 'visible');
gallery.setStyle('display', 'block');
new Asset.images(images, {
onProgress: function(i){
this.setStyles({
'position': 'absolute',
'opacity': 0,
'left': (gallery.getCoordinates().width/ 2) - (this.width /2),
'top': (gallery.getCoordinates().height/ 2) - (this.height /2)
});
loadedImages[i] = this;
var percent = ((i + 1) * progress.getStyle('width').toInt()) / images.length;
bar.setStyle('width', percent).setHTML(i + 1 + ' / ' + images.length);
},
onComplete: function(){
progress.setStyle('visibility', 'hidden');
var fx = $('gallery').effect('opacity').start(1);
timer = 0;
loadedImages.each(function(image, i){
timer += 1500;
image.inject(gallery);
fx = function(){
var imgEffect = image.effect('opacity', {duration: 1500});
imgEffect.start(1).chain(function(){
if(i < loadedImages.length - 1){
this.start(0).chain(function(){
image.remove();
});
}else{
busy = false;
$('clear').setStyle('visibility', 'visible');
$('start').setStyle('visibility', 'hidden');
}
});
}.delay(timer * 2);
});
}
});
}
});
$('clear').addEvent('click', function(e){
e = new Event(e).stop();
if(!busy){
$$('#gallery img').each(function(image){
image.remove();
});
var fx = new Fx.Style(gallery, 'opacity', {
onComplete: function(){
gallery.setStyle('display', 'none');
}
});
fx.start(0);
}
$('clear').setStyle('visibility', 'hidden');
$('start').setStyle('visibility', 'visible');
});sur ma page? (voir http://demos.mootools.net/Asset.images & http://docs.mootools.net/Remote/Assets.js)
J'ai au auparavant préloadé le framework comme ceci dans mon header <script type="text/javascript" src="mootools.js"></script> et tout bien uploadé :(
Ma console d'erreur firefox ne m'indique absolument rien, aucun warning, erreur...
De plus je n'ai trouvé aucun résultat sur codesources pour une recherche de "asset images", alors vous découvrirez au moins quelques trucs sympas en suivant les lien ;)
Merci à vous ;)