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() {
  $('.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 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="http://pinterest.com/pin/create/button/?url='+
            encodeURIComponent(document.location.href)+
            '&media='+
            //put the path to the image you want to share here
            encodeURIComponent('http://scottgale.com/blogsamples/fancybox-pinterest/'+this.href)+
            '&description='+description+'" class="pin-it-button" count-layout="horizontal">'+
            '<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" align="absmiddle"/></a>'
            //add title information
            +'<span>'+this.title+'</span>';

      //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="http://pinterest.com/pin/create/button/?url='+
            encodeURIComponent(document.location.href)+
            '&media=http%3A%2F%2Fwww.homesburlingtonvermont.com'+
            encodeURIComponent(this.href)+
            '&description=Pin from ScottGale.com" class="pin-it-button" count-layout="horizontal">'+
            '<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';

      }
    }
  });
});
Share Button

8 thoughts on “Using Pinterest with FancyBox

  1. Brian jackson

    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 bjackson161@tampabay.rr.com

    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
    Brian

    Reply
  2. Evie

    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.

    Reply
  3. tlrox

    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).

    Reply
  4. scottgale Post author

    Hi everyone. I’ll see if I can add some more detail to this post so that it is more clear how to do it.

    Reply
  5. scottgale Post author

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

    Reply
  6. carlos

    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.

    Reply

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>