jquery - facyboxのHouzz追加ボタン

Question

ファンシーボックスポップアップに表示される各画像に「Houzz追加」ボタンを追加したい。houzz が提供するコードを beforeShow 関数に配置して、各画像へのリンクを表示しましたが、ポップアップには最初の画像のボタンと Houzz.com にリダイレクトする他の単純なリンクのみが表示されます

ポップアップのすべての画像に [追加] ボタンを表示する方法はありますか

Answer 1

ボタンを動的に作成するたびに、各ボタンの SCRIPT タグを追加で埋め込むことで、これを実行できるはずです。これにより、A タグを Houzz ボタンに変換する JavaScript が再実行されます。

Houzz サーバーはバックエンドの CURL リクエスト (Facebook の Like ボタンと同様) を通じてメタデータを検証するため、FancyBox Houzz ボタンが指しているリンクが Houzz ボタンを独自の静的HTML ページにも埋め込んでいることを確認してください。

お役に立てれば！

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>';
}

}