Shadowbox and NextGEN Gallery Sitting in a Tree

A project I’m currently working on requires a photo gallery, luckily with WordPress there are quite a few to choose from. Of the gallery plug-ins I’ve used NextGEN Gallery is without doubt my favorite, chocked full of useful features and easy to use; you could even let a client use it! My only issue is the way the images appear in a ‘lightbox’ when you click on them, the ‘lightbox’ is great, but it’s implementation seems a little clunky.

By default NextGEN adds a chunk of code to the WordPress header which is one of my pet hates, that has to go. NextGEN uses ThickBox, which is great, but as it says on the website “Thickbox had its day” so it’s time to use an alternative. One that’s really caught my eye is Shadowbox.js.

Shadowbox.js is a fully featured media viewer that supports the webs most popular formats (images, Flash, QuickTime, Windows Media Video and FLV via JW FLV Player). Pretty much every format you really need. It also has the added bonus of being available either as a standalone script or integrated with your favourite JavaScript library (jQuery, Prototype, MooTools, Dojo, YUI and Ext). For me personally, it ticks every box… and it also looks great and works well!

So now time to bring the two together. First you should install the NextGEN gallery plug-in which you may already have it installed. Next you need view the gallery ‘options’ and select the ‘Effects’ tab. Change the “JavaScript Thumbnail effect:” to Custom and add the following code to the text box:

1
rel="shadowbox[%GALLERY_NAME%]"
Settings to change in NextGEN gallery

Change a couple of setting in the WordPress admin.

The code will be added to each thumbnail generated by the gallery. Changing the dropdown to custom also removes various bits of default NextGEN code from the header, solving that problem too.

Next it’s time to download Shadowbox.js. You have a few options on this page, as I only want to display images I selected ‘Base (standalone)’, checked the images checkbox and unchecked “Include support for using CSS selectors to select links”. I don’t plan on using shadowbox with jQuery so I didn’t add the jQuery adapter, this also keeps the filesize to a minimum.

Simple Shadowbox download page

Check your preferred settings and download.

Hit the download button to download the ZIP. Once downloaded extract the CSS, JS and images into your WordPress theme directory. All thats left to do now is add a little code to your theme.

In your header.php add:

1
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/shadowbox.css" />

Or what I prefer to do is copy the CSS from shadowbox.css into my main style.css file, this way you keep everything in one place and you minimise HTTP requests. Then add the JavaScript to your footer.php (or header.php, but I prefer to put all JS in the footer.php).

1
2
3
4
<?php if(is_single()):?>
    <script src="<?php bloginfo('stylesheet_directory'); ?>/js/shadowbox.js" type="text/javascript"></script>
    <script type="text/javascript">Shadowbox.init();</script>
<?php endif;?>

Note the use of the ‘is_single()’ WordPress conditional tag. Since I’m only planning to use Shadowbox on an individual blog post I only call it on those pages. Feel free to remove this if you plan on using it elsewhere on your site.

Shadowbox and NextGEN gallery

Great looking effects that work really well alongside NextGEN gallery.

Once those bits are added you’re all done! If you don’t see the any open, close, next, previous images make sure you are pointing to them correctly in your CSS file (since they are background images). Hurrah! Enjoy your new improved version of NextGEN Gallery complete with Shadowbox.js.

Rob Cubbon on May 2 10 / 121 Permalink

Thanks for your help. I was struggling along with Thickbox but Shadowbox is much nicer. Alex Rabe’s plugin is an absolute killer!

Standa on May 10 10 / 129 Permalink

Thanks for awesome manual! Thats I needed :)

Pablo Colme on August 4 10 / 215 Permalink

Thank you

Michael on January 6 11 / 5 Permalink

You are a lifesaver!!!! This is exactly what I needed!

webweaver on September 20 11 / 262 Permalink

Completely brilliant. Once I had the correct paths to various files sorted out, it worked like a dream. Exactly what I was looking for. Thank you!

hamza khan on February 10 12 / 40 Permalink

thanks you so much !!
nice post

Gareth James on March 4 12 / 63 Permalink

Awesome! Thanks so much… Works a treat! :)

Leslie on May 14 12 / 134 Permalink

I need help with this. It seems easy, however I am not sure how to check what I did. Everything in WordPress still looks the same and there are no changes. I must be doing something wrong. I have followed your steps word for word at least 10 times. I am not sure if you will respond, but I’d love to hear from you. Thanks in advance.

Ross on January 5 13 / 4 Permalink

This worked great I was having a lot of problems with the but this took care of all of them thank you very much

Leave a Comment

Your email will not be published. Required fields are marked *.