Houzz add button in facybox

Question

I want to add "Houzz Add" button on each image showing in fancybox popup. i placed code provided by houzz in beforeShow function to show the link with each image but popup is showing the button only for first image and simple link on others which redirect to Houzz.com

is there any way i can have the Add button on every image in popup

Answer 1

code to integrate social site links also like facebook,twitter,pinterest with houzz similar code can be used to integrate other buttons also.

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

}