jQuery.Colorbox after jQuery.scrollTo
Question
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.
Solution
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}
});
});