Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
    
Have you checked the Javascript error console panel in Firebug, after clicking the prettyphoto link? –  onokazu Aug 22 '12 at 16:36
    
Are you instantiating Pretty Photo? $("a[rel^='prettyPhoto']").prettyPhoto(); –  Brian Fegter Aug 22 '12 at 16:51
    
@user940956 thanks for the tip, not used firebug for Javascript before, can you elaborate on what I am looking for? –  Ant Aug 23 '12 at 6:37
    
@BrianFegter thanks for coming back. This could be it as from what I have seen on other lightbox examples you place some code in the header.php to initialise. I have not placed any further code, and the basic tutorial I used for this did not specify any. I am willing to give this a go though as can easily delete if not working, so if I placed your sample code in script tags in the header would that be a possible solution? –  Ant Aug 23 '12 at 6:44
add comment

2 Answers

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>
share|improve this answer
    
apparently this was already in comments suggested aswell.. so did it help? –  woony Aug 23 '12 at 10:12
    
it says , "No posts were found. Sorry" –  woony Aug 23 '12 at 14:44
    
I didn't expect you to check that quick! :-) I have just recreated the gallery page again, as something I did and this time it shows the rel"prettyphoto" in the image link. use this link simples.net23.net/?page_id=13 –  Ant Aug 23 '12 at 14:47
    
can you try something and change your doctype? set it to this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">; –  woony Aug 23 '12 at 14:50
    
Changed doctype as requested –  Ant Aug 23 '12 at 14:55
show 6 more comments
up vote 1 down vote accepted

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.