Next Prev

Light Window

After researching every single modal window, lightbox, slimbox, etc out there nothing fit the bill. Granted some of them were very nice but only fit a specific purpose, others were a nightmare on the code end, and others were just hacks of another. None of them truly supported all of the features we needed and those that were close could not be easily adapted without a bottle of Prozac near by.

Other caveats were the complete lack of ability to style and position the system, and the insane over-kill of some of the systems trying to reproduce either another desktop (As if most computer users aren't confused enough) or the reproduction of a popup window (Show me someone who likes popup windows...). Lastly, most people didn't actually test for their media types and how they behaved in other browsers and operating systems (Yes the movies and Flash work in Firefox for the Mac).

Web 2.0 Box Generator

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<base href="http://www.ajaxdaddy.com/web20/prototype/lightwindow/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
	<title>LightWindow Samples</title>
	
	<link href="css/lightWindow.css" rel="stylesheet" type="text/css" />
</head>

<body>
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/lightWindow.js"></script>
<h1>LightWindow Samples</h1>
<ul>
	<li><a href="http://www.rubyonrails.com/" class="lWOn" title="Ruby on Rails" caption="One of my favorites, and really it should be one of yours."><strong>Website Example</strong> - Preview any website from yours!</a></li>
	<li><a href="http://www.aboututila.com/Photos/AdamLaverty/Creature-Caribbean-Reef-Octopus.JPG" class="lWOn" title="Bob, Donna and my son Kote" author="My Wife" caption="Three of some of the most important people in my life."><strong>External Image</strong> - An Image pulled from an External Source.</a></li>
  <li><a href="http://images.apple.com/movies/newline/the_number_23/the_number_23-tlr1_h.640.mov" class="lWOn" params="lWWidth=640,lWHeight=288" ><strong>Quicktime Movie Example</strong> - Watch a movie!</a></li>
	<li><a href="http://www.ready.gov/business/_downloads/sampleplan.pdf" class="lWOn"><strong>PDF Example</strong> - See how you can pull up a PDF?</a></li>	
</ul>

</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Nancy Raskauskas

2009-06-18 15:24:52

Awesome. You broke this down and made Lightwindow so easy to understand. Now if I could just get it to actually show up on my client's website. It works in Dreamweaverand Browser Preview.

Quoc

2009-04-16 03:22:08

excellent...

Amit

2008-11-11 22:35:55

i want to open a .aspx form using light window on click event of button, because i need to pass query string for that form from server side.

Francis

2008-10-17 00:59:56

I need to do strict HTML, and "params" is not a standard parameter for the tag, how can I doo ?

Mark

2008-07-06 14:28:16

looks cool