Shadowbox JS

Shadowbox is an online media viewing application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can display a wide assortment of media in all major browsers without navigating users away from the linking page.

This plugin uses Shadowbox written by Michael J. I. Jackson.

Javascript libraries supported are: None, YUI, Prototype, jQuery and MooTools. Prototype and jQuery are used from the Javascript libraries included with WordPress, YUI is loaded from Yahoo APIs and Mootools is loaded from Google APIs.

This plugin can also be used as a drop in lightbox replacement, without requiring you to edit posts already using lightbox.

By default this plugin will use Shadowbox for all image links, movie links, audio links and YouTube/Google Video links including those generated by the [gallery] shortcode.

Shadowbox is licensed under the terms of the Shadowbox.js License. This license grants personal, non-commercial users the right to use Shadowbox without paying a fee. It also provides an option for users who wish to use Shadowbox for commercial purposes. You are encouraged to review the terms of the license before using Shadowbox. If you would like to use Shadowbox for commercial purposes, you can purchase a license from http://www.shadowbox-js.com/.

This plugin also makes use of the JW FLV Player. JW FLV Player is licensed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. If you would like to use JW FLV Player for commercial purposes, you can purchase a license from https://www.longtailvideo.com/players/order2.

Neither Shadowbox nor the JW FLV Player are actually included in this plugin. The plugin will ask you to download these files after installation and activation.

Please use the Shadowbox JS support forum for problems or questions with this plugin. Support questions will be ignored if left as comments on my site, through my contact form or by email. The only supported location for support questions is https://wordpress.org/tags/shadowbox-js.

This plugin is absolutely not supported when used in combination with the Thesis theme. Please do not ask for support if you are using such a configuration.

Upgrade

1. Use the plugin updater in WordPress or…
2. Deactivate the Shadowbox JS plugin
3. Delete the previous shadowbox-js folder from the /wp-content/plugins/ directory
4. Upload the new shadowbox-js folder to the /wp-content/plugins/ directory
5. Activate the Shadowbox JS plugin
6. Visit the settings page in the WordPress admin at Settings -> Shadowbox JS and install the required dependencies if needed

Usage

1. By default this plugin will add the activator attribute to all image links, movie links, audio links and YouTube/Google Video links that do not already have the activator attribute. Meaning basically, by default all images in the posts on your site will automatically be displayed using Shadowbox.

If you want more fine grain control over the links continue with the next steps. If not then stop here.

1. Create a link in your post in the following format (This link can be to pretty much anything including websites, video files, YouTube, Google Video and inline content):

<a href="http://domain.tld/directory/to/image.jpg" rel="shadowbox[album]">Image</a>

2. Be sure to include rel="shadowbox" as this activates the plugin.
3. If rel="shadowbox[album]" is included the portion listed here as [album] will group multiple pictures into an album called album. Do not use [gallery] to define an album as WordPress has a shortcode that will interfere.
4. If you are using this as a lightbox replacement you do not need to change rel="lightbox" to rel="shadowbox". Shadowbox.js supports rel="lightbox" natively.
5. If you want to make a gallery/album and only want one link to display you can use class="hidden" to hide the additional links.
6. See http://shadowbox-js.com/doc/usage.html#markup for detailed markup instructions.
7. If you are using using Shadowbox globally for all images but have an image you do not wish to use Shadowbox on use rel="nobox" in your image link.

1. Upload the shadowbox-js folder to the /wp-content/plugins/ directory or install directly through the plugin installer
2. Activate the plugin through the ‘Plugins’ menu in WordPress or by using the link provided by the plugin installer
3. Visit the settings page in the Admin at Settings -> Shadowbox JS and install the required dependencies
4. Optional: Activate the ‘Shadowbox JS – Use Title from Image’ plugin to push the title from ‘img’ tags onto the parent ‘a’ tag

Installation Instructions

1. Upload the shadowbox-js folder to the /wp-content/plugins/ directory or install directly through the plugin installer
2. Activate the plugin through the ‘Plugins’ menu in WordPress or by using the link provided by the plugin installer
3. Visit the settings page in the Admin at Settings -> Shadowbox JS and install the required dependencies
4. Optional: Activate the ‘Shadowbox JS – Use Title from Image’ plugin to push the title from ‘img’ tags onto the parent ‘a’ tag

What image file types will this plugin automatically add Shadowbox to?

bmp, gif, png, jpg, and jpeg

What movie file types will this plugin automatically add Shadowbox to?

swf, flv, f4v, dv, mov, moov, movie, mp4, asf, wm, wmv, avi, mpg and mpeg

What audio file types will this plugin automatically add Shadowbox to?

mp3 and aac

When I click on my YouTube links I see the full YouTube web site and not just my video. What is wrong?

You have probably used the wrong form of the YouTube URL. If you used something like http://www.youtube.com/watch?v=3D3kFn_3xRY that will disaply the YouTube website and not just the video. To just get the video use a link that looks like http://www.youtube.com/v/3D3kFn_3xRY.

How can I use a custom Shadowbox skin without having to worry about it being deleted during the upgrade process?

The first thing you will need to do is to download shadowbox.js source from the github repository: http://github.com/mjijackson/shadowbox/downloads

Second modify and build as required, then follow the next 2 FAQs for using a custom shadowbox.js and a custom shadowbox.css. I will not tell you how to build shadowbox, you can find that information in the source download.

You do not necessarily have to do both. It is possible to only load a custom markup or only a custom css.

I cannot seem to get the plugin to download the Shadowbox source. What can I do?

You can follow the steps outlined in the ‘How can I use my own shadowbox.js’ and ‘How can I use my own shadowbox.css?’ or you can manually download and extract as explained by the plugin.

I don’t want to downlaod the source from your site at all. How else can I get the source?

Follow the steps outlined in the ‘How can I use my own shadowbox.js’ and ‘How can I use my own shadowbox.css?’.

How can I use my own shadowbox.js?

Download or purchase Shadowbox from http://www.shadowbox-js.com/ and then…

This can be accomplished using filters. You will need to run a filter on ‘shadowbox-js’; and here is some sample code to show you how:

function custom_shadowbox_js($url) {
    return get_bloginfo('stylesheet_directory') . '/js/shadowbox.js';
}
add_filter('shadowbox-js', 'custom_shadowbox_js');

Just drop that code, modifying to your needs, in a custom plugin or mu-plugin and enjoy.

How can I use my own shadowbox.css?

Just as above this can be accomplished using filters. You will need to run a filter on ‘shadowbox-css’; and here is some sample code to show you how:

function custom_shadowbox_css($url) {
    return get_bloginfo('stylesheet_directory') . '/css/shadowbox.css';
}
add_filter('shadowbox-css', 'custom_shadowbox_css');

Just drop that code, modifying to your needs, in a custom plugin or mu-plugin and enjoy.

Can I selectively load Shadowbox on pages that need it?

Yes. However this functionality requires WordPress 2.8. If you are running WordPress 2.8 and you would like to enable this functionality visit Settings -> Shadowbox JS and set Enable Smart Loading to true.

Why isn’t this plugin working?

Check to make sure that you have <?php wp_head(); ?> in your themes header.php and <?php wp_footer(); ?> in your themes fotoer.php. See the default WordPress theme for examples. Also see the FAQ below.

This plugin has stopped working since I installed another plugin or another plugin has stopped working since I installed this plugin. What can I do?

Try changing the Javascript Library used by this plugin to something other than ‘None’ on the Shadowbox JS settings page in the WordPress admin.

Is this plugin really GPL?

The plugin itself is GPL, however Shadowbox and JW FLV Player are not GPL. Without the non GPL Shadowbox component, this plugin cannot function.

Shadowbox is licensed under the terms of the Shadowbox.js License. This license grants personal, non-commercial users the right to use Shadowbox without paying a fee. It also provides an option for users who wish to use Shadowbox for commercial purposes. You are encouraged to review the terms of the license before using Shadowbox. If you would like to use Shadowbox for commercial purposes, you can purchase a license from http://www.shadowbox-js.com/.▒

JW FLV Player is licensed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. If you would like to use JW FLV Player for commercial purposes, you can purchase a license from https://www.longtailvideo.com/players/order2.▒

Neither Shadowbox nor the JW FLV Player are actually included in this plugin. The plugin will ask you to download these files after installation and activation.