使用fancyBox从iframe调用Open Gallery

时间:2014-03-07 12:06:44

标签: javascript jquery html iframe fancybox

好吧,我已按照该问题的说明进行操作:call Fancybox in parent from iframe

但是,对我来说不起作用。

在这个例子中,他在javascript中有一个画廊,如:

$('.imagen').click(function(e){
    e.preventDefault();
    parent.$.fancybox([
        {href:'images/01.jpg', title: '01'},
        {href:'images/02.jpg', title: '02'},
        {href:'images/03.jpg', title: '03'}
    ],{
    //          href: this.href,
            helpers: {
                overlay: {
                opacity: 0.3
                } // overlay
                //, buttons: {}
            } // helpers
        }); // fancybox
    });

在我的情况下,我正在使用fancyBox页面指示:

<a href="javascript:parent.$.fancybox.open({href : 'myurl'});" rel="group1">Open something</a>
<a href="javascript:parent.$.fancybox.open({href : 'myurl'});" rel="group1">Open something</a>
<a href="javascript:parent.$.fancybox.open({href : 'myurl'});" rel="group1">Open something</a>
<a href="javascript:parent.$.fancybox.open({href : 'myurl'});" rel="group1">Open something</a>

它正在工作,但是显示简单的图像,而不是图库

我怎么能在画廊上翻这个?

1 个答案:

答案 0 :(得分:1)

在您的iframe中

HTML:

<a class="fancybox" rel="group1" href="1.jpg">Image#1</a>
<a class="fancybox" rel="group1" href="2.jpg">Image#2</a>

JS:

$(document).on('click','.fancybox',function(){
    var rel = $(this).attr('rel');
    var images = [];
    $('[rel="'+rel+'"]').each(function(){
        var image = $(this).attr('href');
        images.push({href:image});
    });
    parent.$.fancybox(images);
    return false;
});

不要忘记在 iframe 包含jQuery 文件。

未经测试,请使用您的真实图片进行测试

家长:需要jQuery.js,Fancybox.js

iFrame:需要jQuery.js和我的脚本