Support » Themes and Templates » Unable to integrate Colorbox (jQuery library, not the WP plugin) into a theme

  • Resolved Sean

    (@aristophanes)


    I’ve been trying to integrate the Colorbox jQuery library into my theme, but can’t seem to get it to work at all. The Colorbox plugin for WordPress works swimmingly, but has a lot of functionality I don’t need, so I’m trying to do this manually and minimally.

    The second half of my header.php’s <head>:

    <link media="screen" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/js/colorbox/colorbox.css" />
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/colorbox/jquery.colorbox-min.js"></script>
    <script>
    	$(document).ready(function(){
    		$("a[rel='colorbox']").colorbox();
    		});
    	});
    </script>
    <?php wp_head(); ?>
    </head>

    I checked the file paths and they seem to be fine.

    The relevant img:
    <a href="..." title="..." rel="colorbox"><img src="..." /></a>

    I’m sorry I can’t link to a website as I’m working on the theme on my computer using MAMP.

    I’ve tried disabling all other plugins and removing all other js scripts in the <head>, but to no avail. jQuery is working fine on the rest of the theme.

    Thanks for reading and I’d appreciate any pointers you can give me.

Viewing 5 replies - 1 through 5 (of 5 total)
  • esmi

    (@esmi)

    Forum Moderator

    Do you get any errors?
    Are you using other javascript libraries? Ones that use the $-character? You may have to change the ‘$’ in scripts to ‘jQuery’ to make it work or declare a no-conflict rule/reserve the use of the $ for jQuery.
    (I haven’t tried Colorbox but I have used Thickbox on my blog before, which is also jQuery-based, if I’m correct. I use shadowbox now.)

    Sean

    (@aristophanes)

    Hi esmi and thijs77, thank you both for your help. I’ve been adding scripts to themes the wrong way for a while then!

    My header.php’s <head> now looks like this:

    ...
    <?php if (!is_admin()) {
    
    		wp_enqueue_script('jquery');
    
    		/* Colorbox */
    		wp_register_style('colorbox_css', get_bloginfo('template_directory') . '/js/colorbox/colorbox.css');
    		wp_enqueue_style('colorbox_css');
    		wp_register_script('colorbox', get_bloginfo('template_directory') . '/js/colorbox/jquery.colorbox-min.js');
    		wp_enqueue_script('colorbox');
    
    	}; wp_head(); ?>
    
    	<script>
    		jQuery(document).ready(function(){
    
    			jQuery("a[rel='colorbox']").colorbox();
    			});
    
    			jQuery("#menu > li").click(function() {
    				jQuery("ul", this).slideToggle(400);
    			}, function (){});
    		});
    	</script>
    
    </head>

    I’ve checked the file paths again and they’re fine. Unfortunately this didn’t fix Colorbox, and the jQuery menu above no longer works. It was working while I included jquery manually in sidebar.php where #menu lives (an earlier mistake/temporary measure), but now doesn’t work with or without that manual include. Without it, I noticed that WP also wasn’t automatically including jQuery in <head>, which is why I added wp_enqueue_script('jquery'); but again to no avail.

    So to clarify, I’ve removed manual js includes in and out of <head> and have declared and enqueued custom scripts/styles the safe way as above. I’ve tried using the jQuery notation (rather than $), and moving the contents of <script> into <body>, but the problem persists.

    Thanks for putting me on the right path.

    You have an extra set of closing parentheses in your code (line 4). Also, you can put an anonymous function wrapper around your jQuery stuff, pass in the no-conflict jQuery variable and keep using the dollar sign. Here’s the corrected code:

    <script type="text/javascript">
    
    	(function($) {
    		$(document).ready(function(){
    			$("a[rel='colorbox']").colorbox();
    			$("#menu > li").click(function() {
    				$("ul", this).slideToggle(400);
    			});
    		});
    	})(jQuery);
    
    </script>
    Sean

    (@aristophanes)

    My coder / web developer friend pointed out the stray }); after the colorbox function, and used this notation to resolve the conflict with $s:

    <script type="text/javascript">
    
        (function($) {
    
            $(document).ready(function() {
    
                $("a[rel='colorbox']").colorbox();
    
                $("#menu > li").click(function() {
                    $("ul", this).slideToggle(400);
                });
    
            });
    
        })(jQuery);
    
    </script>

    I’ve still had to manually queue jquery like so, which I thought WP did automatically?:

    wp_enqueue_script('jquery');

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Unable to integrate Colorbox (jQuery library, not the WP plugin) into a theme’ is closed to new replies.