Basic Configuration Tutorial

Below you can see the overlay triggers. You can open up the overlays by clicking on them.

Undercover The Raid The Price of Information

Include Jeesh and Morpheus

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.

Creating HTML and CSS for the overlays and triggers

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.

Add your triggers

<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>

Build your overlays

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>

Style your overlays

You can use any CSS and HTML you want, but you must hide your overlay initially and you should define the width of the overlay with CSS explicitly. The overlay class will try to guess the width, but it might fail.

.ender-overlay {
    display: none;
    width: 600px;
    background: #c8e1ff;
}
...

Control your overlays

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();
    });
});

Further information

Please read the documentation on configuration here.

Undercover

Undercover

by Szabolcs Toth

This photo was taken on November 29, 2010 in Russian Hill, San Francisco, CA, US, using a Canon EOS 40D.

Strobist info: one bare Yongnuo YN560 @1/4 on the low left, triggered by optical slave

Tags

  • San Francisco
  • CA
  • sf
  • fun
  • parody
  • crime
  • sunglasses
  • retro
  • strobist

View all sizes on Flickr

Licence

Request to license _Nec's photos via Getty Images: here

© All Rights Reserved

The Raid

The Raid

by Szabolcs Toth

This photo was taken on November 29, 2010 in Telegraph Hill, San Francisco, CA, US, using a Canon EOS 40D.

Strobist info: bare YN560 @ 1/2 from the left
Triggered with optical slaves

Tags

  • San Francisco
  • CA
  • sf
  • fun
  • parody
  • crime
  • sunglasses
  • retro
  • strobist
  • banana
  • gun

View all sizes on Flickr

Licence

Request to license _Nec's photos via Getty Images: here

© All Rights Reserved

The Price of Information

The Price of Information

by Szabolcs Toth

This photo was taken on December 12, 2010 in Financial District South, San Francisco, CA, US, using a Canon EOS 40D.

Strobist info: YN560 bare @ 1/8 from the left,
YN560 through white umbrella from the right @ 1/4 Triggered with optical slaves

Tags

  • San Francisco
  • CA
  • sf
  • fun
  • parody
  • crime
  • sunglasses
  • retro
  • strobist
  • murder
  • scene
  • CSI

View all sizes on Flickr

Licence

Request to license _Nec's photos via Getty Images: here

© All Rights Reserved