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

Download code Visit demo

Tags: lightbox

<< Ticker Tape Dragable Content >>

Light Window demo

Changes to the code below will update the demo above in real time.

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

<title>LightWindow Demo</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="robots" content="index, follow" />
	
    
    <link rel="stylesheet" type="text/css" href="css/default.css" />
    <link rel="stylesheet" type="text/css" href="css/lightwindow.css" />
    
	
	<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>

</head>

<body>

<h1 style="color: #FFFFFF;">LightWindow v2.0 <span>Demos</span></h1>
				<p><small>NOTE: </small>I use some large example files here for the media, hence it is best that your browser window is larger than 800px for these demos.</p>
				<h2>Media <span>Movies, Flash, PDF's... just link directly to the file!</span></h2>
				<p>
					
					
					<a href="http://images.apple.com/movies/dreamworks/transformers/transformers-tlr4_h.640.mov" class="lightwindow page-options" params="lightwindow_width=640,lightwindow_height=288" ><strong>Apple.com Trailer</strong> - Transformers, more than meets the eye!</a>

<a href="http://www.kayotix.com/av/video/wmv/canon/canon_what_a_picture.wmv" class="lightwindow page-options" params="lightwindow_width=300,lightwindow_height=288,lightwindow_loading_animation=false,lightwindow_iframe_embed=true" ><strong>WMV Example</strong> - Even Windows Media Player!</a>

<a href="gallery/header2.swf?scale=noscale&amp;tag1=Sooth Your Mind &amp; Body&amp;tag2=Justice Through Integrity&amp;tag3=Helping Injured Victims&amp;tag4=Experience You Can Trust" class="lightwindow page-options" params="lightwindow_width=843,lightwindow_height=324" title="Preview: Doesn't your masthead look perdy?"><strong>Single SWF Example</strong> - Because I <strong>Love</strong> Flash...</a>
                    
					<a href="gallery/header.swf?scale=noscale&amp;tag1=Sooth Your Mind &amp; Body&amp;tag2=Justice Through Integrity&amp;tag3=Helping Injured Victims&amp;tag4=Experience You Can Trust" class="lightwindow page-options" rel="Flash Gallery[Headers]" params="lightwindow_width=800,lightwindow_height=345" title="Gallery: Doesn't your masthead look perdy?" author="Einstein Industries" ><strong>SWF Gallery</strong> - Any media can now be used in a GALLERY!</a>
					<a href="gallery/header2.swf?scale=noscale&amp;tag1=Sooth Your Mind &amp; Body&amp;tag2=Justice Through Integrity&amp;tag3=Helping Injured Victims&amp;tag4=Experience You Can Trust" class="lightwindow hidden" rel="Flash Gallery[Headers]" params="lightwindow_width=843,lightwindow_height=324" title="Gallery: The second masthead is nice too..." author="Einstein Industries" >Header #2</a>
					<a href="gallery/header3.swf?scale=noscale&amp;tag1=Sooth Your Mind &amp; Body&amp;tag2=Justice Through Integrity&amp;tag3=Helping Injured Victims&amp;tag4=Experience You Can Trust" class="lightwindow hidden" rel="Flash Gallery[Headers]" params="lightwindow_width=769,lightwindow_height=209" title="Gallery: But I like this one more!" author="Einstein Industries" >Header #3</a>

<a href="http://www.cheathamlane.net/clients/SFCM/flash/index.html" class="lightwindow page-options" params="lightwindow_width=600,lightwindow_height=450,lightwindow_loading_animation=false" title="CheathamLane :: Interactive 360&deg; Photography &amp; Flash" ><strong>User Example</strong> - CheathamLane.net</a>
					<a href="gallery/frontdoor_doc.swf" class="lightwindow page-options" params="lightwindow_iframe_embed=true" title="Flash Paper" ><strong>Flash Paper</strong> - The RIGHT way to embed a PDF!</a>

