Question

If you go to http://jbrazeal.com/galleries/bridals you can see my website with a PrettyPhoto gallery within a Wordpress theme. By default, when you click on a picture, the picture expands and gives you an option to "Tweet" or to "Like" the photos with buttons below the picture. I have installed a plugin called "prettyPhoto Media Pinterest" (https://github.com/Lawdawg/prettyphoto-media-pinterest) where it adds a "Pin It" button to each specific picture.

However, the plugin is only working for some pages and not others. It works on the page linked above, but it does not work on the other gallery pages. For instance, it does not work for any of the pictures on the page /galleries/weddings (I couldn't post the link because I am limited to two links.

Below is the PHP. I assume it is a PHP problem, but if you advise me otherwise, I can post up any other relevant information (the plugin has a javascript file as well). Additionally, you can see actual webpage as well as the plugin page as I linked above. Thanks!

<?php
add_action('init', 'ppm_pinterest_init');

function ppm_pinterest_init() {
    define('PPM_PINTEREST_URI', trailingslashit( plugin_dir_url( __FILE__ ) ) );
    define('PPM_PINTEREST_VERSION', '0.1' );

    if (!is_admin()) {
            wp_enqueue_style('ppm_pinterest', PPM_PINTEREST_URI . 'css/ppm-pinterest.css', false, PPM_PINTEREST_VERSION, 'screen');
            wp_enqueue_script('pinterest_plus', PPM_PINTEREST_URI . 'js/pinterest-plus.min.js', false, false, true);
            add_action('wp_footer', 'ppm_pinterest_footer_script', 101);
    }        
}

function ppm_pinterest_footer_script() {
    $out = '<script>' . "\n";
    $out .= 'jQuery(function($) {' . "\n";        
    $out .= '  $(document).bind(\'DOMNodeInserted\', function(event) {' . "\n";
    $out .= '    if (window.settings && !window.settings.changepicturecallbackupdated) {' . "\n";
    $out .= '      window.settings.changepicturecallback = add_pinterest_pin_it_button' . "\n";
    $out .= '      window.settings.changepicturecallbackupdated = true;' . "\n"; 
    $out .= '    }' . "\n";
    $out .= '  });' . "\n";
    $out .= '});' . "\n";
    $out .= "\n";
    $out .= 'function add_pinterest_pin_it_button() {' . "\n";
    $out .= '  var i = jQuery(\'.pp_gallery\').find(\'li\').index(jQuery(\'.selected\'));' . "\n";
    $out .= '  var m = pp_images[i];' . "\n";
    $out .= '  jQuery(\'.pp_social\').append(\'<div class="pinterest"><a href="http://pinterest.com/pin/create/button/?url=\' + encodeURI(location.href.replace(location.hash,"")) + \'&media=\' + encodeURI(m) + \'" class="pin-it-button" count-layout="none"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></div>\');' . "\n";
    $out .= '}' . "\n";
    $out .= '</script>' . "\n";

    echo $out;
}

?>
Was it helpful?

Solution

I figured it out. You can view my plugin branch here, which works now!

https://github.com/Lawdawg/prettyphoto-media-pinterest

I changed the jQuery call to:

    $out .= '  jQuery(\'.pp_social\').append(\'<div class="pinterest"><a target="_blank" href="http://pinterest.com/pin/create/button/?url=\' + encodeURI(location.href.replace(location.hash,"")) + \'&media=\' + encodeURI(m) + \'&description=\' + encodeURI(o) + \'" class="pin-it-button" count-layout="none"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></div>\');' . "\n";
$out .= '}' . "\n";
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top