Writing a custom jQuery script

Now, in the root of our js directory, let's create a new custom-jquery.js file and also be sure to include it in our header.php file, under our ColorBox includes as follows:

wp_enqueue_script('custom-jquery', get_bloginfo('stylesheet_ directory') . '/js/custom-jquery.js', array('jquery'), '20100510' );

Get set for some jQuery fun now. Since we've gone through the trouble of hand including the ColorBox plugin into our WordPress theme, we might as well make sure it can load up images in addition to our registration form.

To ensure that ColorBox only loads up images, and not every link on the page, we'll think of some examples back to Chapter 2, Working with jQuery in WordPress, and do a little creative selecting. We'll add this rule to our custom-jquery.js file:

jQuery(function(){

jQuery(".entry-content a:has(img)").colorbox({height:"98%"}); });//end docReady

This selection only works on tag links that are in posts, inside the .entry class, that have thumbnail img tags. No other links will activate ColorBox.

Now, to get the registration page to launch ColorBox, we'll be a bit more clever. While I've added a .registration class, I don't want to rely on it to launch ColorBox. The only link that should trigger the modal window is a link to the registration form, so I'll be sure to select for that. In my cb-registration.js file, inside my document ready function and after my image select colorbox function, I'll add this script:

.colorbox({iframe:true, width:"50 0px", height: "600px"});

That particular jQuery selector will make sure that again, only links that contain (that's what the asterisk * is for) the word register in the href attribute will trigger the ColorBox modal window, in ColorBox's iframe mode.

You'll notice that I also used ColorBox's available parameters to set a constrained height and width for the registration form's modal box.

Now, only our Registration links and image links with thumbnails launch ColorBox:

7 Days to Profitable Blogging

7 Days to Profitable Blogging

Learn The Simple Blueprint To Successfully Starting a Profitable Blog In Just 7 Days? MOST blogs fail because their owners start out badly, and continue to make mistakes. By the time they realize what's gone wrong, they would be quicker restarting!

Get My Free Ebook


Post a comment