Question

我想在 fancybox 弹出窗口中显示的每个图片上添加“Houzz Add”按钮。我将houzz提供的代码放在beforeShow函数中以显示每个图像的链接，但弹出窗口仅显示第一个图像的按钮，而其他人的简单链接重定向到Houzz.com

有什么方法可以在弹出窗口中的每个图像上添加“添加”按钮

Answer 1

您应该能够通过为动态创建每个按钮每次添加SCRIPT标记来实现此目的。这将重新运行将A标签转换为Houzz按钮的JavaScript。

Houzz服务器将通过后端CURL请求验证元数据（类似于Facebook的Like按钮），因此请确保您的FancyBox Houzz按钮指向的链接在自己的静态 HTML页面中嵌入了Houzz按钮同样。

希望这有帮助！

Web开发人员文档：http://www.houzz.com/buttonsAndBadges#houzzbutton

Answer 2

整合社交网站链接的代码，如facebook，twitter，pinterest和houzz 类似的代码也可用于集成其他按钮。

beforeShow: function () {
if (this.title) { 
    this.title += '<br />';
    //----Twitter button------//
    this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a> ';
    //----pinterest (pin it)------//
    this.title += '<a class="pin-it-button" href="http://pinterest.com/pin/create/button/?url='+encodeURIComponent(document.location.href)+'&media='+encodeURIComponent('http://absoluteimagepath.com/path/to/image/'+this.href)+'&description=Pin from ScottGale.com">'+'<img title="Pin It" src="http://assets.pinterest.com/images/PinExt.png" alt="" border="0" /></a>';
  //----Facebook like------//
    this.title += '<iframe src="//www.facebook.com/plugins/like.php?href='+this.href+'&amp;send=false&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
  //----Houzz button------//
    this.title += '<iframe width="48" scrolling="no" height="20" frameborder="0" style="border: medium none;" src="http://www.houzz.com/buttonWidget/1?url='+this.href+'&img='+this.href+'&title=YourTitle&hzid=YourHouzzID&ref=http://yourdomain"></iframe>';
}

}

Houzz在fancybox中添加按钮

2 个答案: