WordPress.org

Ready to get started?Download WordPress

Forums

jQuery Pin It Button For Images
FIX: Stop flashing on multiple hovers of the pinterest image (6 posts)

  1. Rob W
    Member
    Plugin Contributor

    Posted 9 months ago #

    In script.js (and minified version),

    find:

    $('.pinit').mouseenter(function () {
      $(this).children('.pinit-overlay').fadeIn(200);
    }).mouseleave(function () {
      $(this).children('.pinit-overlay').fadeOut(200);
    });

    Replace with:

    $('.pinit').mouseenter(function () {
      $(this).children('.pinit-overlay').stop(1,1).fadeIn(200);
    }).mouseleave(function () {
      $(this).children('.pinit-overlay').stop(1,1).fadeOut(200);
    });

    http://wordpress.org/extend/plugins/jquery-pin-it-button-for-images/

  2. sasteffl
    Member
    Posted 8 months ago #

    Hey there,

    I'm experiencing the same issue (picture flashing on and off with "Pin It" buttons) it sounds like you were but it appears the latest updates to this removed the solution you provided.

    I've tried adding the stop(1,1) code to every area I found "mouse" and "function" in the .js script but to no avail (see below).

    Any other suggestions?

    (function($){
    
                    $(document).ready( function() {
                                    var o = {
                                                    pageUrl                                : document.URL,
                                                    pageTitle                             : document.title,
                                                    pageDescription                               : $('meta[name="description"]').attr('content'),
                                                    siteTitle                                                                                : jpibfi_options.site_title,
                                                    imageSelector                                   : jpibfi_options.image_selector,
                                                    disabledClasses                                : jpibfi_options.disabled_classes,
                                                    enabledClasses                 : jpibfi_options.enabled_classes,
                                                    descriptionOption           : jpibfi_options.description_option,
                                                    usePostUrl                                                          : jpibfi_options.use_post_url == "1",
                                                    minImageHeight                              : jpibfi_options.min_image_height,
                                                    minImageWidth                                               : jpibfi_options.min_image_width
                                    }
    
                                    var discriminatorClasses = o.disabledClasses.split(';');
                                    var allowedClasses = o.enabledClasses.split(';');
    
                                    $('.jpibfi').closest('div').addClass('jpibfi_container');
    
                                    $(o.imageSelector).each(function (i) {
                                                    var e = $(this);
    
                                                    //check if the image has a discriminator class, if has, then return
                                                    if ( discriminatorClasses[0].length > 0 ) {
                                                                    for (var index in discriminatorClasses) {
                                                                                    if (e.hasClass(discriminatorClasses[index]))
                                                                                                    return;
                                                                    }
                                                    }
                                                    //check allowed classes
                                                    if ( allowedClasses[0].length > 0 ) {
                                                                    var hasAllowedClass = false;
    
                                                                    for (var z = 0; ( z < allowedClasses.length ) && !hasAllowedClass; z++ )
                                                                                                    hasAllowedClass = e.hasClass(allowedClasses[z]);
    
                                                                    if (!hasAllowedClass)
                                                                                    return;
                                                    }
    
                                                    //to identify the image when loaded
                                                    e.attr('data-indexer', i);
                                    });
    
                                    function jpibfiAddElements() {
    
                                                    $("img[data-indexer]").each(function () {
                                                                    var $image = $(this);
    
                                                                    if ( this.clientWidth < o.minImageWidth || this.clientHeight < o.minImageHeight ) {
                                                                                    $image.removeAttr( 'data-indexer' );
                                                                                    return;
                                                                    }
    
                                                                    var bookmarkUrl = "";
                                                                    if ( o.usePostUrl ) {
                                                                                    var $inputWithUrl = $image.closest("div.jpibfi_container").children("input.jpibfi").first();
                                                                                    if ($inputWithUrl.length != 0)
                                                                                                    bookmarkUrl = $inputWithUrl.attr("data-jpibfi-url");
                                                                    }
                                                                    if ( bookmarkUrl.length == 0 )
                                                                                    bookmarkUrl = o.pageUrl;
    
                                                                    var bookmarkDescription;
                                                                    switch (o.descriptionOption) {
                                                                                    case '3':
                                                                                                    bookmarkDescription = $image.attr('title') ? $image.attr('title') : $image.attr('alt');
                                                                                                    break;
                                                                                    case '2':
                                                                                                    bookmarkDescription = o.pageDescription;
                                                                                                    break;
                                                                                    case '4':
                                                                                                    bookmarkDescription = o.siteTitle;
                                                                                                    break;
                                                                    }
                                                                    if ( !bookmarkDescription )
                                                                                                    bookmarkDescription = o.pageTitle;
    
                                                                    var indexer = $image.attr("data-indexer"),
                                                                                                    bookmark = 'http://pinterest.com/pin/create/bookmarklet/?url=' + encodeURI(bookmarkUrl) + '&is_video=' + encodeURI('false') + '&description=' + encodeURIComponent(bookmarkDescription);
    
                                                                    $image.after('<div class="pinit-overlay" data-indexer= "' + indexer + '"><a href="' + bookmark + '">Pin It</a></div>');
    
                                                                    $('.pinit-overlay[data-indexer="' + indexer + '"]')
                                                                                                    .css({
                                                                                                                    height: this.clientHeight + 'px',
                                                                                                                    width: this.clientWidth + 'px'
                                                                                                    });
                                                    });
    
                                                    $('.pinit-button').click( function () {
                                                                    var index = $(this).attr("data-indexer");
                                                                    var $image = $('img[data-indexer="' + index+ '"]');
                                                                    var imageUrl = $(this).attr('href') + "&media=" + encodeURI ( $image.data('media') ? $image.data('media') : $image[0].src );
                                                                    window.open(imageUrl, 'Pinterest', 'width=632,height=253,status=0,toolbar=0,menubar=0,location=1,scrollbars=1');
                                                                    return false;
                                                    });
    
                                                    $('img[data-indexer]').mouseenter( function (). Stop(1,1). {
                                                                    var indexer = $(this).attr("data-indexer");
                                                                    var position = $(this).offset();
    
                                                                    $("div[data-indexer='" + indexer + "']")
                                                                                                    .show()
                                                                                                    .offset({ left: position.left, top: position.top });
                                                    });
    
                                                    //events work quite differently on IE8 than on more modern browsers, therefore (unfortunately) this piece of code is required
                                                    var isIE8 = typeof jpibfi_is_ie8 !== "undefined" && jpibfi_is_ie8;
    
                                                    if ( !isIE8 ) {
    
                                                                    //for modern browsers, we can simply hide the div on mouseleave event an everything is alright
                                                                    $('div[data-indexer]').mouseleave(function (). stop(1,1). {           $(this).hide();    } );
    
                                                    } else {
    
                                                                    //on IE8, we need to follow events on the image and the Pin it button
    
                                                                    //sets 100ms timeout, after which the overlay hides
                                                                    function setHideTimeout(currentObject) {
                                                                                    var idx = $(currentObject).attr('data-indexer');
                                                                                    var $div = $("div[data-indexer='" + idx + "']");
                                                                                    var timeoutId = setTimeout(function(){ $div.hide(); }, 100 );
                                                                                    $div.data('timeoutId', timeoutId);
                                                                    }
    
                                                                    //cancels overlay hiding
                                                                    function clearHideTimeout(currentObject). stop(1,1). {
                                                                                    var idx = $(currentObject).attr('data-indexer');
                                                                                    var $div = $("div[data-indexer='" + idx + "']");
                                                                                    clearTimeout($div.data('timeoutId'));
                                                                    }
    
                                                                    //we need to watch carefully the image and the pinit button
                                                                    $('img[data-indexer]').hover( function (). stop(1,1). { clearHideTimeout(this); }, function(). stop(1,1). { setHideTimeout(this); }         );
    
                                                                    $('.pinit-button').hover( function (). stop(1,1) { clearHideTimeout(this); }, function(). stop(1,1). { setHideTimeout(this); }         );
    
                                                    }
                                    }
    
                                    function jpibfiRemoveElements() {
                                                    $("div.pinit-overlay").remove();
                                    }
    
                                    $(window).load( jpibfiAddElements );
    
                                    $(window).resize ( function() {
                                                    jpibfiRemoveElements();
                                                    jpibfiAddElements();
                                    });
    
                    })
    
    })(jQuery);

    [Please use the code buttons when posting code]

  3. mrsztuczkens
    Member
    Plugin Author

    Posted 8 months ago #

    Hi, thanks for the suggestions, I'll look into that in the next version of the plugin.

    Unfortunately, it'll take a couple of days before next version of the plugin will be available because I'm doing a pretty large code redesign.

  4. sasteffl
    Member
    Posted 8 months ago #

    You're welcome, but thank you for doing all of this for us novice web-users who you make look good!

    So upon the next plugin update the flashing error will automatically update then and I can mark this off my list of To-Dos? :)

  5. mrsztuczkens
    Member
    Plugin Author

    Posted 8 months ago #

    I suggest you leave it on your to-do list and mark it off when the next version is released and you're sure it's fixed :).

  6. LeonCappel
    Member
    Posted 8 months ago #

    For a quick fix of the flickering in Safari, add the following CSS to your stylesheet:

    .pibfi_pinterest .xc_pin, .pibfi_pinterest img {
      -webkit-transform: translateZ(0);
    }

    More info on http://stackoverflow.com/questions/7582567/css-opacity-change-on-hover-flickering

    You can see the fix on my girlfriends fashion blog.

Reply

You must log in to post.

About this Plugin

About this Topic