Показывать кнопки наведения Pinterest только на изображениях с указанным классом

клиент хочет, чтобы кнопки pinit зависали над определенными изображениями на сайте. Я посмотрел на документация на сайте Pinterest и мог только найти, как установить все изображения на pinit, с возможностью отключить некоторые изображения с классом CSS. Но это означало бы, что 95% всех изображений на сайте должны иметь класс nopin.

есть ли способ применить класс к изображениям типа "pinthis", чтобы только к ним были прикреплены кнопки pinit. Я заметил, что вы можете сделать что-то подобное на Wordpress, но это пользовательский сайт.

спасибо заранее!

изменить:

Это код, который я поместил в теги заголовка, как описано в ссылке разработчика Pinterest выше:

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

это в основном устанавливает все изображения на странице с кнопками pinit, но мне нужно, чтобы они применялись только к изображениям с определенным классом

8
css html javascript jquery pinterest

2 ответов

таким образом, одним из способов сделать это в jQuery было бы установить все изображения, по умолчанию, чтобы иметь атрибут:

data-pin-no-hover="true"

jQuery для этого будет просто:

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

затем ниже, вы можете получать дополнительную строку меняем значение на false для конкретного класса, который вы хотите удалить атрибут:

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

извините за ответ на мой собственный вопрос, но именно так я преодолеваю проблему. Я просто написал JavaScript, который ищет изображения с классом "pinthis"и применяет атрибут nopin=" true " ко всему остальному.

Я пока не буду отмечать этот ответ, потому что может быть официальный способ сделать это, не применяя nopin="true" ко всему.. но это кажется все менее и менее вероятным.

лично это немного разочарование со стороны Pinterest потому что, конечно, вы должны говорить только те элементы, которые вы хотите иметь, а не использовать расточительное время, повторяя все элементы, которые этого не хотят. Мне кажется, это расточительная наценка.

в любом случае, вот как я это сделал:

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