从Fancybox打开Fancybox并关闭父级

时间:2012-05-21 18:08:34

标签: fancybox

我有麻烦的问题。我的产品在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'

        });
        });
    });

2 个答案:

答案 0 :(得分:0)

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

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

OR

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

答案 1 :(得分:0)

您必须单独为每个链接绑定fancybox,如

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

请注意,第二个脚本不在第一个脚本(onClosed选项)内。

打开第一个花式框,如:

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

然后在打开的内容中,你应该有一个像

这样的链接
<a id="fancy2" href="{target to related product}">see related product</a>

你实际上不必关闭第一个fancybox,从它内部连接到第二个fancybox会关闭它。