显示图片库在iframe外弹出

问题描述：

我在这里读了一些线程，但是我还没有找到一个好的图库项目解决方案。我在jQuery中没有预期，所以请在这里忍受我。我有代码在iframe之外显示一个图像。但我的目标是添加左/右箭头滚动浏览我的画廊。显示图片库在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（ '相对'， '画廊'）正上方父$的fancybox（{

但弹出只是消失

添加 openEffect：。 '无'， closeEffect： '无'， nextEffect： '无'， prevEffect： '无'，填充：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

我用你的代码。但现在，花哨盒停止弹出。那里的回报如何？有没有另一个jQuery可以做到这一点？我尝试了Visuallight box和magnific pop，但两者都不起作用。只有Fancybox是最接近的。首先感谢您的时间。 – user3037484 2014-09-02 17:55:14

这段代码工作得很好http://jsfiddle.net/uj0zLco4/'return false'使默认行为无效，因为我们在'click'事件之后以编程方式发射fancybox。 – JFK 2014-09-02 18:42:07

对不起，我正在输入消息。它适用于Firefox，IE，safari。但Chrome浏览器遇到问题会弹出。任何想法？如果我替换了'parent。$。fancybox（gallery，{'to'$ .fancybox（gallery，{'和Chrome可以弹出。 – user3037484 2014-09-02 18:48:32

答

这里是一个的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。

适用于我，至少在Chrome版本36.0.1985.143 m +（Windows） – JFK 2014-09-02 21:51:25

显示图片库在iframe外弹出

相关推荐