<a href="http://www.youtube.com/v/uhi5x7V3WXE" class="lightwindow page-options" params="lightwindow_width=425,lightwindow_height=340,lightwindow_loading_animation=false" title="YouTube: 300 Preview" ><strong>You Tube</strong> - 300 Preview</a>
       
				</p>
				
				<h2>External Sources <span>Look Ma! It's like a popup window! (Other Domains)</span></h2>
				<p>
					<a href="http://www.rubyonrails.com/" class="lightwindow page-options" 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>
					<a href="blank.html" class="lightwindow page-options" params="lightwindow_type=external"><strong><span style="color: red;">NEW</span> Page Treated as External</strong> - This page is local to this domain but is placed in an iframe.</a>
				</p>
	
    			<h2>Frame Calls <span style="color: red;">NEW</span> <span>Call a LightWindow from a frame!</span></h2>
				<p>
                	<iframe id="iframe_test" src="iframe.html" frameborder="1" allowtransparency="true" scrolling="no" width="100%" height="25" ></iframe>
				</p>
                
				<h2>Images <span>Singles or Gallery Sets!</span></h2>
				<p>				
					<a href="gallery/image-5.jpg" class="lightwindow page-options" title="What is this Plant?" author="Unknown" caption="Whatever it is, it is still a pretty cool picture. Whatever it is, it is still a pretty cool picture. Whatever it is, it is still a pretty cool picture. Whatever it is, it is still a pretty cool picture."><strong>Image</strong> - Just an image, a decently large one.</a>
					
					<a href="http://farm1.static.flickr.com/180/439443686_bc797081ea.jpg" class="lightwindow page-options" title="Bob, Donna and my son Kote" author="My Wife" caption="Three of some of the most important people in my life."><strong><span style="color: red;">NEW</span> External Image</strong> - An Image pulled from an External Source.</a>
					
					<a href="gallery/0.jpg" class="lightwindow page-options" rel="Random[Sample Images]" title="High 5 Dood!" caption="Snow people know how to have fun..." author="Unknown"><strong>Image Gallery</strong> - Everyone needs a killer gallery!</a>
					<a href="gallery/1.jpg" class="lightwindow hidden" rel="Random[Sample Images]" title="Snow People Playing Football" caption="Please don't kick me!" author="Unknown">image #1</a>
					<a href="gallery/header3.swf?scale=noscale&amp;tag1=Sooth Your Mind &amp; Body&amp;tag2=Justice Through Integrity&amp;tag3=Helping Injured Victims&amp;tag4=Experience You Can Trust" class="lightwindow hidden" rel="Random[Sample Images]" params="lightwindow_width=769,lightwindow_height=209" title="Oh My! Flash and Images Mixed!" >Header #3</a>
					<a href="gallery/2.jpg" class="lightwindow hidden" rel="Random[Sample Images]" title="Left Behind" caption="...it didn't smell that bad..." author="Unknown">image #2</a>                                     
					<a href="gallery/3.jpg" class="lightwindow hidden" rel="Random[Sample Images]" title="Where your water comes from?" caption="Tasty H20 ;)" author="Unknown">image #3</a>
					<a href="gallery/4.jpg" class="lightwindow hidden" rel="Random[Sample Images]" title="Beware of warewolves..." caption="They are hungry and you are food!" author="Unknown">image #4</a>
					<a href="gallery/5.jpg" class="lightwindow hidden" rel="Random[Sample Images]" title="Elf Behind a Tree" caption="He's there, sneaky elves..." author="Unknown">image #5</a>

<a href="gallery/0-evolution.jpg" class="lightwindow page-options" rel="Evolution?[Man]" title="The Evolution of Man is looking grim..." caption="Man starts out kinda hairy..." author="Unknown" params="lightwindow_show_images=2"><strong>Image Gallery w/Multiple Images</strong> - Side by Sides can be good for Before and After Gallery's or to show actions, etc.!</a>
					<a href="gallery/1-evolution.jpg" class="lightwindow hidden" rel="Evolution?[Man]">image #1</a>
					<a href="gallery/2-evolution.jpg" class="lightwindow hidden" rel="Evolution?[Man]" title="The Evolution of Man is looking grimmer..."  caption="Later, Man seems to have learned how to sharpen stuff!" params="lightwindow_show_images=2">image #2</a>
					<a href="gallery/3-evolution.jpg" class="lightwindow hidden" rel="Evolution?[Man]">image #3</a>
					<a href="gallery/4-evolution.jpg" class="lightwindow hidden" rel="Evolution?[Man]" title="We are screwed!" caption="Finally, Man discovers how to comb his hair and order from McDonalds... only one thing bigger than a Big Mac." params="lightwindow_show_images=2">image #4</a>
					<a href="gallery/5-evolution.jpg" class="lightwindow hidden" rel="Evolution?[Man]">image #5</a>

