Forum Replies Created

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter froystore

    (@froystore)

    I inserted the below code right before the ending </body> tag and it works – pin it buttons show up on images upon hover.

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

    However, it obviously calls pinit.js in addition to Jetpack.

    I tried adding the below code to Jetpack within the script loader AND deleting the above code so to avoid duplicate loading of pinit.js.

    s.setAttribute('data-pin-hover', true);

    The interesting part is, by doing this, the pin it button shows up on hover as intended, but only if you click into individual post pages. The buttons do not show up when hovering over images in the homepage, for example.

    I’m currently using the first option and loading pinit.js twice on my blog (http://blog.froy.com). I’m not sure what problems are supposed to happen if you have 2 pinit.js loading, but my site seems to be fine for now. Preferably, I’d like to use the second option to avoid loading it twice AND have the pin it button show up on all pages.

    Thread Starter froystore

    (@froystore)

    Sure, happy to share.

    I use the Genesis framework with a child theme. In order to make the script work when adding it in the end of the <body> section, you have to understand that WordPress includes jquery by default but sets it in noConflict() mode. This is to prevent compatibility problems with other JavaScript libraries that WordPress can link.

    In order to make any script work in noConflict() mode without using wp_enqueue_script(), replace the $() shortcut with jQuery().

    So in my case, this did not work…

    <script type="text/javascript">
    $(document).ready(function() {
    $(".tiled-gallery-item a img").attr("nopin","nopin");
    });
    </script>

    but this did.

    <script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery(".tiled-gallery-item a img").attr("nopin","nopin");
    });
    </script>

    Thread Starter froystore

    (@froystore)

    Nvm – I figured it out! Please delete last comment if needed.

    Thread Starter froystore

    (@froystore)

    Hi Richard,

    Thank you for your suggestion!

    I tried adding the below to my footer but it seems to not add any attribute…

    <script type="text/javascript">
    $(".tiled-gallery img").attr("nopin","nopin");
    </script>

    I tried replacing ‘.tiled-gallery img’ with simply ‘img’ to see if any img tags would add the attribute at all, but no luck. Do you have any idea why the script is not applying the attribute?

    Example page: http://blog.froy.com/bond-street-loft-by-axis-mundi/

Viewing 4 replies - 1 through 4 (of 4 total)