jQuery.Colorbox after jQuery.scrollTo

Question

Hi my friends.

I am working with two plugins in jQuery: jquery.scrollTo and jquery.Colorbox and I'm having an issue, quite simple I think.

What I want to do is to fire colorbox just after the scrollTo event ends.

ScrollTo actually supports callbacks with the setting onAfter and it works with simple alert() messages. But when I write a function to execute colorbox, it doesn't work: colorbox executes along with scrollTo (the window scrolls and the colorbox div opens).

I have the following code:

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

I don't know how the onAfter function works, so I'm begging you for help =D

Thank thank you very much.

Answer 1

You have this bit of code

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

inside your $(document).ready(function() ..., meaning it is executed when the document is ready.
The onAfter part is ok, you just have to move the function declaration outside.

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

If you don't predict you will reuse function abreCbox later, then it is advisable to pass an anonymous function to onAfter and remove the declaration totally, like this:

$(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}
  });  
});