Below you can see the overlay triggers. You can open up the overlays by clicking on them.
The following Ender packages are the requirements:
Jeesh,
Morpheus and
Ender bridge for Morpheus.
You can download and include them simply.
Or if you are familiar with NPN you can build all the pre-requirements and ender-overlay into one file:
npm build ender-overlay
To use npm, you will need to install node.js and npm.
You need to create all the HTML and CSS codes for your overlays and triggers. This way you can design every kind of overlays and won't hit stupid built-in walls. You can check the source of this page if you need some idea.
Because of this, you can put picture, pure HTML content, iframe into your overlay. You can even load the content with AJAX.
<a id="trigger-one" class="thumbs">
<img src="http://path.to.your.image" alt="Undercover" width="100" height="100">
</a>
<a id="trigger-two" class="thumbs">
<img src="http://path.to.your.image" alt="The Raid" width="100" height="100">
</a>
Keep in mind that you need to add "close" button manually (if you want). You can place the hidden overlays anywhere you want.
<div id="overlay-one" class="ender-overlay clr">
<a class="close">Close</a>
<h1>First Overlay</h1>
...
</div>
<div id="overlay-two" class="ender-overlay clr">
<a class="close">Close</a>
<h1>Second Overlay</h1>
...
</div>
You can use any CSS and HTML you want, but you should hide your overlay initially and define the width of the overlay.
.ender-overlay {
display: none;
width: 600px;
background: #c8e1ff;
}
...
There is no automatic trigger to overlay assignment, so you need to control your overlays manually. This will give you flexiblity and it's preaty easy to do.
$(document).ready(function () {
// init overlays
// init with trigger selector
$("#overlay-one").overlay({
trigger: "#trigger-one"
});
// Overlay objects are returned
// check out the documentation for supported methods
var ovrTwo = $("#overlay-two").overlay();
// you have to assign events manually
$("#trigger-two").click(function (e) {
e.preventDefault();
ovrTwo.open();
});
});
Please read the documentation on configuration here.