Support » Plugin: jQuery Pin It Button for Images » Fancybox Support

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author mrsztuczkens

    (@mrsztuczkens)

    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.

    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://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

    (@mrsztuczkens)

    Thanks, I’ll look into that.

    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/

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Fancybox Support’ is closed to new replies.