Skip to content

Instantly share code, notes, and snippets.

@joemcgill
Created January 2, 2014 19:54
Show Gist options
  • Save joemcgill/8225516 to your computer and use it in GitHub Desktop.
Save joemcgill/8225516 to your computer and use it in GitHub Desktop.
Automatically add Pinterest pin overlays to Wordpress blog images. This should eventually be turned into a plugin probably.
/**
* Pinterest Overlay Code
* @require jQuery 1.8
*/
var bs_pinButtonURL = "//link.to/image.png";
var bs_pinButtonHeight = 72;
var bs_pinButtonWidth = 72;
var bs_yourUrl = $(location).attr('host');
var bs_pinButtonPos = "bottomright";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
jQuery(document).ready(function ($) {
$('body').append('<img style="visibility:hidden;" class="pinimgload" src="' + bs_pinButtonURL + '" >');
$('#bs_pinOnHover').hide();
var l;
var m = bs_pinButtonHeight;
var n = bs_pinButtonWidth;
hoverCheck();
function hoverCheck() {
$('.blog-entry-content img,.entry-content img').not('.nopin,.nopin img').mouseenter(function () {
$('.pinit-wrapper').css("visibility", "hidden");
clearTimeout(l);
var a = $(this);
var b = parseInt(a.css("margin-top"), 16);
var c = parseInt(a.css("margin-left"), 16);
var d;
var e;
switch (bs_pinButtonPos) {
case 'bottomright':
d = a.position().top + b + a.outerHeight() - n - 5;
e = a.position().left + c + a.outerWidth() - m - 5;
break;
default:
d = a.position().top + b + a.outerHeight() - n - 5;
e = a.position().left + c + a.outerWidth() - m - 5;
break;
}
var f = a.attr('src');
var g = a.closest('.post,.hentry,.entry').find('.post-title,.entry-title,.entry-header');
var h = g.text().replace(/^\s+|\s+$/g,'');
if (typeof bs_pinPrefix === 'undefined') {
bs_pinPrefix = '';
}
if (typeof bs_pinSuffix === 'undefined') {
bs_pinSuffix = '';
}
pinitURL = "http://" + bs_yourUrl;
var i = '<div class=" pinit-wrapper" style="display:none;position: absolute;z-index: 9999; cursor: pointer; heigth: '+m+'px; width: '+n+'px;" ><a href="//pinterest.com/pin/create/button?url=' + pinitURL + '&media=' + f + '&description=' + bs_pinPrefix + h + bs_pinSuffix + '" style="display:block;outline:none;" target="_blank"><img class="pinimg" style="-moz-box-shadow:none;-webkit-box-shadow:none;-o-box-shadow:none;box-shadow:none;background:transparent;margin: 0;padding: 0;border:0;" src="' + bs_pinButtonURL + '" title="Pin on Pinterest" height="'+m+'" width="'+n+'"></a></div>';
var j = a.parent().is('a') ? a.parent() : a;
if (!j.next().hasClass('pinit-wrapper')) {
j.after(i);
if (typeof l === 'undefined') {
j.next('.pinit-wrapper').attr("onmouseover", "this.style.opacity=1;this.style.visibility='visible'");
} else {
j.next('.pinit-wrapper').attr("onmouseover", "this.style.opacity=1;this.style.visibility='visible';clearTimeout(bsButtonHover)");
}
}
var k = j.next(".pinit-wrapper");
k.css({
"top": d,
"left": e
});
k.css("visibility", "visible");
k.stop().fadeTo(300, 1.0, function () {
$(this).show();
});
});
$('.blog-entry-content img,.entry-content img').on('mouseleave', function () {
if ($.browser.msie) {
var a = $(this).next('.pinit-wrapper');
var b = $(this).parent('a').next('.pinit-wrapper');
l = setTimeout(function () {
a.stop().css("visibility", "hidden");
b.stop().css("visibility", "hidden");
}, 3000);
} else {
$('.pinit-wrapper').stop().fadeTo(0, 0.0);
}
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment