jQuery.Colorbox после jQuery.scrollTo - PullRequest
       9

jQuery.Colorbox после jQuery.scrollTo

1 голос
/ 11 ноября 2009

Я работаю с двумя плагинами в jQuery: jquery.scrollTo и jquery.Colorbox, и у меня возникла проблема, я думаю, довольно простая.

Я хочу запустить colorbox сразу после окончания события scrollTo.

ScrollTo фактически поддерживает обратные вызовы с настройкой onAfter и работает с простыми сообщениями alert (). Но когда я пишу функцию для запуска colorbox, она не работает: colorbox выполняется вместе с scrollTo (окно прокручивается и открывается div colorbox).

У меня есть следующий код:

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

Я не знаю, как работает функция onAfter, поэтому я прошу вас о помощи = D

Большое спасибо.

1 Ответ

1 голос
/ 11 ноября 2009

у вас есть этот бит кода

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

внутри вашего $(document).ready(function() ..., то есть выполняется, когда документ готов.
Часть onAfter в порядке, вам просто нужно переместить объявление функции наружу.

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

Если вы не прогнозируете, что будете использовать функцию abreCbox позже, то рекомендуется передать анонимную функцию в onAfter и полностью удалить объявление, например:

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