Jquery iframe外部的显示库弹出窗口

我在这里读了一些文章，但我还没有找到一个很好的解决方案。我在jQuery方面没有经验，所以请在这里耐心等待。我有代码在iframe外显示一个图像。但我的目标是添加左/右箭头以在我的图库中滚动

我有这个剧本

   <script type="text/javascript">
    $(document).ready(function () {
        $('.fancybox').click(function (e) {
            e.preventDefault();
            parent.$.fancybox({         
                type : "image", // force type of content to image
                href: this.href,
                title: this.title,
                helpers: {
                    title: { type: 'inside' },
                    overlay: {
                        opacity: 0.3
                    } // overlay
                    //, buttons: {}
                } // helpers
            }); // fancybox
        }); // click
    }); 
</script>

$（文档）.ready（函数（）{
$（'.fancybox'）。单击（函数（e）{
e、 预防默认值（）；
父项。$.fancybox（{
类型：“图像”//强制将内容类型转换为图像
href:this.href，
标题：这个，
助手：{
标题：{type:'inside'}，
覆盖：{
不透明度：0.3
}//覆盖
//，按钮：{}
}//助手
})；//fancybox
})；//单击
}); 

我的HTML代码是

<a  rel="gallery" class="fancybox" href="images/01.jpg" title="aaasdasdasd"><img alt="" src="thumbnails/01.jpg"/></a>
<a  rel="gallery" class="fancybox" href="images/02.jpg" title="bbsdfsdfsdfdsf"><img alt="" src="thumbnails/02.jpg"/></a>

FancyBox弹出窗口工作。但我想添加箭头来滚动我的“画廊项目”。我尝试添加画廊代码 .attr（'rel'，'gallery'） 正上方 父项。$.fancybox（{

但是弹出窗口就消失了

添加 openEffect:'无'， closeEffect:'无'， 下一个效果：“无”， 效果：“无”， 填充：0， 边距：[20,60,20,60]//增加左/右边距

也使弹出窗口消失

---

可以这样做吗？

您可能需要先手动创建图库元素，请尝试

var gallery = [];
jQuery(document).ready(function ($) {
    $(".fancybox").each(function (i) {
        var item = {
            href: this.href,
            title: this.title
        };
        gallery.push(item);
        $(this).on("click", function () {
            parent.$.fancybox(gallery, {
                // API options
                index: i, // starts gallery from clicked item
                type: "image", // force type of content to image
                helpers: {
                    title: {
                        type: 'inside'
                    }
                } // helpers
            }); // fancybox
            return false;
        }); // on
    }); // each
}); // ready

---

下面是FancyBox在iframe外部显示画廊图像的代码

<script type="text/javascript">

var gallery = [];

jQuery(document).ready(function($) {
    $(".fancybox").each(function(i) {

            var item = {
                href: this.href,
                title: this.title
            };
            gallery.push(item);     

            $(this).on("click", function() {    
            parent.$.fancybox(gallery, {
                index: i, // starts gallery from clicked item
                type: "image", // force type of content to image
                helpers: {
                    title: {
                        type: 'inside'
                    },
                    overlay: {
                        opacity: 0.3
                    } // overlay
                } // helpers
            }); // fancybox
            return false;
        }); // click
    });
});
</script>

var=[]；
jQuery（文档）.ready（函数（$）{
$（“.fancybox”）。每个（函数（i）{
变量项={
href:this.href，
标题：this.title
};
推送（项目）；
$（this）.on（“单击”，function（）{
家长。$.fancybox（图库{
索引：i，//从单击的项目启动库
类型：“图像”//强制将内容类型转换为图像
助手：{
标题：{
类型：“内部”
},
覆盖：{
不透明度：0.3
}//覆盖
}//助手
})；//fancybox
返回false；
})；//单击
});
});

html代码如下

<a  rel="gallery" class="fancybox" href="images/01.jpg" title="test1"><img alt="" src="thumbnails/01.jpg"/></a>
<a  rel="gallery" class="fancybox" href="images/02.jpg" title="test2"><img alt="" src="thumbnails/02.jpg"/></a>

---

这在IE、firefox、safari上有效，但在Chrome上无效。

我使用了你的代码。但是现在fancybox停止弹出。为什么会出现return false？还有其他jQuery可以做到这一点吗？我尝试了Visuallight box和放大弹出，但都不起作用。只有fancybox是最接近的。首先感谢你的时间。代码在

中运行得非常好将假/<代码>空洞作为默认动作，因为我们在“代码”>点击“< /代码>事件”之后以编程方式启动FANKYBOX。对不起，我正在键入消息。它在Firefox、伊江、Safari上工作。但是Chrome有弹出的问题。有任何想法吗？如果我替换<代码>父。$FANYBOX（画廊，{< /代码>到代码> $F.FANYBOX）（gallery，{

和Chrome作为弹出窗口工作。至少在Chrome版本36.0.1985.143 m+（Windows）中对我有效）