Show Pinterest hover buttons only on images with specified class

Question

A client wants to have pinit buttons on hover over certain images on the site. I looked at the documentation on Pinterest's site and could only find how to set all images to pinit ones, with the option to turn off some images with a CSS class. But that would mean that 95% of all the images on the site would have to have a nopin class.

Is there a way I can apply a class to images like "pinthis" so that ONLY them ones have the pinit buttons attached. I noticed that you can do something like this on Wordpress but this is a custom built site.

Thanks in advance!

Edit:

This is the code I have put in the header tags as described in the Pinterest developer link above:

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js" data-pin-hover="true"></script>

This basically sets all images on the page to have pinit buttons, but I need them to only applied to images with a specific class

Adamic

I think it's possible. But for us to be able to help you, please share some of your codes. – Stellarator

Answer 1

So, one way of doing it in jQuery would be to set all images, by default, to have the attribute:

data-pin-no-hover="true"

The jQuery for this would simply be:

 $("img").attr("data-pin-no-hover", true);

Then below that you could have an additional line changing the value to false for the specific class you want to remove the attribute:

$(".pinit_img").removeAttr("data-pin-no-hover");

Philippopolis

This is a good idea and makes sense. But after testing for some reason having data-pin-no-hover="false" seems to still be ="true" regardless. It seems having data-pin-no-hover equal to anything turns it on – Adamic

How strange. Pinterest certainly haven't created the most intuitive add-in! – Philippopolis

That's what I was thinking :p – Adamic

Though, you got me thinking and changing the line where you have said "$(".pinit_img").attr("data-pin-no-hover", false);" to "$(".pinit_img").removeAttr("data-pin-no-hover");" will fix the problem and is less code than I have used in my answer. So if you change that in your answer I will set you to the correct answer – Adamic

Answer 2

Sorry for answering my own question but this is how I overcome the problem. I just wrote some JavaScript that looks for images with the class "pinthis" and applies the attribute nopin="true" to everything else.

I won't tick this answer just yet because there may be an official way to do this without having to apply nopin="true" to everything.. but it's seeming less and less likely.

Personally this is a bit of a disappointment on Pinterest's part because surely you should be telling only the items you do want to have it rather than using wasteful time iterating through all the items that don't want it. It just seems like wasteful markup to me.

Anyway, this is how I done it:

<script type="text/javascript">
    $(document).ready(function(){
        $("img").each(function(){
            if(!$(this).hasClass("pinthis")){
                $(this).attr("nopin", "true");
            }
        });
    });
</script>

Adamic

Answer 3

One more solution using jQuery:

$('img').filter(function() {
  if ($(this).closest('.main-image').length === 0) {
    $(this).attr('data-pin-no-hover', true);
  }
});

Paduasoy