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:

http://dgrigg.com/blog/2012/04/04/dynamic-pinterest-button/

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 jquery.ad-gallery.js:

 

	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 = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description;
		html = '<a href="' + href + '" class="pin-it-button" count-layout="horizontal"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';
		$('div.pin-it').html(html);

		//remove and add pinterest js
		pinJs = $('script[src*="assets.pinterest.com/js/pinit.js"]');
		pinJs.remove();
		js = document.createElement('script');
		js.src = pinJs.attr('src');
		js.type = 'text/javascript';
		document.body.appendChild(js);
	},

 

And called it from shortly above in the 

 

        if(desc) {
          if(!this.settings.description_wrapper && !this.settings.hooks.displayDescription) {
            img_container.append(desc);
            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) {
            this.settings.hooks.displayDescription.call(this, image);
          } else {
            var wrapper = this.settings.description_wrapper;
            wrapper.append(desc);
          };
	  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="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.rateourwedding.com%2Fgallery%2F<?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="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
	</div>
You can send descriptions with the pinterest button, so I made those dynamic as well.

You can see it all here: http://www.rateourwedding.com/gallery/atlanta-nights
Feel free to view source and look at my modified js file.