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.
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.
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:
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/shadowbox.css" />
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.
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.