CODEWITHSUNDEEP
jquery
enne87
enne87

Reputation: 2299

jQuery-Galleriffic, set facebook like-button on every photo

I implemented the tremendous [galleriffic][0] - jQuery plugin and would like to set a facebook-like button on every single picture. Now I tried it in the onSlideChange()-function like this:

$(".fb-like").attr("data-href","http://ulc.local/galerie/25#"+nextIndex);

but with no success. As soon as I click on one like button, all other buttons on the other pictures are also enabled.

Any help is much appreciated.

EDIT: Here is some more code:

 <div id="gallery" class="content-image">  
            <div class="border-left"></div>  
            <div class="slideshow-container">
                <div id="loading" class="loader"></div>
                <div id="slideshow" class="slideshow">
                    <div id="slide-container">
                        <div id="slider">
                            <div id="title"></div>
                            <div id="share">
                                <div class="fb-like" data-send="false" data-layout="button_count" data-width="150" data-show-faces="true"></div>
                                <div id="spacer"></div>
                                <a href="https://twitter.com/share" class="twitter-share-button"  data-lang="en" data-count="none"></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="border-right"></div>  
        </div>
        <div style="clear:both"></div>

The div with the class "fb-like" should display the button. Now I tried to replace this div with this one in the onSlidechange():

onSlideChange:function(prevIndex, nextIndex) {
        // 'this' refers to the gallery, which is an extension of $('#thumbs')
        this.find('ul.thumbs').children()
            .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
            .eq(nextIndex).fadeTo('fast', 1.0);
        newUrl = "http://ulc.local/galerie/25/";
        $(".fb-like").replaceWith("<div class='fb-like' data-href='http://ulc.local/galerie/25#' "+nextIndex+" data-send='false' data-layout='button_count' data-width='150' data-show-faces='true'></div>");
    }

I thought to make several like-buttons, I change the data-href attribute as soon as the user clicks on the next image. Unfortunately, no button is shown.

Upvotes: 0

Views: 507

Answers (2)

Louise
Louise

Reputation: 11

Don't know if you've already managed to solve this problem, but if you haven't I recommend you to use the iframe-version of the Facebook button instead.

Then you can dynamically change the facebook "like" url with PHP instead (or some other server side scripting).

I had the exact same problem as you describe before but this solved the problem for me (although I'd rather not use the iframe version but at least I managed to make it work with Galleriffic).

Upvotes: 1

Jack
Jack

Reputation: 8941

Your selector is grabbing by class which means your attribute change will ripple through all elements with that class. You need to find a way to uniquely identify the element you want to modify. If you post some more code from the click event and some html structure that would be helpful.

Upvotes: 0

Related Questions