jQuery.Colorbox après jQuery.scrollTo

Question

Je travaille avec deux plugins dans jQuery: jquery.scrollTo et jquery.Colorbox et j'ai un problème, assez simple je pense.

Ce que je veux faire est de déclencher colorbox juste après la fin de l'événement scrollTo.

ScrollTo prend actuellement en charge les rappels avec le paramètre onAfter et il fonctionne avec des messages simples alert(). Mais quand j'écris une fonction pour exécuter colorbox, ça ne marche pas: colorbox s'exécute avec scrollTo (la fenêtre défile et la div colorbox s'ouvre).

J'ai le code suivant:

<script type="text/javascript"> 
$(document).ready(function(){ 
    function abreCbox(){ 
    $(".abrircbox").colorbox({width: "50%",inline: true, href:"#inline_example1"}) 
    } 

    $.scrollTo('#home',{offset: {left: -100, top: -100}}); 

    $.localScroll({ 
    axis: 'xy', 
    queue: true, 
    duration: 1800, 
    onAfter: abreCbox, 
    offset: {left: -100, top: -100} 
    }); 
}) 
</script> 

Je ne sais pas comment fonctionne la fonction onAfter, donc je vous en supplie de l'aide = D

Merci merci beaucoup.

Answer 1

Vous avez ce morceau de code

function abreCbox(){ 
    $(".abrircbox").colorbox({width: "50%",inline: true, href:"#inline_example1"}) 
} 

dans votre $(document).ready(function() ..., ce qui signifie qu'il est exécuté lorsque le document est prêt.
La partie onAfter est correcte, il suffit de déplacer la déclaration de fonction à l'extérieur.

//for reuse later 
function abreCbox(){ 
$(".abrircbox").colorbox({width: "50%",inline: true, href:"#inline_example1"}) 
} 
$(document).ready(function(){ 
    $.scrollTo('#home',{offset: {left: -100, top: -100}}); 

    $.localScroll({ 
    axis: 'xy', 
    queue: true, 
    duration: 1800, 
    onAfter: abreCbox, 
    offset: {left: -100, top: -100} 
    }); 
}); 

Si vous ne vous prédisez réutiliser la fonction abreCbox plus tard, il est conseillé de passer une fonction anonyme à onAfter et de supprimer la déclaration tout à fait, comme ceci:

$(document).ready(function(){ 
    $.scrollTo('#home',{offset: {left: -100, top: -100}}); 
    $.localScroll({ 
    axis: 'xy', 
    queue: true, 
    duration: 1800, 
    onAfter: function(){ 
     $(".abrircbox").colorbox({width: "50%",inline: true, href:"#inline_example1"}); 
    }, 
    offset: {left: -100, top: -100} 
    }); 
});