添加Pinterest按钮到Fancybox标题

Question

我发现这个脚本在线添加一个pin按钮到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

这是如何将Pinterest的按钮添加到您的fancybox的（V1.3.4）使用选项titlePosition和titleFormattitle一个例子。如果你的主播有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

---

编辑（二零一四年一月三十零日）：

新JSFIDDLE使用CDN作为fancybox文件以避免可能的403 forbidden错误，同时从fancybox.net服务器提供文件。