Wyświetlenie przycisków hover na Pinterest tylko w przypadku obrazów o określonej klasie

Question

Klient chce mieć przyciski pinit po najechaniu kursorem na niektóre obrazy w witrynie. Spojrzałem na documentation on Pinterest's site i mogłem tylko znaleźć sposób na ustawienie wszystkich zdjęć na pinitów, z opcją wyłączenia niektórych zdjęć z klasą CSS. Oznaczałoby to jednak, że 95% wszystkich obrazów na stronie musiałoby mieć klasę nopin.

Czy istnieje sposób, w jaki mogę zastosować klasę do obrazów takich jak "pinthis", aby TYLKO te miały dołączone przyciski pinit. Zauważyłem, że możesz zrobić coś takiego w Wordpressie, ale jest to strona zbudowana na zamówienie.

Z góry dziękuję!

Edit:

Jest to kod mam umieścić w znacznikach nagłówków jak opisano w linku dewelopera Pintereście powyżej:

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

Zasadniczo ustawia wszystkie obrazy na stronie, aby mieć pinit przycisków ale trzeba je stosować wyłącznie do obrazów z konkretnej klasy

Answer 1

Więc jeden sposób to zrobić w jQuery byłoby ustawić wszystkie obrazy, domyślnie mają atrybut:

data-pin-no-hover="true" 

JQuery za to byłoby po prostu:

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

Następnie poniżej, że można mieć dodatkową linię zmieniając wartość false dla konkretnej klasy chcesz usunąć atrybut:

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

Answer 2

Przepraszamy za odpowiedź na własne pytanie, ale w ten sposób pokonuję problem. Właśnie napisałem JavaScript, który szuka obrazów z klasą "pinthis" i stosuje atrybut nopin = "true" do wszystkich pozostałych.

Nie zaznaczę jeszcze tej odpowiedzi, ponieważ może istnieć oficjalny sposób, aby to zrobić bez konieczności stosowania nopin = "true" do wszystkiego ... ale wydaje się, że coraz mniej prawdopodobne.

Osobiście jest to trochę rozczarowujące ze względu na Pinterest, ponieważ na pewno powinieneś mówić tylko o przedmiotach, które chcesz mieć, a nie marnować czasu na iterowanie przez wszystkie przedmioty, które tego nie chcą. Po prostu wydaje mi się to marnotrawstwem.

W każdym razie, jest to w jaki sposób to zrobić:

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