Question

我在这里阅读了一些帖子，但我没有找到一个很好的解决方案。我不是喜欢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 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'）正上方 parent。$。fancybox（{

但弹出窗口就消失了。

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

也让弹出窗口消失。

有可能吗？

Answer 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

Answer 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 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。

在iframe外显示图库弹出窗口

2 个答案: