在同一个fancybox窗口内的fancybox窗口内打开链接答案

【问题标题】：Opening links inside a fancybox-window inside the same fancybox window在同一个fancybox窗口内的fancybox窗口内打开链接
【发布时间】：2010-07-12 14:05:42
【问题描述】：

这可能不是那么困难，因为否则我肯定我会在某个地方找到答案...

我想做的是打开一个fancybox（jquery插件），用ajax-content加载它，当我点击里面的链接时，它会用新的ajaxcontent加载它，就像点击框架内的链接一样。

有什么想法吗？

【问题讨论】：

标签： jquery jquery-plugins fancybox

【解决方案1】：

你可以

在 fancybox 中使用 iframe（最快、最简单，不会使用 ajax，但会随心所欲，更容易 SEO），或者
在您的fancybox 中放置一个div，使用ajax 和html() 填充它，然后将包含的a 元素'click 事件绑定到将再次执行相同操作的函数。
请注意，使用第二种方式，您不会自动让浏览器的后退按钮工作，SEO 更难等等。

【讨论】：

嗯，是的，这当然可以。但我真正想要的是一种使用 sam 转换和调整 fancybox 用于画廊功能的方法，但也将其用于其他链接。不过谢谢！
调整 iframe（或 ajax 填充的 div）的大小意味着要知道加载内容的理想大小。如果您控制此内容（它与包含的页面一起在您的服务器上，因此不受同源策略的限制），您可以轻松地在 iframe 和父窗口之间进行对话，以使用所需的宽度/高度调用调整大小功能。

【解决方案2】：

我是这样做的：

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

这将对fancybox中的任何链接进行fancybox动画，包括调整大小。

【讨论】：

不知道为什么你被否决了，这是页面上最好的解决方案。

【解决方案3】：

我不会编码，但我努力了 5 个小时后似乎可以正常工作

如果您使用 fancybox 打开一个新的 HTML / PHP 文件，这确实有效（ie9 / 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}

用户点击我在 main.php 中指定的 fancybox 链接（我使用了类，因为我在一个页面上有很多 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链接到一个页面，然后链接到Modal中的页面，链接到Modal中的另一个页面（我已经进入了6个链接）。

必须是一种“更简单”的方式（正确的词应该是“正确的”） - 但这个解决方法是我的解决方案

我没有使用表单进行测试 - 我无法让“javascript:history.go(-1)”工作 -

所以只有前进（这方面的帮助会很棒）

【讨论】：

【解决方案4】：

使用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"); }
  });
}

【讨论】：

【解决方案5】：

是的，您需要的是一个框架 (iframe)。 Fancybox 必须知道其加载的内容应该被视为框架所以你可能想使用

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

【讨论】：