</p>
	
				<h2>Instantiate 1 by 1 <span>when you need to add one window or re-add it or whatever</span></h2>
				<p>
                	<input type="button" onclick="javascript: if (!$('sample-link').onclick) {myLightWindow.createWindow('sample-link'); exampleCreated = true;}" value="Instantiate the Link Below" />
                    or 
					<input type="button" onclick="javascript: myLightWindow.activateWindow({href: 'http://stickmanlabs.com/images/kevin_vegas.jpg', title: 'Waiting for the show to start in Las Vegas', author: 'Jazzmatt', caption: 'Mmmmmm Margaritas! And yes, this is me...', left: 300});" value="Launch it from this Button!" />
				</p>
                
				<p>
					<a href="http://stickmanlabs.com/images/kevin_vegas.jpg" class="page-options" title="Waiting for the show to start in Las Vegas" author="Jazzmatt" caption="Mmmmmm Margaritas! And yes, this is me..." id="sample-link"><strong><span style="color: red;">NEW</span> A link with no Class</strong> - As in no Class Name! We built this one with a function call.</a>
				</p>				
				
				<h2>Forms <span>yes, yes it does work...</span></h2>
				<p>
					<a href="form.html" params="lightwindow_width=175,lightwindow_height=60" class="lightwindow page-options"><strong>Form Example</strong> - Submit a form in a lightWindow!</a>
					<a href="form.html" params="lightwindow_width=175,lightwindow_height=60,lightwindow_top=200,lightwindow_left=300" class="lightwindow page-options"><strong><span style="color: red;">NEW</span> Form Example with a custom position</strong> - Submit a form in a lightWindow!</a>
				</p>
				
				<h2>Pages <span>Fixed width and Fluid.</span></h2>
				<p>
					<a href="blank.html" class="lightwindow page-options"><strong>Fluid Page</strong> - This page does not have a width, the content is flexible.</a>
					<a href="blank-width.html" class="lightwindow page-options"><strong>Fixed Page</strong> - This page has a defined amount of space it needs or it will cause a horizontal scroll.</a>
					<a href="blank-huge.html" class="lightwindow page-options" title="Sample Title"><strong>Monster Fixed Page</strong> - This page is just plain to big for the browser window unless you maximize a 30 inch monitor.</a>
					<a href="blank.html" params="lightwindow_width=800,lightwindow_height=350" class="lightwindow page-options"><strong>Set Dimensions</strong> - Set the dimensions of the window.</a>
				</p>
				
				<h2>Inline Content <span>They call this a gimme :)</span></h2>
				<p>
					<a href="#inline-sample" class="lightwindow page-options"><strong>Inline Content</strong> - Not a fan of AJAX? No worries, here you go.</a>
				</p>

</div>

<div class="page-footer">
		<p>&copy; Copyright 2007 <a href="http://www.stickmanlabs.com/"><small>stickmanlabs</small></a></p>
		<p>LightWindow is freely distributable under the terms of an MIT-style license.</p>
	</div>

<div id="inline-sample" >
	
					
	<div >
	<p>Oh yeah, this content was pulled from within the page!</p>
	<p>In order to get the LightWindow to fit the content, you have to define the height and width of a div in the inline div or send values for lightwindow_width and lightwindow_height in the url string.   Personally I prefer the inner div method, this way you can gracefully degrade the link as I did into an anchor if javascript isn't available.</p>
	<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
	</p>
	</div>
	
	<a href="gallery/0-nature.jpg" class="lightwindow hidden" rel="/\\:;*?<>'|&#[Nature]" title="Perdy Horsey" caption="I'm too kewl fer skewl!" author="Unknown">image #1</a>
	<a href="gallery/1-nature.jpg" class="lightwindow hidden" rel="/\\:;*?<>'|&#[Nature]" title="Where do flowers come from?" caption="Other flowers of course..." author="Unknown">image #3</a>

