Title: Fancybox Support
Last modified: August 20, 2016

---

# Fancybox Support

 *  [mobe](https://wordpress.org/support/users/mobe/)
 * (@mobe)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/fancybox-support/)
 * I want to use this plugin with fancybox lightbox script. The Full images in the
   fancybox lightbox have the CSS Class “fancybox-image”.
 * I tried using image selector -> img and Enabled classes -> fanxybox-image but
   I don’t get the Pin it Button in the Full Image Fancybox View.
 * Any solution?
 * [http://wordpress.org/extend/plugins/jquery-pin-it-button-for-images/](http://wordpress.org/extend/plugins/jquery-pin-it-button-for-images/)

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Plugin Author [mrsztuczkens](https://wordpress.org/support/users/mrsztuczkens/)
 * (@mrsztuczkens)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/fancybox-support/#post-3574074)
 * To be honest, for now there isn’t any solution for your problem in the plugin
   itself. The image (`img` tag to be precise) in the lightbox doesn’t exist when
   the site is loaded (it’s created dynamically once you click the image), therefore
   jQuery selector can’t catch it when the page is loading.
 * I will take a look at this issue in more detail and maybe I’ll figure out a solution
   in one of the next versions of the plugin, but for now, there isn’t anything 
   you can do about it. Sorry.
 *  Thread Starter [mobe](https://wordpress.org/support/users/mobe/)
 * (@mobe)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/fancybox-support/#post-3574093)
 * Hi,
    thanks for the quick reply. Too bad to hear there is no solution at the 
   moment. Hope you find a way to use this plugin with fancybox.
 * For now, I use the regular pin button below the image in the fancybox description
   based on this snippets:
    [http://jsfiddle.net/G5TC3/](http://jsfiddle.net/G5TC3/)
   [http://stackoverflow.com/questions/9352021/how-can-i-rerender-pinterests-pin-it-button/13434570#13434570](http://stackoverflow.com/questions/9352021/how-can-i-rerender-pinterests-pin-it-button/13434570#13434570)
 * I came up with this:
 *     ```
       .fancybox({
               beforeShow: function () {
                   if (this.title) {
   
       				// Add Pinterest button
       				this.title = '<a id="pinbutton" data-pin-config="beside" href="//pinterest.com/pin/create/button/?url=' + document.location.href + '&media=' + this.href + '&description=via myDomain.com" data-pin-do="buttonPin" target="_blank" ><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a><br />' + this.title ;
   
       			}
               },
               afterShow: function() {
       			// Render pin button
       			var element = document.getElementById('pinbutton');
       			(function(x){ for (var n in x) if (n.indexOf('PIN_')==0) return x[n]; return null; })(window).f.render.buttonPin(element);
               },
               helpers : {
                   title : {
                       type: 'inside'
                   }
               }
           });
       ```
   
 * Perhaps it gives you some inspiration, as the pin button gets rendered explicit
   this way, too.
 *  Plugin Author [mrsztuczkens](https://wordpress.org/support/users/mrsztuczkens/)
 * (@mrsztuczkens)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/fancybox-support/#post-3574199)
 * Thanks, I’ll look into that.
 *  [scottgale](https://wordpress.org/support/users/scottgale/)
 * (@scottgale)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/fancybox-support/#post-3574363)
 * Hey Guys, I wrote a tutorial on the JS way of doing this. You could just drop
   some JS into where you need to edit. Here is an example of how to do it if you’re
   still stuck: [http://scottgale.com/using-pinterest-with-fancybox/2012/08/15/](http://scottgale.com/using-pinterest-with-fancybox/2012/08/15/)

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Fancybox Support’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/jquery-pin-it-button-for-images.svg)
 * [jQuery Pin It Button for Images](https://wordpress.org/plugins/jquery-pin-it-button-for-images/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/jquery-pin-it-button-for-images/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/jquery-pin-it-button-for-images/)
 * [Active Topics](https://wordpress.org/support/plugin/jquery-pin-it-button-for-images/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/jquery-pin-it-button-for-images/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/jquery-pin-it-button-for-images/reviews/)

## Tags

 * [jquery](https://wordpress.org/support/topic-tag/jquery/)
 * [pin it](https://wordpress.org/support/topic-tag/pin-it/)

 * 4 replies
 * 3 participants
 * Last reply from: [scottgale](https://wordpress.org/support/users/scottgale/)
 * Last activity: [12 years, 2 months ago](https://wordpress.org/support/topic/fancybox-support/#post-3574363)
 * Status: not resolved