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

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

• javascript
• jquery
• html
• css
• pinterest

• I think it's possible. But for us to be able to help you, please share some of your codes. – Adrian Enriquez Commented Jul 15, 2014 at 8:46

3 Answers 3

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");

Sorry for answering my own question but this is how I overe 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>

One more solution using jQuery:

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