Monthly Archives: August 2012

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