Mostra i pulsanti di passaggio del mouse su Pinterest solo per le immagini con classe specificata

Question

Un client desidera avere pulsanti pinit al passaggio del mouse su determinate immagini del sito. Ho guardato il documentation on Pinterest's site e ho potuto trovare solo come impostare tutte le immagini su quelle pinit, con la possibilità di disattivare alcune immagini con una classe CSS. Ma ciò significherebbe che il 95% di tutte le immagini sul sito dovrebbe avere una classe Nopin.

C'è un modo per applicare una classe a immagini come "pinthis" in modo che SOLO quelle abbiano i pulsanti pinit collegati. Ho notato che puoi fare qualcosa di simile su Wordpress ma questo è un sito costruito su misura.

Grazie in anticipo!

Edit:

Questo è il codice che ho messo nei tag di intestazione, come descritto nel link sviluppatore Pinterest sopra:

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

contraddistingue questo praticamente tutte le immagini sulla pagina per avere pulsanti Pinit, ma ho bisogno di loro di applicare solo per le immagini con una specifica classe

Answer 1

Così, in un modo di farlo in jQuery sarebbe quella di impostare tutte le immagini, per impostazione predefinita, ad avere l'attributo:

data-pin-no-hover="true" 

Il jQuery per questo sarebbe semplicemente:

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

Poi di seguito che si potrebbe avere una linea aggiuntiva modificando il valore su false per la classe specifica che si desidera rimuovere l'attributo:

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

Answer 2

Siamo spiacenti di rispondere alla mia domanda ma questo è il modo in cui ho risolto il problema. Ho appena scritto un codice JavaScript che cerca immagini con la classe "pinthis" e applica l'attributo nopin = "true" a tutto il resto.

Non segnerò ancora questa risposta perché potrebbe esserci un modo ufficiale per farlo senza dover applicare nopin = "true" a tutto ... ma sembra sempre meno probabile.

Personalmente questo è un po 'una delusione per la parte di Pinterest perché sicuramente dovresti dire solo gli elementi che vuoi avere, piuttosto che usare il tempo sprecato per iterare attraverso tutti gli elementi che non lo vogliono. Mi sembra uno spreco di markup.

In ogni caso, questo è come ho fatto che:

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