Question

我在网上找到了这个脚本，它将按钮添加到fancybox v2。以下是工作示例：

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

我正在使用Hubspot CMS上的某个网站。对于那些熟悉的人来说，Fancybox 1.3.4包含在Hubspot中。而且您实际上无法获得与其相关的任何文件或脚本的编辑权限。

Fancybox充当图库模块（或小部件），因此用户只需上传图片。

我想知道是否有办法修改这个原始脚本，以便在我的网站上实现fancybox 1的实现方式。

这是我的页面：

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

这是脚本：

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

非常感谢任何帮助！

Answer 1

这是一个如何使用选项title将 Pinterest 按钮添加到您的fancybox（ v1.3.4 ）titlePosition的示例titleFormat。如果您的锚点有title，那么它将沿按钮显示，否则按钮将单独显示。

此脚本基于您为v2.x找到的脚本，但调整为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>'
    }
});

参见 JSFIDDLE

注意：这适用于fancybox v1.3.4

编辑（2014年1月30日）：

新 JSFIDDLE 使用CDN进行fancybox文件，以避免在从fancybox.net服务器提供文件时出现403 forbidden错误。

将Pinterest按钮添加到Fancybox标题

1 个答案: