How to implement the Ez Overlay lightbox outside of Wordpress:

  1. Create an HTML document and link to the Javascript and CSS files with the code labeled "links" below.
  2. 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.
  3. Assign the new Div a unique CSS Id so it can be activated by the trigger. Ie: id="my-overlay".
  4. Put whatever Html content within the Ez Overlay Div.
  5. 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.

Tips:

  1. 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.
  2. 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.
  3. 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.
  4. 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.

// ~~~~~~~~ Links ~~~~~~~~
// You will need to alter the file path here, depending on your folder structure

<link href="../style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../ez-overlay.min.js"></script>

ezFade Function:

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.

// ~~~~~~~~ ezFade(); ~~~~~~~~
onclick="ezFade('my-overlay4',800,true,100,100);"

Ez Overlay

This is an auto centering version.

onclick="ezFade('my-overlay1');"

This overlay will always stay centered in the browser,
even when resizing the window.

Open Centered Overlay

Ez Overlay

This is a fixed version with a fade delay of 1000.

onclick=ezFade('my-overlay2',1000,true);"

You can put images, swf objects or any Html you want here.

The Overlay will automatically resize to images and .swf's based on the width and height of the Html elements within it.





Ez Overlay

This is a fixed version with a custom x and y coordinate. 

onclick="ezFade('my-overlay4',800,true,100,100);"

The last two arguments are x and y.