effet ajax puis changer image puis effet ajaxy

Question

bonjour,

voilà, j'ai une div avec une image dedans et j'aimerais que lorsque je clique sur un lien, la div se ferme (effect.Fade), puis une fois fermée, l'image qui se trouve dedans change, 
(avec cette function:

function loadImage(bob, john){ //le lien genre:
 document.images[bob].src=john;
})

puis, une fois l'image changée, la div ce rouvre (effect.Appear).

si quelqu'un peu m'aider, ce serait super.

Salut

Annadrill

cs_bultez · Answer

Bonjour,

    c'est quoi un "effect.fade" ou effet ajax ou affet ajxy ?

function loadImage(bob, john){
  fermer le div avec l'effet voulu;
 document.images[bob].src=john;
 réouvrir le div;
}

<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

Zobibol · Answer

Salut, il serait sympas de préciser ce que tu utilises comme librairie Ajax ... si c'est Scriptaculous, dans les transitions tu as accès à une propriété : oncomplete :
exemple:
new Effect.Fade(
    document.getElementById('demo-all'), 
    {
        oncomplete:function(){ 
           // Je fais ce que je veux ici une fois que la transition est finie (bah oui)
        }
    } 
    );

Mais si ce n'est pas scriptaculous, je seche !

[o-_-o]

XtremDuke · Answer

Salut,

Même remarque que [auteur/ZOBIBOL/2707.aspx Zobibol]. Ce n'est pas problème compliqué à résoudre mais il nous faudrait le type de 'framework' que tu utilises.

Annadrill · Answer

Rebonjour, merci des réponses si rapides, et excusez mon manque d'info...

alors j'utilise Scriptaculous

donc je pourrais faire qqch dans le genre:

new Effect.Fade(
    document.getElementById('demo-all'), 
    {
        oncomplete:function(){ 
         function loadImage(bob, john){
         document.images[bob].src=john;
               }
         }
    } 
    );

sauf que ensuite je sèche pour faire réapparaitre la div.
navré mais je suis encore qu'un petit novice dans le genre.

Merci

Annadrill

XtremDuke · Answer

Re,

L'exemple suivant créé un fading de l'image, charge une nouvelle image, puis, lorsque celle-ci est chargée, la fait apparaitre.

new Effect.Fade('demo-all', {
            onComplete: function(){
                var newImg = new Image;
                newImg.onload = function(){
                    $('bob').src = newImg.src;
                    new Effect.Appear('demo-all');
                }
                newImg.src = 'url_image';
            }
});

Annadrill · Answer

Re, alors merci déjà pour ça, a vrais dire je peine à m'ensortir, pour essayer d'être plus clair, voici ce que je veux faire: avoir un lien(bouton) ou plusieurs qui contient l'url de l'image à changer, et qui, lorsque on clique dessus, fait un fading de l'image que l'on voit, change l'image avec l'url contenue dans le lien, puis puis fait apparaître l'image. il me semble que le code au dessus devrait le faire mais je ne sais comment le manipuler. ma fonction de base était: function loadImage(bob, john){ //le lien genre:[# document.images[bob].src=john; } voici ma page: ]lebouton1 Merci pour l'aide Annadrill

XtremDuke · Answer

Voilà ta fonction "changeImage" generalisée :

function changeImage(imgTarget, imgUrl){
    new Effect.Fade(imgTarget, {
        onComplete: function(){
            var newImg = new Image;
            newImg.onload = function(){
            $(imgTarget).src = newImg.src;
                new Effect.Appear(imgTarget);
            }
            newImg.src = imgUrl;
        }
    });
}

Par contre, petite modif à faire :

Annadrill · Answer

Alors je me retrouve avec cela:

function changeImage(imgTarget, imgUrl){
    new Effect.Fade(imgTarget, {
        onComplete: function(){
            var newImg = new Image;
            newImg.onload = function(){
            $(imgTarget).src = newImg.src;
                new Effect.Appear(imgTarget);
            }
            newImg.src = imgUrl;
        }
    });
}

puis ensuite cela:

[# lebouton1]








et le résultat est une fenêtre avec cela: stack overflow at line: 0

et si je change l'effet par un BlindUp/BlindDown, l'image ce ferme mais ne se rouvre pas...

Annadrill

XtremDuke · Answer

Re,

Vraiment désolé, j'ai fait une faute. Je m'en mèle les pinceaux avec tous ces frameworks... :(
Ce n'est pas 'onComplete' mais 'afterFinish'.

Je t'ai mis un exemple en ligne où tu pourras regarder la source : 

http://siteecom.net/tmp/annadrill/index.html

XtremDuke · Answer

oups, correction : 

...Je m'emmèle les pinceaux ...

Annadrill · Answer

Re,

merci beaucoup, je te redis si c'est tout bon bientot, mais je pense que oui vu ton exemple!!!

encore merci et à bientot.

Annadrill

XtremDuke · Answer

Pas de problème :)

Annadrill · Answer

Re bonjour,

comment ca va?

alors voila, je me posais une question,
ce que j'aimerai c'est modifier la fonction changeImage 

function changeImage(imgTarget, imgUrl){
    new Effect.Fade(imgTarget, {
        onComplete: function(){
            var newImg = new Image;
            newImg.onload = function(){
            $(imgTarget).src = newImg.src;
                new Effect.Appear(imgTarget);
            }
            newImg.src = imgUrl;
        }
    });
}

avec celle ci:

function completLoader(titreTarget,titreContent,lienTarget,lienUrl,imgTarget,imgUrl,formTarget,formUrl){
 document.getElementById(titreTarget).innerHTML = titreContent; 
 document.getElementById(lienTarget).href = lienUrl;
 document.images[imgTarget].src = imgUrl;
 document.form.getElementById(formTarget).value = formUrl;
}

et avoir au final l'image qui disparaisse, toutes mes infos qui changent et puis l'mage qui réapparait.
je cherche à comprendre comment ajouter ces éléments à la fonction changeImage.

Bonne soirée

PS: estce que quelqu'un c'est si cet éditeur de texte javascript est gratuit, car il est vraiment bien...
Annadrill

jeanMOULIN54 · Answer

Bonjour, j'ai trouver ce sujet très intéressent :) j'aurai aimer savoir si quelqu'un pouvais me mettre des commentaire sur le script afin de bien comprendre toutes les lignes. Merci :) le code :

Annadrill · Answer

exemple ici : www.sarah.ch/accueil.fr.php salut Annadrill

jeanMOULIN54 · Answer

Merci beaucoup :)

Effet ajax puis changer image puis effet ajaxy

16 réponses

Votre réponse

Discussions similaires