How to use Facebox in WordPress theme?

Question

I am trying to add Facebox (a lightbox type image viewer) to my WordPress theme at but presently the images are not loading. I have tried hard coding this and also using the Facebox WP Gallery plugin with no success with either method yet.

I currently have it hard coded using this code in header.php and on my custom home page template (I put the facebox files in facebox1.3 folder in my WP theme folder).

<link href="<?php bloginfo('stylesheet_url'); ?>facebox1.3/src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo('stylesheet_url'); ?>facebox1.3/css/example.css" media="screen" rel="stylesheet" type="text/css" />
<script src="<?php bloginfo('template_directory'); ?>/facebox1.3/lib/jquery.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/facebox1.3/src/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('a[rel*=facebox]').facebox({
            loadingImage : 'facebox1.3/src/loading.gif',
            closeImage   : 'facebox1.3/src/closelabel.png'
        })
    })
</script>

At the moment with this even the loading gif does not display.

What am I doing wrong?

Answer 1

// UPDATE

This should work (it does for me, at least):

• in your theme's folder, create the subfolder facebox
• put only the content of the src folder into your facebox folder (i.e., closelabel.png, facebox.css, facebox.js, loading.gif).
• put the following in your functions.php:

---

function my_facebox_scripts() {
    wp_enqueue_style(
        'facebox',
        get_template_directory_uri().'/facebox/facebox.css',
        array(), false, 'screen'
    );

    wp_enqueue_script(
        'facebox',
        get_template_directory_uri().'/facebox/facebox.js',
        array('jquery'), false, true
    );
}
add_action('wp_enqueue_scripts', 'my_facebox_scripts');

function my_facebox_jquery() {
    $path = get_template_directory_uri();
    echo <<<JQUERY
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('a.facebox-link').facebox({
            loadingImage : '{$path}/facebox/loading.gif',
            closeImage   : '{$path}/facebox/closelabel.png'
        });
    });
</script>
JQUERY;
}
add_action('wp_footer', 'my_facebox_jquery', 999999);

Please note that I changed the selector from rel=facebox to the facebox-link class. So just add class="facebox-link" to your facebox links (or customize this behavior).