WordPress.org

Support

Support » Plugins and Hacks » FIX: Stop flashing on multiple hovers of the pinterest image

FIX: Stop flashing on multiple hovers of the pinterest image

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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]

    Plugin Author Marcin Skrzypiec

    @mrsztuczkens

    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.

    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? 🙂

    Plugin Author Marcin Skrzypiec

    @mrsztuczkens

    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 :).

    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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘FIX: Stop flashing on multiple hovers of the pinterest image’ is closed to new replies.