自定义Wordpress主题 - fancybox无法正常工作？

Question

(Wordpress 3.5.1)

Hi, in functions.php I've included following:

function add_lightbox_cys() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'fancybox', get_template_directory_uri() . '/inc/lightbox/js/jquery.fancybox.pack.js', array( 'jquery' ), false, true );
    wp_enqueue_script( 'lightbox', get_template_directory_uri() . '/inc/lightbox/js/jquery.lightbox.js', array('fancybox'), false, true );
    wp_enqueue_script( 'lightbox-style', get_template_directory_uri() . '/inc/lightbox/css/jquery.fancybox.css' );
}
add_action( 'wp_enqueue_scripts', 'add_lightbox_cys');

and then created the lightbox.js with following code:

(function($) { $(".fancybox").fancybox(); })(jQuery);

now in the wordpress theme twentytwelve which came with wordpress this actually works opening pictures in a fancybox.

But when I try this in my own custom made theme it does not trigger the fancybox at all.

here the link to the site: http://goo.gl/y6qfb

can anybody help me?

Answer 1

You can start with this checklist (may not be everthing) :

1). Your page doesn't have a proper DOCTYPE (don't ask me why), you can fix that in your new theme template.

2). You don't seem to be using lightbox so remove this reference

wp_enqueue_script( 'lightbox', get_template_directory_uri() . '/inc/lightbox/js/jquery.lightbox.js', array('fancybox'), false, true );

3). You are loading fancybox css stylesheet as script, hence the error

Timestamp: 31/03/2013 1:14:48 PM
Error: SyntaxError: syntax error
Source File: http://jarsis.de/tground/wp-content/themes/cys/inc/lightbox/css/jquery.fancybox.css?ver=3.5.1
Line: 2
Source Code: .fancybox-wrap, 

... so you would need to replace this line :

wp_enqueue_script( 'lightbox-style', get_template_directory_uri() . '/inc/lightbox/css/jquery.fancybox.css' );

by this :

wp_enqueue_style( 'lightbox-style', get_template_directory_uri() . '/inc/lightbox/css/jquery.fancybox.css' );

... but it depends on how you registered the new stylesheet.

4). You may need to wrap your fancybox initialization code inside the .ready() method like :

(function($) { 
  $(function(){
     $(".fancybox").fancybox();
  });
})(jQuery);