<a href="gallery/0-sushi.jpg" class="lightwindow hidden" rel="/\\:;*?<>'|&#[Sushi]" title="Left Behind" caption="Look's super tasty!" author="Unknown">image #1</a>
	<a href="gallery/1-sushi.jpg" class="lightwindow hidden" rel="/\\:;*?<>'|&#[Sushi]" title="Beware of warewolves..." caption="I shouldn't be doing this when I am hungry" author="Unknown">image #2</a>
	<a href="gallery/2-sushi.jpg" class="lightwindow hidden" rel="/\\:;*?<>'|&#[Sushi]" title="That was good!" caption="Take that sushi!" author="Unknown">image #3</a>

</div>

</body>
</html>

Sept. 28, 2007, 1:05 p.m. - Hany Sakr: It is not working correctly on IE 7, it needs first to load the picture to open it correctly
April 27, 2008, 6:20 p.m. - Edwin: Coloquei ele junto com o Css Dock Menu e o Css Dock Menu parou de funcionar.....:(
April 27, 2008, 6:21 p.m. - Edwin: I placed he with Css Dock Menu and Css Dock Menu stopped working. . . . . : (
Oct. 17, 2008, 12:59 a.m. - Francis: I need to do strict HTML, and "params" is not a standard parameter for the <a> tag, how can I doo ?
Nov. 11, 2008, 10:35 p.m. - Amit: 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.
March 23, 2009, 1:03 a.m. - Stone Deft: Doesn't support flashvars what a bummer
May 19, 2009, 8:18 p.m. - Mr_ZLO: it's not so good :( if i'm create this example in file text.html - it's work, but if do it: text.html? - it's not work :(
June 18, 2009, 3:24 p.m. - Nancy Raskauskas: 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.
July 14, 2009, 2:20 p.m. - 1001001: Currently it does not work in FF 3 on mac. But the error looks more general: parent.$("lightWindow-iframe").contentDocumnent is undefined am I missing something, or is it just a VERY basic demo, without actual functionality!?
July 29, 2009, 2:33 p.m. - Mike: I'm a noob, so excuse what may be an obvious question, but how did you change the fonts on your titles, and how did you make the "close" type red on the "External Image - An Image pulled from an External Source." link?
Feb. 22, 2010, 6:59 p.m. - Craig: Does anyone have a download link for Light Window. StickManLabs"s website has been offline for a while now
April 12, 2010, 3:59 a.m. - Raymond: Very nice. Sadly it does not do anything with forms when I open them in this window. Wanted to use it to edit things in database.
May 20, 2010, 1:28 p.m. - Phy: Only see the "External Image" link working on this demo page... What happened to the other 3?
May 21, 2010, 3:26 a.m. - sonia: i am not able to use it . please guide
June 10, 2010, 10:48 p.m. - Michael Suarez: image loads, but urls, videos and pdf does'nt show up on this demo
July 26, 2010, 9:19 p.m. - drhuman: Good job well done looks very clean.
Oct. 22, 2010, 8:48 a.m. - kablo tv: thanks good codes
Feb. 3, 2011, 7:45 a.m. - sravan: How to load light window on page loads? and I can able to load that on load but when I tried click on any link which inside lightwindow its opened inside the lighwindow. I dont want to open that inside lightwindow and open page as normal ?
April 26, 2011, 11:12 p.m. - Manel: Some times when the lightwindow animation stops the lw suddenly resizes. Anybody notice?
Aug. 26, 2011, 4:23 a.m. - Диети: Ooo this is cool popup. I like This tip.
Aug. 31, 2011, 9:13 p.m. - Shin: can i fix the width for the lightwindow??
Sept. 13, 2011, 1:33 p.m. - Angelo Inva: Hello, congratulations! But in iphone??? whats happened with scroll? Is there one way to fix it? i just want to run this script on my iphone! Thanks for help!
Dec. 27, 2011, 1:43 a.m. - gtrpapa: please give me