Adam Nowak

<p>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.</p>
<h3>Help</h3>
<p><strong>How to implement the Ez Overlay lightbox:</strong></p>
<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>
<p><strong>Tips:</strong></p>
<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>
<p><strong>ezFade Function:</strong></p>
<pre><code>onclick="ezFade('my-overlay4',800,true,100,100);"
</code></pre>
<p>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.</p>


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.

Mike Koepke

Denis de Bernardy

<p>The Auto Thickbox plugin for WordPress automatically enables thickbox on thumbnail images (i.e. opens the images in a fancy pop-up), through the use of WordPress’ built-in thickbox library.</p>
<p>In the event you’d like to override this for an individual image, you can disable the behavior by adding the ‘nothickbox’ class to its anchor tag.</p>
<h4>Thickbox Galleries</h4>
<p>By default, the auto thickbox plugin will bind all images within a post into a single thickbox gallery. That is, next image and previous image links will appear so you can navigate from an image to the next.</p>
<p>The behavior is particularly interesting when you create galleries using WordPress’ image uploader. Have the images link to the image file rather than the attachment’s post, and you’re done.</p>
<p>On occasion, you’ll want to split a subset of images into a separate gallery. Auto Thickbox lets you do this as well: add an identical rel attribute to each anchor you’d like to group, and you’re done.</p>
<p>(Note: To set the rel attribute using WordPress’ image uploader, start by inserting the image into your post. Then, edit that image, browse its advanced settings, and set “Link Rel” in the Advanced Link Attributes.)</p>
<h4>Thickbox Anything</h4>
<p>Note that thickbox works on any link, not merely image links. To enable thickbox on an arbitrary link, set that link’s class to thickbox.</p>
<h4>No thickbox</h4>
<p>In the event you want to disable thickbox on some links to images, assign it a nothickbox class.</p>
<h4>Keyboard support</h4>
<p>Thickbox supports the following keys:<br />
– Next Image: Greater Than (>) or Left Arrow<br />
– Previous Image: Less Than (<) or Right Arrow<br />
– First Image: Home<br />
– Last Image: End<br />
– Close Popup: Esc or Enter/Return</p>
<h4>Hat Translators</h4>
<ul>
<li>German: hakre</li>
<li>Portuguese/Brazil: Henrique Schiavo</li>
</ul>
<h4>Help Me!</h4>
<p>The <a href="https://wordpress.org/support/plugin/auto-thickbox" rel="ugc">Plugin’s Forum</a> is the best place to report issues.</p>


Auto Thickbox

Automatically enables thickbox on thumbnail images (i.e. opens the images in a fancy pop-up).

Ez Overlay vs Auto Thickbox