Открытие ссылок внутри окна fancybox в том же окне fancybox

Question

Это, вероятно, не так уж и сложно, потому что иначе я уверен, что где-нибудь нашел бы ответ ...

Что я хочу сделать, так это открыть fancybox (плагин jquery), загрузить его с ajax-контентом, и когда я нажимаю на ссылку внутри него, он загружает его с новым ajaxcontent, например, щелкая ссылку внутри фрейма.

Есть идеи?

Answer 1

Вот как я это делаю:

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

Это будет анимация fancybox, включая изменение размера, любой ссылки внутри fancybox.

Answer 2

Я не кодирую, но, кажется, у меня это работает после 5 часов борьбы

Если вы открываете новый файл HTML / PHP с помощью fancybox, это работает (т.е. 9 / ff / safari / chrome)

Я создал 4 страницы - main.php / page1.php / page2.php / page3.php

main.php >> Используйте код fancybox (стиль по необходимости)

$(document).ready(function() {
    $("a.openModal").fancybox({
    'autoDimensions'    : false,
    'width'         : 750,
    'height'        : 500,
    'transitionIn'      : 'elastic',
    'transitionOut'     : 'elastic',
    'titleShow'     : false,
    'hideOnContentClick'    : false, 
    });
}); 

{a href = "page1.php" class = "openModal"} Имя страницы {/ a}

---

пользователь нажимает на ссылку fancybox, указанную мной в main.php (я использовал классы, так как на одной странице у меня много ссылок fancybox)

Все страницы имеют ссылки друг на друга (но не на main.php)

---

page1.php & page2.php & page3.php - ДОЛЖЕН иметь тот же код, который вы использовали на главной странице (в противном случае у вас возникнут проблемы с изменением размера и переходом)

page1.php

$(document).ready(function() {
    $("a.openModal").fancybox({
    'autoDimensions'    : false,
    'width'         : 750,
    'height'        : 500,
    'transitionIn'      : 'elastic',
    'transitionOut'     : 'elastic',
    'titleShow'     : false,
    'hideOnContentClick'    : false, 
    });
}); 

• {a href = "page1.php" class = "openModal"} Имя страницы {/ a}
• {a href = "page2.php" class = "openModal"} Имя страницы {/ a}
• {a href = "page3.php" class = "openModal"} Имя страницы {/ a}

---

Прекрасно работает для меня - ссылки через fancybox Modal, на страницу, а затем ссылки на страницу в Модале, ссылки на другую страницу в Модале (у меня 6 ссылок).

Должно быть "проще" (правильное слово будет "правильно"), но этот обходной путь - мое решение

Я не проверял формы - и я не могу заставить работать "javascript: history.go (-1)" -

так что ТОЛЬКО идет вперед (помощь с этим будет УДИВИТЕЛЬНОЙ)

Answer 3

Вы можете либо

1. использовать iframe внутри fancybox (самый быстрый и простой, не будет использовать ajax, но будет работать так, как вы хотите, и упростить SEO), или

2. поместите div в ваш fancybox, заполните его, используя ajax и html(), затем привяжите событие a elements 'click к функции, которая будет делать то же самое снова.Обратите внимание, что при таком втором способе у вас не будет автоматически работать кнопка возврата браузера, сложнее SEO и т. Д.

Answer 4

Да, вам нужен кадр (iframe). Fancybox должен знать, что содержимое его загрузки должно рассматриваться как фрейм так что вы можете использовать

$('#contentclassorid').fancybox({ type: "iframe" });

Answer 5

Используйте обратный вызов onComplete (1,3 или ниже) или afterShow (2.0+).

Просто запустите там тот же код, что и на своей странице, чтобы активировать fancybox.

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

function initFancybox() {
  $("a.openModal").fancybox({options..., onComplete: initFancybox });
}

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

function initFancybox(selector) {
  if (selector == null) { selector = ""; }
  $(selector+" a.openModal").fancybox({options..., 
    onComplete: function() { initFancybox("#fancybox-content"); }
  });
}