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 am trying to implement fancybox into WP without using a plugin. I did some research and went over few examples but there is still an issue. Any help would be greatly appreciated. Here's the code:

in functions.php:

function loadFancyBox()
{
if (is_single() && strpos($post->post_content,'class="fancy"') !== false)
{
        wp_enqueue_style('fancyStyle', get_template_directory_uri() . 'fancyBox/jquery.fancybox.css');
        wp_enqueue_script('fancyScript', get_template_directory_uri() . 'fancyBox/jquery.fancybox-1.3.4.js', array('jquery'), '', true );
}
}
add_action('wp_print_styles', 'loadFancyBox');

and in my header.php first I call jQuery and right after:

<script>
$(document).ready(function() {

$("a.fancy").fancybox({
    'transitionIn'  :   'elastic'
});

});
</script>

and finally I add class="fancy" to any img a tag. At this point any link goes to the image but fancybox is not being loaded.

Thank you

share|improve this question
    
you got a link? This sorta thing is hard to debug without seeing whats happening. First thing I would do is hardcode fancybox js & css into header.php and get it working like that first. Then when you know it's working try enqueuing the script/styles conditionally. Also check firebug console for any JS errors. –  patnz Dec 7 '11 at 7:57

2 Answers 2

If you check your console for errors as @patnz suggested, you'll likely see that $ is undefined. This is because WordPress loads jQuery in noConflict mode. Try this instead:

<script>
jQuery(document).ready(function($) {
    $("a.fancy").fancybox({
        'transitionIn'  :   'elastic'
    });
});
</script>
share|improve this answer
    
I will try to load this to my server shortly. I did check firebug and the console shows: $("a.fancy").fancybox is not a function –  beacon Dec 7 '11 at 14:34
    
Merci. This has been partially fixed. I hardcoded js file into my header.php. –  beacon Dec 7 '11 at 15:07
    
A popular alternative that is to wrap in a self invoked function passing in jQuery ala: (function($) { }(window.jQuery)); –  studioromeo Dec 7 '11 at 22:36
    
Helen, you were right about this one. It was one of the issues. –  beacon Dec 9 '11 at 23:39

Cool, so now you know the js is fine. Next you want to check if your conditional statement is working correctly. is_single() only returns true on a post page. is_singular() will return true on posts, pages, attachments. You may need to globalise $post inside the function. Adding a few echos into the function will just help you see where it's breaking.

For testing purposes I would add "|| 1==1 " to your conditional test to make it always true. Then you can make sure the paths to your scripts are being printed correctly by viewing the source code. Find them in the head and click on them which will either show you the script source or the source of a 404 page. If you get the 404 you'll need to fix location parameter in you enqueue functions.

if (is_single() && strpos($post->post_content,'class="fancy"') !== false || 1==1)
{
    //this is now always true so scripts will be printed on all pages

Also I would hook that function onto wp_head instead of wp_print_styles since you're adding a script also. So try the following as a test. Since you now know the js is working it's really just a matter of narrowing down the possibilities as to why the php isn't working.

function loadFancyBox()
{
    //first find out if you need to globalise $post;
    echo '1' . $post->post_title;//if this displays you don't need to
    global $post;
    echo '2' . $post->post_title;//if only this displays you do need to

    if (is_single() && strpos($post->post_content,'class="fancy"') !== false || 1==1)
    {
        echo 'hello';
        //since 1==1 is always true echo should display at the top of every page

        //double check these paths are being printed correctly in the source code
        wp_enqueue_style('fancyStyle', get_template_directory_uri() . 'fancyBox/jquery.fancybox.css');
        wp_enqueue_script('fancyScript', get_template_directory_uri() . 'fancyBox/jquery.fancybox-1.3.4.js', array('jquery'), '', true );
    }
}
//add_action('wp_print_styles', 'loadFancyBox');
add_action('wp_head', 'loadFancyBox');
share|improve this answer
    
This is excellent but it works only when I include my files directly. There must be an issue with wp_enqueue here. I am trying to figure it out but no luck yet. Thank you –  beacon Dec 9 '11 at 22:34

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.