Gallery of Doodles in Lightbox 2

NerdStarGamer now has a new Gallery page that features my doodles:

Screenshot of Doodle Gallery

All of the images have been set up as a list of thumbnails which use Lightbox 2 to display large versions.

I spent a little extra time to set up Lightbox on this blog without using a plugin. I’ve been on a steady crusade to get rid of most of my plugins for quite some time. Setting up Lightbox in WordPress was fairly straightforward.

After downloading the Lightbox 2 files, I created a new directory in my template directory called lightbox and dropped all of the lightbox files into it. I then put a function call into the header.php file right before the line that reads <?php wp_head(); ?>.

<head profile="http://gmpg.org/xfn/11">
    ...some other tags...

    <?php AKM_include_lightbox(); ?>
    <?php wp_head(); ?>
</head>

The AKM_includ_lightbox(); function is just a short little function that I wrote and put in the functions.php file of my template. Here is the function:

function AKM_include_lightbox() {
    $lbDir = get_bloginfo('template_directory') . "/lightbox";

    // Echo out some file path variables for images used lightbox JS
    $output = '<script type="text/javascript">' . "\n";
    $output .= "\t" . 'var tplDir = "' . $lbDir . '";' . "\n";
    $output .= '</script>' . "\n";

    // Echo links to js and css for lightbox
    $output .= '<script type="text/javascript" src="' . $lbDir . '/js/prototype.js"></script>' . "\n";
    $output .= '<script type="text/javascript" src="' . $lbDir . '/js/scriptaculous.js?load=effects,builder"></script>' . "\n";
    $output .= '<script type="text/javascript" src="' . $lbDir . '/js/lightbox.js"></script>' . "\n";
    $output .= '<link rel="stylesheet" href="' . $lbDir . '/css/lightbox.css" type="text/css" media="screen" />' . "\n";

    echo $output;   
}

This first line of the function sets up a variable that includes the path to the Lightbox files inside my template directory. This is necessary because the lightbox.js file needs to reference the images included in the Lightbox folder. Without this part, the previous, next and close images will not show up because the link will be going to your WordPress uploads directory.

That second chunk of text in the function echos out a small bit of JavaScript into your header that simply declares the variable tplDir and sets it to the path to your LightBox installation. The last chunk of text inserts all of the necessary Lightbox JavaScript and CSS links into your header. I could have written all of this directly into the header.php file, of course, however I felt that my file was getting a bit messy and that this approach was much more clear.

We also need to make a small edit to the lightbox.js file which is going to use that tplDir variable we set. Find the line in the beginning of the file like this (around line 49):

fileLoadingImage:        'images/loading.gif',     
fileBottomNavCloseImage: 'images/closelabel.gif',

Simply change those two lines to this:

fileLoadingImage:        tplDir+'/images/loading.gif',     
fileBottomNavCloseImage: tplDir+'/images/closelabel.gif',

That completes the Lightbox 2 setup in WordPress without using a plugin. Now all you have to do is add the rel="lightbox" tag to any link you want to use Lightbox. For example, if you have a thumbnail image that links to a larger image like this:

<a href="images/full-size-image.jpg"><img src="images/thumbnail" /></a>

To add the Lightbox effect, just add in the attribute like this:

<a rel="lightbox" href="images/full-size-image.jpg"><img src="images/thumbnail" /></a>

Be sure to check out the Lightbox 2 page for more information on what you can do with it.

Comm Lab Website Design

One of my projects this summer was to get a full website out and working for the Communications Labs at Simmons College (where I work). The site is basically a resources and news area for students. The students that use these labs end up spending a whole lot of time there, and I wanted a space just for them, with the information they needed.

I actually started this project about a year ago. We had a whole bunch of documentation for the labs written, but mostly in pdf and Quark documents. My goal was to get everything online for students to have easy access. So, without much of a plan, I created a very barebones site and started adding stuff to it.

Another member of our department also creates a monthly newsletter which she then emails out to all faculty and students. It usually comes in the form of an attached pdf. I figures that I should add that to the site as well.

So, at the beginning of last summer I basically had an overgrown list of links with a very bare bones design. My goal was to create a more cohesive site, with a much more appealing design. We do offer a major in graphic design after all.

My thoughts design-wise were that I’ve really been digging the plain old black and white designs that I’ve been seeing around. I also like the grid. Given the nature of the page, I thought it was a good place to also finally figure out how to use sIFR.

I had a hard time figuring out what my secondary color would be. I’m always drawn to green and blue, but it somehow didn’t quite feel right. I wanted to use red, but that can seems a little too harsh or sterile sometimes. Then it came to me: magenta. It’s perfect for the site.

So here is what I ended up with:

Home Page

Commlab Website Home

Archives page for The Comunicator

Commlab Website Communicator Home

How to make clipping path (example documentation page)

Commlab Website Clipping Path Page

You can see the whole site here.

Statistics Doodles

Here are a couple of doodles that I’ve been working on during my statistics class.

A doodle done in statistics class

A doodle done in statistics class

Procrastination with Flickr

I have a major presentation due on Wednesday. I will be presenting the finer details of the Ruby language to my classmates. Unfortunately, since it’s a programming language class, a short rundown of Ruby syntax will not suffice. There is also the formal “spec document” that I have to write as well.

This, of course, means that I am in full-blown procrastination mode. I have added a bunch of my artwork to Flickr (as well as organizing sets and creating two new collections).

Watercolor and ink drawing on paper

I’ve also posted several photos of my final “Doodle Board” piece. I wrote about it when I was still working on the piece, but have been entirely negligent about posting the final version.

Ink drawing on four wood panels connected with hinges

Scanned photo of and ink drawing on four wood panels connected with hinges

Programming Language Design

A doodle I’ve been working on during my class, “Structure and Organization of Programming Languages.”

A Language Design Doodle



appointive
appointive
appointive
appointive