Lightbox JS and K2

This entry was published from Low End Theory. You can comment here or on the original post..

I've completely stripped javascript from my site so that they stop conflicting. As I add it back a piece at a time I'll let you know how I did it. The Dillema: K2 uses prototype.js Many wordpress plugins... especially the ones that use Ajax also use prototype.js. When you activate the plugin, the line for prototype.js goes into wp_head(); in your theme header.

The Solution: You can either, edit the plugin manually... or you can just do it the way I did... and add it into the K2 header.

If you download Lightbox JS v2.0 and unzip it you will see that there are 4 javascript files in the js directory:

• effects.js


• lightbox.js


• prototype.js


• scriptaculous.js

It's quite obvious that lightbox uses scriptalicious after looking at the filenames. Assuming you already use the live search that is built into K2, the only javascript file you need to include in K2 is lightbox.js. If you do use live search, skip down the page to Step 1 below.

 <?php if ( get_option('k2livesearch') == 0 or get_option('k2livecommenting') == 0 and is_single() or !is_user_logged_in() && $comment_author != $_COOKIE['comment_author_'.COOKIEHASH] ) { ?>
        <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js.php"></script>
        <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/effects.js.php"></script> <?php } ?> 

Replace it with:

        <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js.php"></script>

        <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/effects.js.php"></script> 

Step 1. Upload lightbox.js to your js/ directory in your K2 theme folder. Step 2. Upload the css and images folder included in the Lightbox v2.0 package to your k2 theme folder. Step 3. Add these lines to your header.php:

 <link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory'); ?>/css/lightbox.css" /> 
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/lightbox.js"></script> 

Taking it another step On my site I only use the lightbox on my About page to display screenshots of my site history. Because of this I don't need to have the lightbox css or javascript on every page of the site. This only makes everyone who visits the page load more javascript and css that isn't needed.

To get around this I added a php conditional into the header to make it display only on the About page:

 <?php if (is_page(About)) { ?> <link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory'); ?>/css/lightbox.css" /> 
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/lightbox.js"></script> <?php > ?>