Salut @ tous !

J'utilise zoombox pour afficher une photo que l'on peut recadrer grâce au plugin Jcrop.
Si l'utilisateur recadre la photo et clique sur le bouton submit tout fonctionne bien.
Si l'utilisateur ne veut pas recadrer la photo il ferme la zoombox ce qui déclenche la méthode $.zoombox.close().
Je voudrais pourvoir ajouter une fonction callback à cette méthode, un truc du genre :

$.zoombox.close(function()
    {
    // Fonction callback ...
    });

Je ne vois pas comment faire, si vous avez des idées, merci pour de m'aide...

5 réponses


MrGuillou
Réponse acceptée

Bonjour,

Il va falloir que tu modifies le scripte zoombox.

1 - Tu cherches la fonction close.
2 - Tu lui ajoute un argument. exemple function close(arg){ .....
3 - Tu cherches dans la fonction close le moment ou zoombox a fini de disparaître.
Donc après :

$('#zoombox').remove();
state = 'closed';
isOpen = false;

4 - et tu ajoutes une condition qui regarde si l'argument existe et si c'est bien une fonction. Si oui tu l’exécutes.

if (typeof arg == 'function')
{
    arg();
}

attention il faut reproduire 2 fois cette action car il y 2 façons de fermer zoombox.

=======
Au final pour la fonction close
=======

// argument ajoutée (arg)
function close(arg){
    state = 'closing';
    window.clearInterval(timer);
    $(window).unbind('keydown');
    $(window).unbind('resize'); 
    if(type == 'multimedia'){
        $('#zoombox .zoombox_container').empty();
    }
    var css = {};
    if(elem != null && elem.find('img').length > 0){
        var min = elem.find('img');
        css ={
            width : min.width(),
            height: min.height(),
            top : min.offset().top,
            left : min.offset().left,
            opacity:0,
            marginTop : min.css('marginTop')
        };
    }else if(elem!=null){
        css = {
           width: elem.width(),
           height: elem.height(),
           top:elem.offset().top,
           left:elem.offset().left,
           marginTop:0,
           opacity:0
        };
    }else{
        css = {
            width: 100,
            height: 100,
            top:windowH()/2-50,
            left:windowW()/2-50,
            opacity : 0
        };
    }
    if(options.animation == true){
        $('#zoombox .zoombox_mask').fadeOut(200);
        $('#zoombox .zoombox_gallery').animate({bottom:-$('#zoombox .zoombox_gallery').innerHeight()},options.duration);
        $('#zoombox .zoombox_container').animate(css,options.duration,function(){
            $('#zoombox').remove();
            state = 'closed';
            isOpen = false; 
            //ligne ajoutée
            if (typeof arg == 'function'){arg();}
        });
    }else{
        $('#zoombox').remove();
        state = 'closed';
        isOpen = false; 
        //ligne ajoutée
        if (typeof arg == 'function'){arg();}
    }
}

=====
Tu n'a plus qu'à tester, mais normalement ça devrait marcher.

Il faudrait aussi le suggérer à Grafikart pour la prochaine Mise à jour de zoombox

====
Edite

J'ai oublier il faut que tu modifies au début du script

$.zoombox.close = function() {
    close();
}

tu ajoutes l'argument

$.zoombox.close = function(arg) {
    close(arg);
}
MrGuillou
Réponse acceptée

J'ai quand meme testé, et ça fonctionnne.

Tien mon test

$('#zoombox').live('click',function(){
    $.zoombox.close(function(){
        alert('test');
    });
});

Bon pour qu'il exécute ta fontion quand tu clique sur close regardes la ligne 152, c'est ici que tu devrais placer a callback

Voila

6ber6ou
Auteur

Super, merci pour ta réponse ! Je mets ça en place tout de suite.

6ber6ou
Auteur

Ca marche nickel merci !
Autre question qui n'a rien à voir, je vois souvent des avatars tel que le tiens, tu l'as créé comment ?

De rien :)

Pour l'avatar http://faceyourmanga.com/

N'oublie pas de valider les réponses qui ton aidées.