Using Pinterest with FancyBox

Share Button

Pinterest FancyBox 2 IntegrationWhat 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.

How this is done:

The key to accomplishing this is to recognize that fancybox has an event called “beforeShow”. This is shown below. All I did to make this work is add the Pinterest markup to the title object in the beforeShow function. Read the comments below in the code to see what each component is doing.

Here is the code:

//NOTE: this uses fancybox 2
$(document).ready(function() {
    //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 already have titles
      //on your fancybox you can append
      if(this.title) {
        //set description to current title
        //this will set what posts
        var description = this.title;

        //add pinterest button for title
        this.title = '<a href="'+
            //put the path to the image you want to share here
            '&description='+description+'" class="pin-it-button" count-layout="horizontal">'+
            '<img border="0" src="" title="Pin It" align="absmiddle"/></a>'
            //add title information

      //if you don't already have titles
      //you can just make the title the pinterest button
      } else {
        //add pinterest button for title
        this.title = '<a href="'+
            '&description=Pin from" class="pin-it-button" count-layout="horizontal">'+
            '<img border="0" src="" title="Pin It" /></a>';

Share Button

10 thoughts on “Using Pinterest with FancyBox”

  1. Hey Scott,

    I’ve looked all over trying to figure out how to add a “Pin it” button to a Fancybox…many sites online reference this page. Can you please help me with this? My email is

    Which versions of the plugin are you using and where exactly does the code listed above go? Or maybe you could send the file?

    Thank you

  2. this isn’t much of a how to really – it doesn’t explain how to add a pin it button at all – what do you do with the code you’ve provided? A little more of an explanation would make this post more useful. Thanks.

  3. How is everybody & every site linking to this “tutorial”?? How can this be called a tutorial? Yes, you have provided the code, but what we do with said code is completely absent. Not helpful at all, sorry, and I have been looking forever for a smart and easy way to include the Pin It button in Fancybox (which seems like a no-brainer, but I guess not).

  4. Hi everyone, I’ve updated this to hopefully add some clarity. Let me know if there are things that you are still confused on.

  5. Could you please say specifically where the code goes. I have tried all sorts of place and nothing has worked. I am assuming the jquery.fancybox.js is where the beforeShow is …but where does the code go. An example would be very helpful.

  6. I got this working a treat (I had to cheat a little and view the source of your demo page).

    I’m now trying to add twitter and facebook social buttons to fancybox – I have found this here:

    …which works in isolation – I’m struggling to combine this with the pininterest button here- any suggestions?

Leave a Reply

Your email address will not be published. Required fields are marked *