在 iframe 外显示库弹出窗口

Posted 2023-05-09

【中文标题】在 iframe 外显示库弹出窗口

【英文标题】：Display gallery popup outside iframe

【发布时间】：2014-10-27 00:43:30

【问题描述】：

我在这里阅读了一些帖子，但我还没有为画廊项目找到一个好的解决方案。我不是 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>

我的 html 代码是

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

FancyBox 弹出作品。但我想添加箭头来滚动我的“画廊项目”。我尝试添加画廊代码 .attr('rel', '画廊') 正上方 父.$.fancybox(

但弹出窗口消失了。

添加 openEffect : '无', closeEffect : '无', nextEffect : '无', prevEffect : '无', 填充：0， margin : [20, 60, 20, 60] // 增加左右边距

也使弹出窗口消失。

有可能吗？

【参考方案1】：

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

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不再弹出了。那里怎么会有return false？是否有另一个 jQuery 可以做到这一点？我尝试了 Visuallight box 和 magnific pop，但都不起作用。只有 Fancybox 是最接近的。首先感谢您的时间。

代码运行良好jsfiddle.net/uj0zLco4 return false 使默认操作无效，因为我们在click 事件之后以编程方式触发了fancybox。

抱歉，我正在输入消息。它适用于firefox、IE、safari。但是 Chrome 在弹出时遇到了问题。任何想法？如果我将 parent.$.fancybox(gallery, 替换为 $.fancybox(gallery, 并且 Chrome 会弹出。

【参考方案2】：

这是 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>

html代码是这样的

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

这适用于 IE、firefox、safari，但不适用于 Chrome。

【讨论】：

对我有用，至少在 Chrome 版本 36.0.1985.143 m + (Windows) 中