Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

Sujet : Asset images [ JavaScript Orienté objet (POO) / Classes ] (sbool)

jeudi 28 février 2008 à 03:04:11 | Asset images

sbool

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 ;)

jeudi 28 février 2008 à 11:47:49 | Re : Asset images

nickadele

Membre Club Administrateur CodeS-SourceS
Réponse acceptée !
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

samedi 1 mars 2008 à 21:49:39 | Re : Asset images


Cette discussion est classé dans : images, function, setstyle, visibility, gallery


Répondre à ce message

Sujets en rapport avec ce message

MOUSE OVER [ par mimosa803 ] salut à tous, je veux réalisé l'événement Mouse over et Mouse out ,mais ca ne fonctionne pas,donc j'éspere que vous m'aider et merci d'avance.Mouse    problème de transparence à la suite [ par lkm ] Bonjour a tous,Je suis entrain de me faire un petit système de notation en php. Coté php pas de soucis tout fonctionne mais j'ai envie de me faire un Préchargement images [ par jmtoulon ] Bonjour,je suis en train de créer un site de jeu de carte.Je fais une function qui pré charges les images de toutes les cartes de jeu (52)je voudrais Questions Javascript [ par luigi501 ] Bonjour, je suis en train de programmer un petit jeu. Le jeu ce compose de 20 cases sur une page html avec la possibilité de cliqué sur chacune des ca aligner les images horizontalement [ par oceane751 ] bonjour à tous avec le code qui suit, mes images defilent de façon verticale mais je voudrais que ces images défilent horizontalement voici le c evenement OnMouseOver sur des images [ par zatox ] bonjour à tous, pour donner un peu plus de vie a mon site, j'aimerai utiliser l'evenement OnmouseOver sur certaines des images pour en changer la coul Jquery afficher/masque un div [ par jeud84 ] Salut à tous, je cherche un solution pour reproduire le fonctionnement de la barre d'outil de nombreux outil.Exemple sous IE ou autre navigateur lorsq overlay.js me raéjoute un contenaire trop grand [ par mikeborne ] Voilà je suis pret à me jeter par la fenêtre comme c'est si bien dit dans le titre. J'utilise multibox de phatfusion avec le script overlay.js. Le s liens sur différentes images dans script visionneuse [ par mikymaxxx ] bonjour à tous, qui pourrait m'aider, svp à trouver comment je peux faire pour mettre un liens sur chaques images différentes dans le formulaire et sc Blocage google map api [ par gus_air ] Bonjour, je débute sur les API googlemap et suis bloqué.En fait je cherche à placer sur une carte des marqueurs récupérés dans une base mysql.Certains


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :

Comparez les prix Nouvelle version

Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,546 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.