多个Fancybox 2图库问题与“rel”

问题描述

我看到了一些解决类似问题的问题，但没有一个修复程序似乎适用于我的情况。基本上，我在整个网站的一个页面上有多个fancybox图库，当点击一个网站上的一个幻灯片时，它会从一个图库继续到下一个图库。我希望画廊/ fancybox实例保持彼此独立。基本上我需要rel类别来保持画廊分开，并且不会互相流血。任何帮助非常感谢我尝试了几件事情，但似乎没有任何工作。

以下是我添加的社交媒体按钮附加的唯一Javascript：

  $（$。$ b $（$。$ fancybox）
 .attr（'rel'，'gallery'）
 .fancybox（{
 beforeShow：函数（）{
 if（this.title）{
 //新行
 this.title + ='< br />'; 
 
 / /添加推特按钮
 this.title + ='< a href =https://twitter.com/shareclass =twitter-share-buttondata-count =nonedata-url = '+http://drewalbinson.com/+'> Tweet< / a>'; 
 
 //将按钮添加为按钮
 this.title + ='< ; iframe src =http://www.facebook.com/plugins/like.php?href='+ this.href +'& amp; amp; layout = button_count& amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp;安培;行动=像&放大器;放大器;字体&放大器;放大器;色彩方案=光&放大器;放大器;高度= 2 3滚动=否frameborder =0style =border：none;溢出：隐藏;宽度：110px; height：23px;allowTransparency =true>< / iframe>'; 
} 
}，
 afterShow：function（）{
 // Render tweet button 
 twttr.widgets.load（）; 
}，
帮助者：{
 title：{
 type：'inside'
} 
} 
}）; 
 
}）; 
  

我的HTML简化版：

 <！ - 图库1  - > 
 
< ; div class =imagebox> 
< a href =g1_img1.pngclass =fancybox =gallery1title =1 of 2> 
 
 < img src =g1_img1_small.png/> 
 
< / a> 
 
< a href =g1_img2.pngclass =fancybox =gallery1title =2 of 2>< / a> 
 
< / div> 
 
<！ - 图库2  - > 
 
< div class =imagebox> 
 
< a href =g2_img1.pngclass =fanc yboxrel =gallery2title =1 of 2> 
 
< img src =g2_img1_small.png/> 
 
< / a> 
 
< a href =g2_img2.pngclass =fancybox =gallery2title =2 of 2>< / a> 
 
< / div> 
  

谢谢！

解决方案
$ b

  $（。fancybox）
 .attr（ 'rel'，'gallery'）
 .fancybox（{
 .... etc 
  

...将覆盖HTML中的 rel 属性，只需删除 .attr（）方法从它像：

  $（。fancybox）
 .fancybox（{
 ... 。etc 
  

...你会没事的。

I've seen some questions that address similar issues but none of the fixes seem to work for my situation. Basically I have multiple fancybox galleries on one page throughout the site, and when one clicks through one slideshow on the site, it continues from one gallery to the next. I want the galleries/fancybox instances to remain separate from one another. Basically I need the "rel" catagories to keep galleries separate and not bleed into one another. Any help is much appreciated I've tried a few things but nothing seems to work.

Here's the only additional Javascript I've included to add social media buttons:

$(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 + '&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;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'
                }
            }
        });

    });

Here is a simplified version of my 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>

Thanks!

解决方案

This part of your code :

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
    .... etc

...is overriding the rel attributes in your html. Just remove the .attr() method from it like :

$(".fancybox")
    .fancybox({
    .... etc

... and you will be fine.

这篇关于多个Fancybox 2图库问题与“rel”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！