Adam Nowak

This plugin is an alternative to the jQuery based lightbox systems. It was created using pure Javascript and has no dependencies on any other libraries. I created this simple lightbox after weeks of dealing with jQuery conflicts within Buddypress and WordPress. Many of the existing jQuery type lightboxes do not stop audio playback for flash/.swf playback when closing the lightbox. This plugin completely removes the overlay content from the dom to make absolutely sure your .swf file playback is stopped in all browsers.
<h3>Help</h3>
How to implement the Ez Overlay lightbox:
<ol>
<li>Copy the code for this example into the WordPress editor in the HTML window or start from scratch and go to step 2.</li>
<li>Create an Ez Overlay Div element by assigning it a with the class=”ez-overlay”, to avoid css conflicts add your target div to the body of your html and not within a sidebar or another div.</li>
<li>Assign the new Div a unique CSS Id so it can be activated by the trigger. Ie: id=”my-overlay”.</li>
<li>Put whatever Html content within the Ez Overlay Div.</li>
<li>Create a trigger for the overlay, it can be just about any Html element but needs an ‘onlclick’ attribute to activate the lightbox. See the ezFade() function below.</li>
</ol>
Tips:
<ol>
<li>Ie7 will render text elements within this overlay at a different size than Ie8. If this is an issue, just assign a width and height to your Ez Overlay target div using an inline style.</li>
<li>Avoid padding or adding margins to the Ez Overlay target div. Padding adds to a div’s width and height and will throw your overlay off-center. Just add a margin to the elements within the target div instead.</li>
<li>In the folder named ‘uncompressed-js’, there is a file named ‘ez-overlay.js’ which is a readable copy of the compressed code for tinkering.</li>
<li>The plugin removes the overlay div’s from the dom when you exit out of them, this is so that .swf playback will be halted on all browsers. Don’t panic, the plugin immediately returns them to the body of your html document at the very end.</li>
</ol>
ezFade Function:
<pre><code>onclick="ezFade('my-overlay4',800,true,100,100);"
</code></pre>
The ezFade() function accepts five arguments, the first being the target lightbox to be triggered, the second is the fade time. The third argument is to activate "fixed mode", and finally the x/y coordinates if you want you overlay to be fixed in a certain position.

Ez Overlay

A simple lightbox plugin designed to enable you to display html content within a popup window using just about any html element as a trigger.

Matt Martz

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 <a href="http://www.shadowbox-js.com/" rel="nofollow ugc">Shadowbox</a> written by <a href="http://mjijackson.com" rel="nofollow ugc">Michael J. I. Jackson</a>.
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 <a href="http://shadowbox-js.com/LICENSE" rel="nofollow ugc">Shadowbox.js License</a>. 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 <a href="http://www.shadowbox-js.com/" rel="nofollow ugc">http://www.shadowbox-js.com/</a>.
This plugin also makes use of the <a href="http://www.longtailvideo.com/players/jw-flv-player/" rel="nofollow ugc">JW FLV Player</a>. JW FLV Player is licensed under the terms of the <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="nofollow ugc">Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License</a>. If you would like to use JW FLV Player for commercial purposes, you can purchase a license from <a href="https://www.longtailvideo.com/players/order2" rel="nofollow ugc">https://www.longtailvideo.com/players/order2</a>.
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 <a href="https://wordpress.org/tags/shadowbox-js" rel="ugc">support forum</a> 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 <a href="https://wordpress.org/tags/shadowbox-js" rel="ugc">https://wordpress.org/tags/shadowbox-js</a>.
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.
<h3>Upgrade</h3>
<ol>
<li>Use the plugin updater in WordPress or…</li>
<li>Deactivate the Shadowbox JS plugin</li>
<li>Delete the previous <code>shadowbox-js</code> folder from the <code>/wp-content/plugins/</code> directory</li>
<li>Upload the new <code>shadowbox-js</code> folder to the <code>/wp-content/plugins/</code> directory</li>
<li>Activate the Shadowbox JS plugin</li>
<li>Visit the settings page in the WordPress admin at <code>Settings -> Shadowbox JS</code> and install the required dependencies if needed</li>
</ol>
<h3>Usage</h3>
<ol>
<li>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. </li>
</ol>
<h4>If you want more fine grain control over the links continue with the next steps. If not then stop here.</h4>
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):
<pre><code>&lt;a href="http://domain.tld/directory/to/image.jpg" rel="shadowbox[album]"&gt;Image&lt;/a&gt;
</code></pre>
2. Be sure to include <code>rel="shadowbox"</code> as this activates the plugin. 
3. If <code>rel="shadowbox[album]"</code> is included the portion listed here as <code>[album]</code> will group multiple pictures into an album called album. Do not use <code>[gallery]</code> 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 <code>rel="lightbox"</code> to <code>rel="shadowbox"</code>. Shadowbox.js supports <code>rel="lightbox"</code> natively. 
5. If you want to make a gallery/album and only want one link to display you can use <code>class="hidden"</code> to hide the additional links. 
6. See <a href="http://shadowbox-js.com/doc/usage.html#markup" rel="nofollow ugc">http://shadowbox-js.com/doc/usage.html#markup</a> 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 <code>rel="nobox"</code> in your image link.

Shadowbox JS

Shadowbox is an online media vieiwing application similar to Lightbox and Thickbox but with more functionality. Supports all types of media.

Ez Overlay vs Shadowbox JS