1

我在网上找到了这个脚本，它在fancybox v2 中添加了一个pin it 按钮。这是工作示例：

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>

任何帮助是极大的赞赏！

4

1 回答 1

1

这是一个示例，说明如何使用选项和. 如果你的锚点有一个，那么它将沿着按钮显示，否则按钮将单独显示。titletitlePositiontitleFormattitle

此脚本基于您为 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 文件，以避免403 forbidden在从 fancybox.net 服务器提供文件时可能出现的错误。

于 2013-03-01T19:03:27.913 回答