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 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?

share|improve this question

1 Answer 1

up vote 3 down vote accepted

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

share|improve this answer
1  
+1. One small addition, but important to mention: Never include jQuery in WordPress manually. It is included in WordPress by default. The core relies on the currently included version and plugin developers depend on knowing what jQuery version is used as well. –  Johannes Pille Apr 17 '13 at 10:07
    
@JohannesPille You're right. I could/should have mentioned that rather than just removing the jquery include and defining the jquery dependency for facebox.js. –  t f Apr 17 '13 at 10:10
    
Thanks tf & JohannesPille I have added your code to the functions.php but still am getting no success. I am not sure I need the example css as I think I have css styling in style.css. I based my set up of this from the examples given in the Facebox download zip.. ALSO I am definitely confused re jQuery & WordPress ... I have wp enque jquery in the head section of my header.php & some code in my functions.php.... thanks for your prompt & helpful replies & I'd be most grateful for some more help to get Facebox working for me in my WP theme! –  rpd Apr 17 '13 at 10:22
    
tf-I am actively working on this site (work in progress) and have not yet done a validation test...as to html lang=en I'm not sure..doctype is HTML5 --I had already seen the mistake in the NSlider css link (I just hadn't corrected it but I have now & will look at changing the url referencing later). Lastly I don't see the facebox code in twice...The main thing I would like is to get Facebox to work in this theme either with the functions code you gave or with code in header file (tried your working code-that didn't work for me either).With your functions code how do I use my facebox scripts? –  rpd Apr 17 '13 at 10:47
1  
Thanks tf- of course the image displays when I uploaded a target image- thanks for all your help...I'm not sure I understand the functions code or jQuery in WordPress but now I can get Facebox to work in this WP theme I can move on & try & understand these things in slow time...many thanks for all your help ;-) –  rpd Apr 17 '13 at 11:45

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.