CODEWITHSUNDEEP
javascripthtmlhoverpinterestxhtml-1.0-strict
user2226032
user2226032

Reputation: 65

Using the Pinterest hoverbutton but disabling it for certain images in XHTML 1.0 Strict

I would like to add the ability for images on my blog page to have a link to pin the image to pinterest when hovering over them.

Pinterest have a page on their helpcenter which enables you to do this. https://en.help.pinterest.com/entries/23624997-Add-a-widget-to-your-website

I have added the code to the footer of my website, and it works fine. The code I have added is:

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

The pinterest user guide suggests that where you don't want the hover button to appear, e.g. on a specific image, you amend the tag with the following attribute:

data-pin-no-hover="true"

So in that way, an image tag would look like the following, and the hover button would not appear: 

<img data-pin-no-hover="true" src="yourimage.jpg" />

I have tried to do this on my site for images which I don't want to be pinned, but it does not work.

My site, which I am developing on the squarespace platform (version 5) is in XHTML 1.0 Strict. From the research I've been able to do, it seems that the 'data-' attribute is an HTML5 attribute, and accordingly when I try and use it, that's the reason it does not work for my site.

Does anyone know a way to get this 'data-' attribute to work in XHTML 1.0 Strict?

Thanks for any advice you can give.

Upvotes: 3

Views: 3096

Answers (1)

Christopher Marshall
Christopher Marshall

Reputation: 10736

If you're using jQuery, you can still use the data-attribute as far as I know.

Something like:

if ($('img.class').data('pin-no-hover')) {
 $('.pinterestClass').hide();
}

Upvotes: 1

Related Questions