title: jQuery lightbox(featherlight) how to run beforeOpen and afterOpen event
body: <p>I am working with this jQuery lightbox which is <a href="https://github.com/noelboss/featherlight" rel="nofollow">featherlight</a> and don't understand how to fire bellow events as I am not good so I am hopping someones help:</p>
  
  <p><strong>Before Open:</strong></p>
  
  <pre><code>beforeOpen: function(event){
  
  }
  </code></pre>
  
  <p><strong>After Open:</strong></p>
  
  <pre><code>afterOpen: function(event){
  
  }
  </code></pre>
  
  <p><br>
  <strong>My Code Work:</strong></p>
  
  <pre><code>&lt;button id="openbox" href="#fl1"&gt;Load Lightbox on click event&lt;/button&gt;
  
  &lt;div class="lightbox" id="fl1"&gt;
      &lt;h2&gt;Delete Item&lt;/h2&gt;
      &lt;div class="row"&gt;
          &lt;div class="twelve columns"&gt;
              &lt;strong&gt;Are you Sure?&lt;/strong&gt;
              &lt;br&gt;blubblub?
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="right"&gt; &lt;a href="#" class="btn btn_gray no text_none" id="close_button"&gt;Close&lt;/a&gt;
      &lt;a href="#" class="btn btn_red text_none"&gt;Yes&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  $('#openbox').click(function() {
      $.featherlight('#fl1');
  });
  </code></pre>
  
  <p>My Fiddle: <a href="http://jsfiddle.net/g68bZ/29/" rel="nofollow">http://jsfiddle.net/g68bZ/29/</a>
  <br><br></p>
  
  <p>Thanks.</p>