This project is read-only.

adding social buttons and facebook comments

Jun 4, 2012 at 11:21 AM

Hi all,

i would like to add social buttons and Facebook comments for each image in the gallery, so that each image is attached to its buttons/comments and they should change as one scrolls through the gallery.

anyone to help out?

Jul 29, 2012 at 5:02 AM

First, if you update hash numbers, I think it's somewhat easier because you can read the hash number from the url and use php to set the correct parameters in your button.  I did not update hash numbers because I wanted the browser back button to exit the gallery instead of going back to the previously-viewed image.

I started here:

then it got weird.  I am new to all of this, so there are likely 10 better ways to do this.  I added refreshPinterestButton to _showWhenLoaded in


	refreshPinterestButton: function(media, description, index) {
		var js, href, html, pinJs;
		url = pass_this_variable;// + '#gal-image-'+ index;
		url = escape(url);
		media = escape(media);
		description = escape('Description from RateOurWedding:  '+description);
		href = '' + url + '&media=' + media + '&description=' + description;
		html = '<a href="' + href + '" class="pin-it-button" count-layout="horizontal"><img border="0" src="" title="Pin It" /></a>';

		//remove and add pinterest js
		pinJs = $('script[src*=""]');
		js = document.createElement('script');
		js.src = pinJs.attr('src');
		js.type = 'text/javascript';


And called it from shortly above in the 


        if(desc) {
          if(!this.settings.description_wrapper && !this.settings.hooks.displayDescription) {
            var width = size.width - parseInt(desc.css('padding-left'), 10) - parseInt(desc.css('padding-right'), 10);
            desc.css('width', width +'px');
          } else if(this.settings.hooks.displayDescription) {
  , image);
          } else {
            var wrapper = this.settings.description_wrapper;
	  this.refreshPinterestButton(image.image, image.desc, index);
        } else {
	  this.refreshPinterestButton(image.image, 'Check this out.', index);

The pinterest button looks like this:
	<div class="pin-it">
		<a href="<?php echo $galid?>&media=<?php echo rawurlencode($imgpath1)?>&description=This%20is%20a%20test%20description." class="pin-it-button" count-layout="horizontal"><img border="0" src="//" title="Pin It" /></a>
You can send descriptions with the pinterest button, so I made those dynamic as well.

You can see it all here:
Feel free to view source and look at my modified js file.