WordPress.org

Ready to get started?Download WordPress

Forums

jQuery Pin It Button For Images
Fancybox Support (5 posts)

  1. mobe
    Member
    Posted 1 year ago #

    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/

  2. mrsztuczkens
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  3. mobe
    Member
    Posted 1 year ago #

    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.

  4. mrsztuczkens
    Member
    Plugin Author

    Posted 1 year ago #

    Thanks, I'll look into that.

  5. scottgale
    Member
    Posted 4 months ago #

    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/

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic