WordPress.org

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 2 years 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 2 years 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. Marcin Skrzypiec
    Member
    Plugin Author

    Posted 2 years 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 2 years 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. Marcin Skrzypiec
    Member
    Plugin Author

    Posted 2 years 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 1 year 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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • jQuery Pin It Button For Images
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic