Shadow Box for WordPress

It’s simple, it’s elegant and it works!   There are so many fancy this and super that gallery options out there for WordPress, but when it comes to it, Shadowbox JS for WordPress is one of my favorites.  It does one thing and does it very well.   That is to open media in a shadowbox.  Seems simple enough right?  And it is.

When you install Shadowbox JS it essentially takes any media link, be it an image, a url, a video, a music player, whatever…  and opens it in a shadowbox right overtop of the existing page.  This is great for several reasons.

1. You don’t move your visitor from the page they were on.
2. It just looks good.  The shadowbox gets rid of bothersome text and imagery from the page which interferes with the viewing experience.
3. It automatically creates a gallery for imgesby linking all the images together so you can click through from one to the next like a slide show.

For me this is a key way to display images on your blog posts.  Present a tidy grid of thumbs using WP build in gallery system and let shadowbox js do the rest.

Note: that this is still not the best way to present a full gallery with albums and such.  That is better suited to more advanced plugins like nextGen, but for basic few images in a post it’s great.
Note2: If you just “insert image” into the post and want to be able to show it larger via shadowbox you must make sure to click the “link to file” option within the image pallett.  If you leave that field blank so that there is not path to the orignial image, then shadowbox will not attempt to open it.  (I’ve removed the link from the flower thumbnail at the top of the page to make the point.

p.s. If you happen to be using NextGen on your site at the same time you will run into some conflict issues whereby NextGen galleries will open AND Shadowbox jS will open simultaneously.  So when someone is clicking a NextGen gallery they end up with two of the same image opening at once.   to fix this:

Go into your NextGen pallett – Gallery -> Options -> Effects
Then click on the “Link Code” tab and enter rel=”%GALLERY_NAME% nobox”

You may have some code already in there so it might look like this:
class="thickbox" rel="%GALLERY_NAME% nobox"