Here is a small list to get you started, they are all built using the jQuery library and licensed under both MIT and GPL licenses.

ColorBox

The nice thing about ColorBox is that it works on Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8. This tool will pretty much load anything you need, it is really easy to modify at CSS level, image level, and the jQuery is pretty standard. One thing I did notice is that id tends to conflict with jquery-latest.js.

FancyBox

Great tool, updated often, lots of good documentation and examples.

Lightbox2

Lightbox is slowly becoming a standard and first choice for most developers. It is very user friendly if you are a nOOb to jQuery. Lightbox also has a very reliable WordPress plugin. You can see this plugin in in action on my portfolio.

Shadowbox.js

Shadowbox is written entirely in JavaScript and CSS and is highly customizable. This package is not jQuery (very similar), but very useful and has some nice effects. They offer both free and commercial licenses (30$-50$).

jQuery Dialog

jQuery dialog allows you to display floating windows. You can add scrollbars and drag features and they are easily customizable with minimal code.

If you have created anything unique or different with these tools, or want to recommend other alternatives please feel free to comment on this post.

If your like me, whenever you need to do something in WordPress you have not done before the first place you check is the codex. I found some basic information on adding drop boxes, but they were all form based.  I was looking for something java oriented (I need java for future design considerations).

I dug deeper online and found a few useful bits of code here and there, and managed to create a Frankenstein dropdown.

Part of the  project I’m working on is a business directory. We are using categories and sub-categories to organize all the listings. One way to search the directory is by city. We have each city defined as a sub-category to a parent called geographic. This is important, because when I’m building my dropdown I need to display each child category separately.

Here’s the code:

<ul>
 <li id="categories">
 <?php wp_dropdown_categories('title_li=&hierarchical=0&show_count=1&child_of=9'); ?>

<script type="text/javascript"><!--
 var dropdown = document.getElementById("cat");
 function onCatChange() {
 if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
 location.href = "<?php echo get_option('home');
?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
 }
 }
 dropdown.onchange = onCatChange;
--></script>
</li>
</ul>

 <!--<ul>
 <?php wp_list_categories('title_li=&hierarchical=0&show_count=1&child_of=9') ?>
 </ul>-->

Notice I use the wp_dropdown_categories function and I call my sub category by using the child argument (child_of=9) the 9 representing the parent category.

This is what it looks like

That’s it, pretty simple! Hopefully you find this useful.