How to use Facebox in WordPress theme?

// 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).

Related Posts: