FIX: Stop flashing on multiple hovers of the pinterest image

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]

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

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.