Creating a custom image gallery in wordpress using lightbox

I spent a bit of time trying to get lightbox working in WordPress with the new, built-in image gallery shorcode that is part of wordpress.

First, get Lightbox2 from its plug-in page.  Download it, unarchive it, and put the lightbox-2 folder into the plugins folder in your WordPress installation, and use the WordPress control panel to activate it, as per the instructions.

I had issues with thumbnails not being auto-generated – there are many solutions in this thread on the WordPress site, but after making sure that all of my images were standard 24-bit PNG it seemed to work very well.

Then, get my slightly-modified media.php file – what I did was to add the lightbox code to the default photo gallery shortcode function.  Rename the file to “media.php” and put it in your wp-includes folder in your wordpress installation.  You’ll probably want to keep your old media.php file before you do this – just rename the original one media.php.bak.

For the WP hackers out there, what I did was to simply cut the wp_get_attachment_link function from the file wp-includes/post-template.php and add it to media.php in place of the original function call.  then I modified that code to add the lightbox ref=”GALLERY_NAME” property to every image attachment link returned.

Once that is finished, you can upload images via the regular “add media” tool in the editor and display them via the gallery shortcode, and viola! They will be automatically open in a lightbox-enabled slide show.

UPDATE (for WP 2.6.5):

This no longer works, because they’ve changed media.php.  The new fix is to edit your wp-includes/media.php file so that starting from line 109 is the following:

		//$link = wp_get_attachment_link($id, $size, true);
		
        $pt = str_replace(" ", "_", $pt);
        $thumb = wp_get_attachment_image($id, 
            $size='thumbnail', $icon = false); 
    
        $link= "<a href='". wp_get_attachment_url($id) . 
            "' title='$post_title' rel='lightbox[$pt]'>$thumb</a>";