Download Galleria and upload it to your server.

Call jQuery and then Galleria into your theme’s header.php (order matters, and if you already have a plugin calling jQuery you may need to do some tweaking, check your firebug console if things break):

<script src="/galleria/jquery-1.4.2.js" type="text/javascript"></script>
<script src="/galleria/galleria.js" type="text/javascript"></script>
<script src="/galleria/galleria.history.js" type="text/javascript"></script>


When putting a gallery into your post or page, flip to the HTML editor and change the shortcode to:

[gallery link="file" itemtag="div" icontag="span" captiontag="p"]

For more on the WordPress Gallery, see the codex.

Now in the footer, just before </body>:

<script type="text/javascript">
if (Galleria.IE6 != true) {
// If they're running ie6, don't even both. Otherwise, load theme
Galleria.loadTheme('/megan/galleria/galleria.classic.js');
$('.gallery').galleria({ //These options are personal preference, see Galleria documentation
image_crop: 'height',
transition: 'fade',
thumb_crop: false,
transition_speed: 500,
data_config: function(img) {
// will extract and return image captions from the wordpress gallery source:
return  {
title: $(img).parent().next('strong').html(),
description: $(img).parent().parent().next('p').html()
};
}
});
}

</script>


Exclude Pages from Menu

Each page will have a check-box that defaults to including it in the user’s menus. But when you have a page that you’d rather not be in the main navigation, this will quickly remove it.

Dragon Design Sitemap

A simple, friendly map of your site is useful for both users and search engines. There are a lot of them out there, but this is simple and flexible. To go further, you can create a sitemap just for search engines with Karailiev’s sitemap.

Contact Form 7

Contact Form 7 is a great plug-in for building a quick customizable contact form. You can create your own fields, drop downs, radio buttons or anything else you need and it works flawlessly. This means coding an entire contact form can be reserved for working on a very custom project.

Role Manager

When you present your site to a client, you may want to give them access to just the essentials. You may also want to create a new class of user that differs from the generic Wordpress standard user classes, and Role manager gives you control over these very specific attributes.

WP-DB-Backup

We use this to schedule database backups which are emailed directly to a gmail account where they are filed away. We haven’t needed it yet, but being able to resurrect the dead is a pretty good skill.

Search Unleashed

Extend the search plug-in utility with increased ability, and improve the presentation of the results. Search Unleashed allows for highlighting and customizing your search index which is very nice for quickly evaluating if you found what you were looking for.

Page Links To

Useful for linking to non-Wordpress pages, but integrating them into your dynamic menus.

Insensitive

Insensitive simplifies the login process by allowing usernames to become not case sensitive. Simple but appreciated.

d13slideshow

This image carousel plug-in works very well and we have used it on a number of projects. In customizing it for our own purposes we ended up adding a feature to the plugin available today.

pageMash

Ajax goodness to let you move pages around. Makes creating submenus much easier.

Chat is our main means of communication. At the very least we blip back and forth every day, and our friendship and business operations run all the better for it. Nothing waits to end up a surprise and we stay aware and on track. I personally recommend the chat client Digsby to anyone who will listen. It’s a great consolidator and keeps me notified of any updates via all my social sites and avoids the bugs that they many different chat clients have on their own.

Google Docs has proved to be our second-most relied upon means of collaboration.  It’s easy for me to write up an idea, share it with Drew and have him notified via email.  From then on we can both edit in real-time, and more often then not create goals and cross them off as we complete them. We were skeptical of it at first as it looks bare when compared to MS Word, but its behind-the-scenes goodness means you should check it out now. It also provides the ability to work on client presentations and export them the the more corporate PowerPoint format. There is also all of the features of Excel lodged into the spreadsheet, which we use for basic budgeting in a crunch.

Screenshots used to be tedious, but with JetScreenshot for PC and Skitch for Mac the process is quick enough to be part of our regular means of sharing ideas.  Instead of an in-depth description of a problem, it simply gets circled and shared. We’ve tried all sorts of screen-sharing applications, but none has proved as useful as the quick screenshot. (Tip for JetScreenshot, go to your Settings, Share Options,  and set Share to FTP as your default option. Jpgs are better than frames.)

Skype has been a life-saver when a large project needs to be done yesterday. We can leave it up and be able to swap information as easily as working in the same cubicle. To quickly switch my mic on and off I’ve adopted the use of global hotkeys.

We need to specify a place for the code to be injected. This div is what twitpic’s java looks for, and will be where your badge is written.

<div id="twitpic_badge_container_v1" style="border: 1px solid rgb(255, 255, 255); padding: 15px; background-color: rgb(255, 255, 255);"></div>

Now at the footer of your page, we put in this script to stop twitpic from writing wherever it is placed.

<script language="javascript"><!--
var old_document_write = document.write;
var twitpic_badge_data = "";
document.write = function(s) {
twitpic_badge_data += s;
}
// --></script>

After, put in your whatever code is given to you by the twitpic badge generator. In our case it looks like this:

<script type="text/javascript" src="http://twitpic.com/badge/v1.jsx?username=uncharteddesign"></script>

Follow with the end script to make document.write function as normal.

<script language="javascript"><!--
document.write = old_document_write;
// --></script>

You should be able to grab and go from that. If you would like more explanation, just let me know.

You can see the 1.2 Demo or download the zip.

Live Demo or download

The end result came from combining two ideas, a smooth scrolling div and a script that injects the large container with information from the thumbnail that you click. The script I used for the basic gallery is “Javascript image gallery using mootools” by Devin R, available here

The other part is the scrolling based on mouse movement. I modified a script from Antonio Lupetti, “Using CSS and Mootools to simulate Flash horizontal navigation effect,” the original is here.

The challenges here involved integrating the structures of HTML, CSS and JavaScript that the two methods used, and making the site accessible for users with no JavaScript and for those on cellphone browsers.  Tested working in FF 2/3, IE 6/7, BlackBerry Mobile, Opera Mini.

I’ve made a simple demo for you to take a look at or download.

Let me know if you have any questions and I’ll do my best to answer them.