Implementing FancyBox

1 Views

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:

Read More
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

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. 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>

  2. 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');