(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?
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);
Firebug reports a 404 for http://jarsis.de/tground/wp-content/themes/cys/inc/lightbox/js/jquery.lightbox.js?ver=3.5.1, indicating that the Lightbox js doesn't get loaded. I suppose that might explain the problem.
Firebug also reports a syntax error which is a bit hard to interpret, but has something to do with ".fancybox-wrap"