Ender-overlay is a highly configurable overlay plugin for Ender. You can easily build your own gallery or other overlay based logic on the top of this plugin. It's just 1.7 KByte (minified and gzipped).
It requires Jeesh and Morpheus for animations. Even though, you can leave Morpheus out if you are fine without animations. Currently it's tested in Chrome, Firefox, Safari, Opera and IE7+. Currently it's in beta state, please report bugs here.
I got a lot inspiration from jQuery Tools, thanks for that.
The source is hosted at Github.
Download v0.0.6Please note that these examples are degrading gracefully in IE. This is because I wanted to make them as simple as possible.
| Property | Default Value | Description |
|---|---|---|
| top | 80 | The distance from the top edge of the screen in pixels. |
| position | "absolute" | You can use absolute or fixed as a value. With absolute, the overlay will stay at the given position. With fixed it will stay in place even when you scroll. If you choose fixed, make sure to your overlay fit in the viewport, because at lower resolutions it can be a problem. |
| cssClass | "ender-overlay" | The common CSS style for your overlays. You can use this to style your overlays. |
| close | ".close" | Selector or Ender DOM object. Every matched elements inside the overlay will close the overlay on a click event. |
| trigger | null | Selector or Ender DOM object. Every matched elements will be assigned with a click event handler wich opens the overlay. If you don't set this, you need to open the overlay manually with a method call. |
| zIndex | 9999 | Must be higher than the z-index of any direct child elements of the body element. |
| showMask | true | Whether the mask should be visible or not. |
| closeOnEsc | true | Whether the overlay closes if the user hits ESC. |
| closeOnMaskClick | true | Whether the overlay closes if the user clicks the cover mask. |
| autoOpen | false | Whether the overlay opens after creation. |
| allowMultipleDisplay | false | If it's false, then all overlays are closed automaticaly when a new overlay opens. If you set this to true you can manage multiple open overlays. |
| animation | true | You can turn off the animation with this property. Please note that you have to include Morpheus to have animations. |
| startAnimationCss | { opacity: 0 } | This is the starting point of the opening animation. |
| animationIn |
{
opacity: 1,
duration: 250
}
|
Opening animation params. Passed directly to Morpheus. Please refer the docs of Morpheus for more information or check out the animation tutorials. If the mask is enabled it will inherit the animation duration automatically. |
| animationOut |
{
opacity: 0,
duration: 250
}
|
Closing animation params. Passed directly to Morpheus. Please refer the docs of Morpheus for more information or check out the animation tutorials. If the mask is enabled it will inherit the animation duration automatically. |
| mask | Default mask configuration | Mask configuration object. Please refer to the table below. |
| onBeforeOpen | You can set a callback function here. It's called just before opening the overlay. It will get the overlay object as a parameter. Please refer to the methods section how to use this. If you return with false the overlay won't open. | |
| onBeforeClose | You can set a callback function here. It's called just before closing the overlay. It will get the overlay object as a parameter. Please refer to the methods section how to use this. If you return with false the overlay won't close. | |
| onOpen | You can set a callback function here. It's called after the overlay opened. It will get the overlay object as a parameter. Please refer to the methods section how to use this. | |
| onClose | You can set a callback function here. It's called after the overlay closed. It will get the overlay object as a parameter. Please refer to the methods section how to use this. |
| Property | Default Value | Description |
|---|---|---|
| id | "ender-overlay-mask" | The id of the mask element. Only one mask element is created, no matter how much overlay you create. |
| zIndex | 9998 | Must be higher than the z-index of any direct child elements of the body element. Must be lower than the z-index of the overlays. |
| opacity | 0.6 | The opacity of the mask. |
| color | "#777" | The background-color of the mask. |
| animation | Inherited | You can turn off the animation with this property. If you don't set it explicitly, it will inherited from the overlay settings. |
| durationIn | Inherited | Fade in animation duration. If you don't set it explicitly, it will inherited from the overlay settings. |
| durationOut | Inherited | Fade out animation duration. If you don't set it explicitly, it will inherited from the overlay settings. |
The following events are supported. The event-listeners are binded to the document object. You can trigger the events this way: $(document).trigger("ender-overlay.close");
| Event name | What happens if it's triggered? |
|---|---|
| ender-overlay.close | Closes all the cover mask and all the overlays. |
| ender-overlay.closeOverlay | Closes only the overlays. The mask will stay visible. |
The $.overlay method will return the Overlay object. And you can call the following methods on it.
| Method | Description |
|---|---|
| open() | Opens the overlay. |
| close() | Closes the overlay. |
| getOverlay() | Returns the overlay element. |
| getOptions() | Returns the current overlay options. |
| setOptions(options) | You can update the options any time with this method. |
I'm Andras Nemeseri a Hungarian front-end developer. You can follow me on Twitter.
Thanks to Dustin Diaz & Jacob Thornton for Ender.