我已经看到了一些解决类似问题的问题,但没有一个修复似乎适用于我的情况.基本上我在整个网站的一个页面上有多个fancybox画廊,当点击网站上的一个幻灯片时,它会从一个画廊继续到下一个画廊.我希望画廊/ fancybox实例彼此分开.基本上我需要“rel”类别来保持画廊分离,而不是彼此流血.任何帮助非常感谢我尝试了一些东西,但似乎没有任何工作.
这是我添加社交媒体按钮的唯一额外Javascript:
$(function(){ $(".fancybox") .attr('rel','gallery') .fancybox({ beforeShow: function () { if (this.title) { // New line this.title += '<br />'; // Add tweet button this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + "http://drewalbinson.com/" + '">Tweet</a> '; // Add FaceBook like button this.title += '<iframe src="http://www.facebook.com/plugins/like.PHP?href=' + this.href + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>'; } },afterShow: function() { // Render tweet button twttr.widgets.load(); },helpers : { title : { type: 'inside' } } }); });
这是我的HTML的简化版本:
<!-- Gallery 1 --> <div class="imageBox"> <a href="g1_img1.png" class="fancybox" rel="gallery1" title="1 of 2"> <img src="g1_img1_small.png" /> </a> <a href="g1_img2.png" class="fancybox" rel="gallery1" title="2 of 2"></a> </div> <!-- Gallery 2 --> <div class="imageBox"> <a href="g2_img1.png" class="fancybox" rel="gallery2" title="1 of 2"> <img src="g2_img1_small.png" /> </a> <a href="g2_img2.png" class="fancybox" rel="gallery2" title="2 of 2"></a> </div>
谢谢!