Add_filter rel="prettyphoto" to WP3.4.1

Question

I know there have been a couple of questions in relation to this and had a look at them, but mine differs slightly on the problem experienced and the code. I am basically building my first theme and hoping to implement PrettyPhoto, I have been careful with enqueue'ing scripts and jQuery and have NivoSlider working ok, but have obviously missed something here, hence the question!

Firstly I have this code for the WP jQuery in the functions.php file:

function scripts_jquery_load_scripts() {
wp_enqueue_script( 'jquery' );
}    
add_action('wp_enqueue_scripts', 'scripts_jquery_load_scripts');

Then for PrettyPhoto I have the following code also in the functions.php:

function prettyphoto_load_scripts() {
wp_register_script( 'jquery.prettyphoto', get_bloginfo('template_directory').'/prettyphoto/js/jquery.prettyphoto.js',      array('jquery'));
wp_enqueue_script( 'jquery.prettyphoto' );
}    
add_action('wp_enqueue_scripts', 'prettyphoto_load_scripts');

and for the style

function prettyphoto_load_styles() {
wp_register_style( 'prettyphotocss', get_bloginfo('template_directory').'/prettyphoto/css/prettyphoto.css');
wp_enqueue_style( 'prettyphotocss' );
}    
add_action('wp_enqueue_style', 'prettyphoto_load_styles');

and finally to add the rel"prettyphoto" on the link surrounding the image

add_filter('the_content', 'addprettyphotorel', 12);
add_filter('get_comment_text', 'addprettyphotorel');
function addprettyphotorel ($content) {   
global $post;
$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
$replacement = '<a$1href=$2$3.$4$5 rel="prettyphoto['.$post->ID.']"$6>$7</a>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}

I have used Firebug to try and work out where my mistake is, I have the WP includes Jquery appearing in the head, as well as the PrettyPhoto script. Also checking the image container I have the following appearing:

<a title="European Rugby 7s-29" rel="prettyphoto[230]" href="http://localhost/wp-content/uploads/2012/08/European-Rugby-7s-29.jpg"><img title="European Rugby 7s-29" alt="European Rugby 7s-29" class="attachment-thumbnail" src="http://localhost/wp-content/uploads/2012/08/European-Rugby-7s-29-150x150.jpg"></a>

But the thumbnails still open up in a new window and not with PrettyPhoto. I have set WP_DEBUG to true in the wp-config.php file, resolved a few unrelated issue as well just incase they were having an affect.

I am running this all on a WAMP server at the moment, and planning to place online in the next day to see if this helps the issue, I know Jetpack will not work on WAMP.

If anyone one has any possible tips it would be really appreciated?

Thanks in-advance,

Ant

Additional information

Adding this as some details from Firebug, below is what is being displayed in the head of the page:

<script src="http://localhost/wp-includes/js/jquery/jquery.js?ver=1.7.2" type="text/javascript"></script>
<script src="http://localhost/wp-content/themes/director/js/responsive-images.js?ver=3.4.1" type="text/javascript"></script>
<script src="http://localhost/wp-content/themes/director/prettyphoto/js/jquery.prettyphoto.js?ver=3.4.1" type="text/javascript"></script>

I have also looked at the script tab when running Firebug, in the list responsive images appears first, then Prettyphoto and finally jQuery. I assumed that the scripts load in the order they are listed in the head?

Answer 1

Ok, after a few days trying various variations on the code I was originally using I still had no success. I took my theme right back to the bare bones, and tried the code again, I even tested the code of the TwentyEleven theme but still had no joy. I have an answer but not using the code above.

To register and enqueue the scripts I place the following in the functions.php:

<?php   

function prettyphoto_load_scripts() {
wp_register_script( 'jquery.prettyphoto', get_bloginfo('template_directory').'/prettyphoto/jquery.prettyPhoto.js',array('jquery'));       // array('jquery') = new script depends on Jquery, cause WordPress to load Jquery before the new script.
    wp_enqueue_script( 'jquery.prettyphoto' );
wp_register_script( 'enablepretty', get_bloginfo('template_directory').'/prettyphoto/enablepp.js');  // array('jquery') = new script depends on Jquery, cause WordPress to load Jquery before the new script.
    wp_enqueue_script( 'enablepretty' );
wp_register_style( 'prettyphotocss', get_bloginfo('template_directory').'/prettyphoto/css/prettyPhoto.css');
    wp_enqueue_style( 'prettyphotocss' );

}
add_action('wp_enqueue_scripts', 'prettyphoto_load_scripts',11);
?>

The second script I am registering and enqueuing called enablepretty.js is to enable prettyphoto, the contents of which are below:

jQuery(document).ready(function() { 
var items = jQuery('div#textcontent-container a').filter(function() {
    if (jQuery(this).attr('href'))  
        return jQuery(this).attr('href').match(/\.(jpg|png|gif|JPG|GIF|PNG|Jpg|Gif|Png|JPEG|Jpeg)/);
});
if (items.length > 1){
    var gallerySwitch="[customPP]";
}else{
    var gallerySwitch="";
}
items.attr('data-rel','prettyPhoto'+gallerySwitch);
jQuery("a[data-rel^='prettyPhoto']").prettyPhoto({
});

});

Note the 'div#textcontent-container is specific to my test theme, you will need to alter this to the div surrounding your gallery or content. I have used data-rel="prettyPhoto" as opposed to rel="prettyPhoto" this will avoid issues when validating HTML5.

Hope this helps someone else!

Ant

Answer 2

Make sure you initialize it aswell.

Put this in your header as test.

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>