WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Unable to integrate Colorbox (jQuery library, not the WP plugin) into a theme (6 posts)

  1. Sean
    Member
    Posted 3 years ago #

    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.

  2. esmi
    Forum Moderator
    Posted 3 years ago #

  3. thijs77
    Member
    Posted 3 years ago #

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

  4. Sean
    Member
    Posted 3 years ago #

    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.

  5. jamesinc
    Member
    Posted 3 years ago #

    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>
  6. Sean
    Member
    Posted 3 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic