Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

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!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
1.2k views
Welcome To Ask or Share your Answers For Others

1 Answer

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...