Search code examples
fancyboxpinterest

Add Pinterest Button to Fancybox title

I found this script online that add a pin it button to fancybox v2. Here is the working example:

http://scottgale.com/blogsamples/fancybox-pinterest/index.html

Im working on a site on the Hubspot CMS. For those who are familiar, Fancybox 1.3.4 comes included with Hubspot. And you really don't get editing access to any of the files or scripts associated with it.

The Fancybox works as a gallery module (or widget) so users can just upload images.

I was wondering if there is a way to modify this original script to work with how fancybox 1 is implemented on my site.

Here is my page:

http://www.signdealz.com/gallery-test/

Here is the script:

<script type="text/javascript">
        //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>';

                    }
                }
            });
        });
    </script>

Any help is greatly appreciated!

Solution

  • This is an example of how to add the Pinterest button to your fancybox's (v1.3.4) title using the options titlePosition and titleFormat. If your anchor has a title then it will be displayed along the button, otherwise the button will be displayed alone.

    This script is based on the script your found for v2.x but tweaking to options for v1.3.4. 

    $(".fancybox").fancybox({
    "titlePosition": "inside",
    "titleFormat": function () {
        return this.title ? 
              '<div class="myPint" style="height: 26px"><a href="http://pinterest.com/pin/create/button/?url='+
               encodeURIComponent(document.location.href)+
              '&media='+
               encodeURIComponent('http://scottgale.com/blogsamples/fancybox-pinterest/'+this.href)+
              '&description='+this.title+'" class="pin-it-button" count-layout="horizontal">'+
              '<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" align="absmiddle"/></a>'+
              '<span>'+this.title+'</span></div>' 
              : 
              '<div class="myPint" style="height: 26px"><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>'+
              '<span>&nbsp;</span></div>'
    }
});

    See JSFIDDLE

    NOTE : this is for fancybox v1.3.4

    EDIT (Jan 30, 2014) :

    New JSFIDDLE using CDN for fancybox files to avoid possible 403 forbidden errors while serving the files from fancybox.net server.