Sujet Précédent Sujet Suivant

Asset images

Résolu
sbool Messages postés 115 Date d'inscription mercredi 27 août 2003 Statut Membre Dernière intervention 7 mars 2008 - 28 févr. 2008 à 03:04
sbool Messages postés 115 Date d'inscription mercredi 27 août 2003 Statut Membre Dernière intervention 7 mars 2008 - 1 mars 2008 à 21:49
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 ;)

2 réponses

Réponse 1 / 2
nickadele Messages postés 1251 Date d'inscription mercredi 7 août 2002 Statut Modérateur Dernière intervention 10 avril 2013
28 févr. 2008 à 11:47
Bonjour,
Insretion d'une page js :
<script type="text/javascript" src="monfichier.js"></script>
Insertion d'un script au niveau du html :
<script>
.../...
</script>

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle
3
Réponse 2 / 2
sbool Messages postés 115 Date d'inscription mercredi 27 août 2003 Statut Membre Dernière intervention 7 mars 2008
1 mars 2008 à 21:49
Merci.
0

Discussions similaires

Comparer 2 image
leonardo14 -
krimog -

12 réponses
QuickReport + 10 Images = Images noires !!!!!!
lbensch -
frantzgac -

2 réponses
Images avec les ressources
Diesel80 -
Diesel80 -

2 réponses
deplacement d'images
thierryfa -
thierryfa -

6 réponses
stocker les images dans le projet
blau -
bidouille007 -

2 réponses
Rejoignez-nous