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