topical media & game development

talk show tell print

lib-flow-example-overlay.htm / htm



  <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html><head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  
           
          
  <!-- googleapis provide it fast and gzipped -->
  <script src="lib-flow-example-files-jquery.js"></script>        
   
  
  <!-- include overlay script -->
  <script src="lib-flow-example-files-jquery-002.js"></script>
  <link rel="stylesheet" type="text/css" href="lib-flow-example-files-overlay-minimal.css">
  
  <!-- make all links with rel attribute to open overlays -->
  <script>
  
  $(function() {                
          $("button[rel]").overlay();                        
  });
  </script>
  
  <!-- a button that triggers overlay. rel- attribute is a jQuery selector to the overlay -->
  </head>
  <body>
  <button type="button" rel="#overlay">Open overlay</button>
  
  <!-- overlayed element, which is styled with external stylesheet -->
  <div overlay="http://www.flowplayer.org/tools/img/overlay/white.png" style="background-image: none;" class="overlay" id="overlay"><div class="close"></div> 
  
          <!-- here is the content for overlay, can be anything -->
          <h2 style="margin: 10px 0pt;">Here is my overlay</h2>
          
          <p style="margin: 0px 20px 0pt 0pt; float: left;">
                  <img src="lib-flow-example-files-tools.png">
          </p>
          
          <p>
                   Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
                   per inceptos himenaeos. Donec lorem ligula, elementum vitae, 
                   imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
          </p>
          
  </div>
  
  <img style="border: 0px none ; position: absolute; width: 710px; display: none;" src="lib-flow-example-files-white.png"></body></html>
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.