Add Pinterest Button to Fancybox title

Question

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!

the script you found is for fancybx v2.x ... to make it work you need the right options for [fancybox v1.3.4](http://fancybox.net/api), for instance use `"onComplete"` instead of `beforeShow`, etc. — JFK, Feb 28 '13 at 17:55
@JFK Thanks for the reply. I understand but I'm new at js. I've been looking around at other posts(many which you have answered). I understand what `onComplete` does. But can `this.title` be used as above? Or do I need to somehow use `titleFormat`? I'm having trouble affecting the titles in any way. — juiceman, Feb 28 '13 at 21:31

JFK · Accepted Answer · 2014-01-30T18:06:45.660

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.

Doesn't work for me. It doesn't seem to make the button into a proper PinIt button so which means the pin function takes over the current window and you don't get a pin count appearing :( — NickG, Jan 30 '14 at 11:09
Nope. In Chrome the pinit button doesn't do anything and in Firefox it doesn't work at all (it doesn't even use Fancybox). — NickG, Jan 30 '14 at 17:34
@NickG : try loading the page http://fancybox.net/ first in your browsers to avoid a "403 forbidden" error for the fancybox js and css files (works for me Firefox 26.0 and Chrome Version 32.0.1700.102 m Windows) **NOTE** bear in mind that Pinterest won't be open in the jsfiddle's iframe. To see it working, go for the full screen version http://jsfiddle.net/MF7JY/show/ — JFK, Jan 30 '14 at 17:43
@NickG : another thing to bear in mind is that this solution was for Fancybox v1.3.4. To make it work in production, you should also beware of this issue http://stackoverflow.com/q/14344289/1055987 — JFK, Jan 30 '14 at 17:50

Add Pinterest Button to Fancybox title

1 Answers1