从 Fancybox 打开 Fancybox 并关闭父级答案

【问题标题】：Open Fancybox from Fancybox and close parent从 Fancybox 打开 Fancybox 并关闭父级
【发布时间】：2012-05-21 18:08:34
【问题描述】：

我有花式盒子的麻烦。我的产品在fancybox 中打开，并且我有相关产品的内容。当用户点击相关链接并在新的fancybox中打开产品时，我想关闭fancybox。

谢谢你们的帮助。但它不起作用:(。产品在没有花式框的窗口中打开。

    $(document).ready(function() {
$("a#fancy1").fancybox({
        'speedIn'           : 600, 
        'speedOut'          : 200, 
        'overlayShow'       : false,
        'autoDimensions'    : false,
        'width'             : 620,
        'height'            : 'auto',
        'overlayShow'       : true,
        'overlayOpacity'    : 0.8,
        'overlayColor'      : '#ccc'
});
$("a#fancy2").fancybox({
        'speedIn'           : 600, 
        'speedOut'          : 200, 
        'overlayShow'       : false,
        'autoDimensions'    : false,
        'width'             : 620,
        'height'            : 'auto',
        'overlayShow'       : true,
        'overlayOpacity'    : 0.8,
        'overlayColor'      : '#ccc'
}); 
});

这就是我所拥有的。点击产品打开fancybox“fancy1”。但是在fancybox 链接中单击会打开相关产品，但我得到的是：

($ 未定义 $(function(){$('#form_2538').validate();});) ！

链接到以这种方式完成的产品

<a id="fancy1" href="product_url" >

以这种方式链接到相关对象

<a id="fancy2" href="product_url" >

我已经为此苦苦挣扎了一段时间:(

我已经解决了！！！！！！！！！！！！！！！！！！！！！

我已经解决了问题！

请看下文！

    $(document).ready(function() {

$("a.fancy1").live("hover",
        function()
        {$("a.fancy1").fancybox({
        'speedIn'           : 600, 
        'speedOut'          : 200, 
        'overlayShow'       : false,
        'autoDimensions'    : false,
        'width'             : 620,
        'height'            : 'auto',
        'overlayShow'       : true,
        'overlayOpacity'    : 0.8,
        'overlayColor'      : '#ccc'

        });
        });
    });

【问题讨论】：

这个错误($ is not defined $(function(){$('#form_2538').validate();});) 似乎与fancybox 无关，它也可能破坏了fancybox 脚本。检查您的验证脚本设置。

标签： fancybox

【解决方案1】：

你必须为每个链接单独绑定fancybox，比如

$("a#fancy1").fancybox({
// options
});
$("a#fancy2").fancybox({
// options
});

请注意，第二个脚本不在第一个脚本内（onClosed 选项）。

像这样打开第一个fancybox：

<a id="fancy1" href="{link to product}">open product</a>

然后在打开的内容中你应该有一个类似的链接

<a id="fancy2" href="{target to related product}">see related product</a>

您实际上不必关闭第一个 fancybox，从它内部链接到第二个即可关闭它。

【讨论】：

如您在上面的示例中所见，我已遵循您的建议，但仍未得到任何结果。伤心。
谢谢肯尼迪。你的解决方案有点奏效。我不得不使用 $("a#fancy1").fancybox({ // options }); $("a#fancy1").fancybox({ // 选项 });两次！但！用fancybox打开产品并点击其中的相关产品只能工作1次。如果我打开相关产品也有相关产品，它不起作用..

【解决方案2】：

<a href="product_url" id="fancy2">Link</a>

<script>
$('#fancy2').click(function()
{
    $(this).parent().fancybox.close();
});
</script>

或

<script>
$('#fancy2').click(function()
{
    $('a#fancy1').trigger('click');
});
</script>

【讨论】：

我对 js 有点陌生。没明白！我把它放在哪里？像这样：？
你需要在 $(document).ready(function() { /*place code here */ });
我猜你需要对每个链接都这样做？ $('a').each(function(){ $(this).fancybox({ // 选项 }); });