Using Pinterest with FancyBox

What is the most obvious use of social for a photo browser? Well, pinterest of course. With it’s emerging social applications pinterest, the online scrapbooking tool has great implications when integrated with photo browsing tools. The “pin it” button has the ability to pin any photos to any of your boards and it has great applications for online marketers of products. It was only natural that I added this ability immediately on one of the sites that I consult on. FancyBox2 can be a little quirky to extend though, so I’m writing a quick how-to on the install.

Check out the demo here.

Here is the code:

$('.fancybox').fancybox({
	//set the next and previous effects so that they make sense
	//the elastic method is confusing to the user
	nextEffect: 'fade',
	prevEffect: 'fade',

	//set the position of the title
	helpers : {
		title: {
			// title position options:
			// 'float', 'inside', 'outside' or 'over'
			type: 'inside'
		}
	},

	beforeShow: function () {
		//if you don't already have titles
		//you can just make the title the pinterest button
		//add pinterest button for title
		this.title = '<a class="pin-it-button" href="http://pinterest.com/pin/create/button/?url='+
 		  encodeURIComponent(document.location.href)+
  		  '&media='+
  		  //set your image path here
  		  encodeURIComponent('http://absoluteimagepath.com/path/to/image/'+this.href)+
  		  '&description=Pin from ScottGale.com">'+
  		  '<img title="Pin It" src="http://assets.pinterest.com/images/PinExt.png" alt="" border="0" /></a>';
	}
});