显示图库在iframe外弹出 [英] Display gallery popup outside iframe

问题描述

我在这里读了一些线索，但我还没有找到一个好的图库项目解决方案。我在jQuery中没有预期，所以请在这里忍受我。我有代码在iframe之外显示一个图像。但我的目标是添加左/右箭头滚动浏览我的画廊。

我有这个脚本

 < script type =text / javascript> 
 $（document）.ready（function（）{
 $（'。fancybox'）。click（function（e）{
 e.preventDefault（）; 
 parent。 $ .fancybox（{
 type：image，//强制内容类型为图片
 href：this.href，
 title：this.title，
 helpers：{ 
 title：{type：'inside'}，
覆盖：{
 opacity：0.3 
} //覆盖
 //，按钮：{} 
} //助手
}）; // fancybox 
}）; //点击
}）; 
< / script> 
  

和我的HTML代码是

 < a rel =galleryclass =fancyboxhref =images / 01.jpgtitle =aaasdasdasd>< img alt =src =thumbnails / 01 .JPG/>< / A> 
< a rel =galleryclass =fancyboxhref =images / 02.jpgtitle =bbsdfsdfsdfdsf>< img alt =src =thumbnails / 02.jpg/ >< / A> 
  

FancyBox弹出工作。但我想添加箭头来滚动我的图库项目。我尝试添加图库代码
.attr（'rel'，'gallery'）
在
的父级上方$。fancybox（{

<

添加
openEffect：'none'，
closeEffect：'none'，
nextEffect： 'none'，
prevEffect：'none'，
padding：0，
margin：[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，//从点击项目开始画廊
类型：image，//强制内容类型为图片
助手：{
 title：{
 type：'inside'
} 
} //助手
}）; // fancybox 
 return false; 
}）; //在
}）; //每个
}）; //准备好
  

I read some thread in here, but I haven't found a good solution for gallery item. I am not expery in jQuery so please bear with me here. I have code to display one image outside iframe. But my goal is to add left/right arrow to scroll through my gallery.

I have this script

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

and my HTML code is

<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 pop up works. But I would like to add arrows to scroll along my "gallery item". I tried adding gallery code .attr('rel', 'gallery') right above parent.$.fancybox({

but the popup just disappear.

Adding openEffect : 'none', closeEffect : 'none', nextEffect : 'none', prevEffect : 'none', padding : 0, margin : [20, 60, 20, 60] // Increase left/right margin

also make the popup disappear.

Is it possible to do that?

解决方案

You may need to create your gallery elements manually first so try

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

这篇关于显示图库在iframe外弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！