Ссылка Fancybox для отображения другого fancybox

Question

Иногда имеет смысл иметь ссылку в fancybox для запуска другого fancybox (или загрузки содержимого в текущем).

Скажем, у вас появляется сообщение об ошибке fancybox при входе в систему.У вас также есть виджет «Напишите мне мой пароль», который работает через fancybox.Возможно, вы захотите объединить эти два слова (в фантастическом ящике):

Bad password!
<a href="#forgot-password">Forgot my password!</a>

К сожалению, это не сработает.Я подумал добавить следующие js:

  $('#fancybox-content a').live('click', function(){
      $(this).fancybox();
  });

Удивительно, но этот вид работал: вы должны нажать на ссылку дважды , и тогда произойдет правильное.Тьфу.

Наконец, я нашел хакерский уродливый обходной путь (это работает!):

  $('#fancybox-content a').live('click', function(){

    var href = $(this).attr('href');  //assume there is a selector inside href
    $.fancybox($(href).html());       //find the html manually and load
  });

Как правильно это сделать?

Answer 1

Вот как я решил эту проблему в своих проектах:

$('a.fancybox').live("click",function(event) {
   event.preventDefault();
   var href = $(this).attr('href');
   $.fancybox({href: href}) 
});

Таким образом, вы можете добавить fancybox в любой текущий элемент unuture A с классом .fancybox, чтобы вам не приходилось определять новые события после открытия fancybox.

Answer 2

Версия 2 уже использует "live", поэтому используются имена классов - `$ (". Fancybox "). Fancybox (); '- также будет работать с элементами, загруженными с использованием ajax

Answer 3

Вы должны сказать элементам открыть Fancybox из вашего плагина.

Где-то у вас есть следующее ->

$(document).ready(function(){
  $("#my_element").fancybox();
});

Это очень простая функция, чтобы открыть Fancybox, и не только это, но и то, что нужно открыть, основываясь на значении элемента. Вам не нужно здесь работать на ногах.

Так что, если у вас есть ->

<a href="#forgot-password">Forgot my password!</a>

Просто добавьте идентификатор, такой как 'x' для простоты ->

<a id="x" href="#forgot-password">Forgot my password!</a>

Затем включите плагин Fancybox для этого элемента.

$(document).ready(function(){
  $("#my_element").fancybox();

  //this is for our new container to fire
  $("#x").fancybox();
});

Это должно быть все, что вам нужно.