Question

（Wordpress 3.5.1）

嗨，在functions.php中，我包括以下内容：

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

然后使用以下代码创建lightbox.js：

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

现在在WordPress主题中，随着wordpress一起出现，这实际上可以在一个花哨的盒子里打开图片。

但是当我在我自己定制的主题中尝试这个时，它根本不会触发fancybox。

此处指向该网站的链接：http://goo.gl/y6qfb

任何人都可以帮助我吗？

Answer 1

您可以从此核对清单开始（可能不会出现）：

1）。您的网页没有合适的DOCTYPE（不要问我为什么），您可以在新的主题模板中修复此问题。

2）。您似乎没有使用灯箱，因此请删除此参考

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

3）。您正在将fancybox css样式表加载为脚本，因此错误

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,

...所以你需要替换这一行：

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

由此：

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

...但这取决于您注册新样式表的方式。

4）。您可能需要将您的fancybox初始化代码包装在.ready()方法中，如：

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

Answer 2

Firebug为http://jarsis.de/tground/wp-content/themes/cys/inc/lightbox/js/jquery.lightbox.js?ver=3.5.1报告404，表示Lightbox js未加载。我想这可以解释这个问题。

Firebug还报告了一个语法错误，这个错误很难解释，但与“.fancybox-wrap”有关。

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

2 个答案: