http://stickmanlabs.com/lightwindow/#download

<!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 profile="http://gmpg.org/xfn/11">

	<title>lightWindow Demo</title>

	<!-- Meta Tags -->
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="robots" content="index, follow" />
	
	<!-- JavaScript -->
	<script type="text/javascript" src="combine.php?type=javascript&files=prototype.js,effects.js,lightWindow.js"></script>
	
	<!-- CSS -->
	<link href="css/default.css" rel="stylesheet" type="text/css" />
	<link href="css/lightWindow.css" rel="stylesheet" type="text/css" />

</head>

<body>

	<div class="page-top"></div>
	
	<div class="page-sidebar">
		<div class="page-title">
			<h1><span>LightWindow</span> v1.1</h1>
			<h2>Check out the ultimate light-'whatever' ;)</h2>
		</div>
		
		<ul class="navigation">
			<li><a href="#why">Why</a></li>
			<li><a href="#demos">Demos</a></li>
			<li><a href="#features">Features</a></li>
			<li><a href="#howtouse">How to Use</a></li>
			<li><a href="#configure">Configuration</a></li>
			<li><a href="#download">Download Files</a></li>
			<li><a href="http://stickmanlabs.com/2007/04/13/lightwindow-support/">Comments &amp; Questions</a></li>			
			<li><a href="#more">More to Come</a></li>
		</ul>

		<div class="page-title">
			<h1>Links</h1>
			<h2>Who made this possible?</h2>
		</div>

		<ul class="navigation">
			<li><a href="http://www.einsteinindustries.com">Einstein Industries</a></li>
			<li><a href="http://www.stickmanlabs.com">Kevin Miller</a></li>
		</ul>
				
	</div>
		
	<div class="page-body">
		<div class="notice">
			<p>This library is <strong>52k</strong> uncompressed &amp; requires both prototype 1.5+ and scriptaculous 1.7+, if you just screamed, then it's probably time to learn how to publish your files like a grown-up.   Compressed, this library is <strong>9k</strong>.</p>
			<p style="margin: 0;">
				<a href="http://www.thinkvitamin.com/features/webapps/serving-javascript-fast">Learn about REAL File Compression &raquo;</a>
				<br />
				<a href="http://rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files">.htaccess &amp; PHP &raquo;</a>
			</p>
		</div>
		
		<a name="why"></a>
		<h1>Why another light-'whatever'?</h1>
		<p>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.</p>
		<p>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).</p>
		<p>Because of Media problems and MAJOR flickering in Firefox on the Mac, you will not only need to specify a color for opacity but create a PNG to repeat that is the same opacity for this one situation, included is a 70% as you see on this page.</p>
		<p><strong>Backwards Compatibility:</strong> Oh yeah ;)</p>

				<a name="demos"></a>
				<h1>Demos</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/newline/the_number_23/the_number_23-tlr1_h.640.mov" class="lWOn page-options" params="lWWidth=640,lWHeight=288" ><strong>Quicktime Movie Example</strong> - Watch a movie!</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="lWOn page-options" params="lWWidth=800,lWHeight=345" title="Preview: Doesn't your masthead look perdy?" ><strong>SWF Example</strong> - Because I <strong>Love</strong> Flash ;)</a>
					<a href="http://www.ready.gov/business/_downloads/sampleplan.pdf" class="lWOn page-options"><strong>PDF Example</strong> - See how you can pull up a PDF?</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="lWOn 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>
				</p>
				
				<h2>Images <span>Singles or Gallery Sets!</span></h2>
				<p>				
					<a href="gallery/image-5.jpg" class="lWOn 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="lWOn 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="lWOn 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="lWOn hidden" rel="Random[Sample Images]" title="Snow People Playing Football" caption="Please don't kick me!" author="Unknown">image #1</a>
					<a href="gallery/2.jpg" class="lWOn 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="lWOn 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="lWOn 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="lWOn 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="lWOn page-options" rel="Evolution?[Man]" title="The Evolution of Man is looking grim..." caption="Man starts out kinda hairy..." author="Unknown" params="lWShowImages=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="lWOn hidden" rel="Evolution?[Man]">image #1</a>
					<a href="gallery/2-evolution.jpg" class="lWOn hidden" rel="Evolution?[Man]" title="The Evolution of Man is looking grimmer..."  caption="Later, Man seems to have learned how to sharpen stuff!">image #2</a>
					<a href="gallery/3-evolution.jpg" class="lWOn hidden" rel="Evolution?[Man]">image #3</a>
					<a href="gallery/4-evolution.jpg" class="lWOn hidden" rel="Evolution?[Man]" title="We are screwed!" caption="Finally, Man discovers how to comb his hair and order from McDonalds™.">image #4</a>
					<a href="gallery/5-evolution.jpg" class="lWOn 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>Press the following button to activate the example <input type="button" onclick="javascript: if (!$('sample-link').onclick) {mylightWindow.initializeWindow('sample-link'); exampleCreated = true;}" value="Instantiate Box" /></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="lWWidth=170,lWHeight=60" class="lWOn page-options"><strong>Form Example</strong> - Submit a form in a lightWindow!</a>
				</p>
				
				<h2>Pages <span>Fixed width and Fluid.</span></h2>
				<p>
					<a href="blank.html" class="lWOn page-options"><strong>Fluid Page</strong> - This page does not have a width, the content is flexible.</a>
					<a href="blank-width.html" class="lWOn 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="lWOn 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="lWWidth=800,lWHeight=350" class="lWOn 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="lWOn page-options"><strong>Inline Content</strong> - Not a fan of AJAX? No worries, here you go.</a>
				</p>		

				<a name="features"></a>
				<h1>What are all of the features?</h1>

				<ul>
					<li>Supports 5 different types of Media: Pages, Inline Content, Media(Movies, SWF, etc), Images(Galleries, Single), External Websites(via iframe)</li>
					<li>Automatically detects media and source.</li>
					<li>Fully customizable via CSS.</li>
					<li>Set starting heights and widths for each media and define media types.</li>
					<li>Window will fit content fetched! Excludes i-frame content</li>
					<li>The window is perfectly centered on the screen.</li>
					<li>There are optional Title Bars and Data boxes.</li>
					<li>Multiple Galleries are allowed with a Menu on the Galleries</li>
					<li>All windows will shrink to fit the screen including Image Sizes (Though in some cases its not recommended, i.e. fixed sized windows)</li>
					<li>Width, Height, Overflow, and Multiple Image Slides can optionally be set.</li>
					<li>Submit Forms via the window.</li>
					<li><strong>ANY</strong> Character is supported with the exception of '[' &amp; ']' (These are used to delineate categories for galleries)</li>
					<li><em>author</em>, <em>caption</em>, <em>title</em>, and <em>params</em> (Added for this library) attributes are supported</li>
					<li>Click anywhere on the overlay to close the window or the ESC key.   Optionally you can create your own close links or enable the title bar and use that close link.</li>
					<li>Define your own actions!</li>
					<li><span style="color: red;">NEW</span> Instantiate a window on the fly instead of on page load.</li>
					<li><span style="color: red;">NEW</span> Toggle Gallery Tab visibility.</li>
					<li><span style="color: red;">NEW</span> Flash is resized to fit window (even if lWWidth and lWHeight are passed).</li>
					<li><span style="color: red;">NEW</span> <em>hideFlash</em> is now a configuration option to choose whether or not to hide the flash in your page, in case you are smart enough to set the <em>wmode</em> and want that cool overlay effect on your flash.</li>
					<li><span style="color: red;">NEW</span> <em>formMethod</em> is now available to set your form method to either 'post' or 'get'.</li>
					<li><span style="color: red;">NEW</span> iframes are removed from the DOM on lightWindow deactivation.</li>
					<li style="list-style-type: none; margin-top: 10px;"><small>...there's more so read on!</small></li>			
				</ul>


				<a name="howtouse"></a>
				<h1>How to use the Script</h1>
				
				<p>Firstly we need to include our required javascript and css files in our page like so:</p>
<pre><code>
&lt;script type="text/javascript" src="javascript/prototype.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="javascript/scriptaculous.js?load=effects"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="javascript/lightWindow.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="css/lightWindow.css" type="text/css" media="screen" /&gt;
</code></pre>
				<p>The <em>author</em>, <em>caption</em>, and <em>title</em> tags are completely optional and if they are all not present the Data Box will not be shown.   You can also add a <em>params</em> attribute to any hyperlink tag and you can change the height, width, scroll status and even the number of images to show at once: </p> 
				
<pre><code>
<strong>params="lWWidth=516,lWHeight=530,lWOverflow=scroll,lWShowImages=2"</strong><br />
lWWidth // Width of window
lWHeight // Height of window
lWOverflow // Overflow status of window css-style
lWShowImages // Number of images to show at once in a gallery, by default its 1, but this can be handy for say a Before and After Gallery
</code></pre>

				<p>In order to instantiate any window just add a <em>class</em> of lWOn or whatever you set in the configuration as 'standard'.  Now lets take a look at how to create the links that will become the LightWindow of your choice.</p>
				<h2>Media</h2>						
<h3>Movie</h3>
<pre><code>
&lt;a href="http://images.apple.com/movies/newline/the_number_23/the_number_23-tlr1_h.640.mov" class="lWOn" params="lWWidth=640,lWHeight=290" &gt;Link Name&lt;/a&gt;
</code></pre>	
				
<h3>SWF</h3>
<pre><code>
&lt;a href="gallery/header.swf?You-could-put-a-GET-string-here-for-your-flashvars" class="lWOn" params="lWWidth=800,lWHeight=345" title="Preview: Doesn't your masthead look perdy?" &gt;Link Name&lt;/a&gt;					
</code></pre>

<h3>PDF</h3>
<p>For this to work, you need to have a PDF viewer installed in your browser or the browser will prmopt a download.</p>
<pre><code>
&lt;a href="http://www.ready.gov/business/_downloads/sampleplan.pdf" class="lWOn"&gt;Link Name&lt;/a&gt;
</code></pre>
	
				<h2>External</h2>						
<pre><code>
&lt;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."&gt;Link Name&lt;/a&gt;
</code></pre>
	

				<h2>Images</h2>		
				<p>Now Galleries use the <em>rel</em> tag in the format Gallery-Name[Category-Name], and the order in which they appear on the page is the way the library will order them.</p>

<h3>Single Image</h3>
<pre><code>
&lt;a href="images/image-5.jpg" class="lWOn" title="What is this Plant?" author="Unknown" caption="Whatever it is, it is still a pretty cool picture. ."&gt;Link Name&lt;/a&gt;
</code></pre>	
				
<h3>A Gallery</h3>
<pre><code>
&lt;a href="gallery/0-sushi.jpg" class="lWOn" rel="/\\:;*?&lt;&gt;'”|®™©&#[Sushi]" title="Left Behind" caption="Look's super tasty!" author="Unknown"&gt;image #1&lt;/a&gt;
&lt;a href="gallery/1-sushi.jpg" class="lWOn" rel="/\\:;*?&lt;&gt;'”|®™©&#[Sushi]" title="Beware of warewolves..." caption="I shouldn't be doing this when I am hungry" author="Unknown"&gt;image #2&lt;/a&gt;
&lt;a href="gallery/2-sushi.jpg" class="lWOn" rel="/\\:;*?&lt;&gt;'”|®™©&#[Sushi]" title="That was good!" caption="Take that sushi!" author="Unknown"&gt;image #3&lt;/a&gt;
</code></pre>

<h2>Instantiate 1 by 1 <span style="color: red;">NEW</span></h2>
<p>So if want to instiate just one window we can now use the <em>initializeWindow(<strong>id</strong>)</em> function as show below.   Just be sure to reference the myLightWindow object I have created.</p>
<pre><code>
&lt;a href="http://stickmanlabs.com/images/kevin_vegas.jpg" id="sample-link"&gt;link Name&lt;/a&gt;
&lt;script type="text/javascript"&gt;
	mylightWindow.initializeWindow('sample-link');
&lt;/script&gt;
</code></pre>	

				<h2>Local Page</h2>						
<pre><code>
&lt;a href="blank.html" class="lWOn" &gt;Link Name&lt;/a&gt;
</code></pre>

				<h2>Inline Content</h2>
				<p>The library on load will look for the container, hide it and reference its content for the window.</p>						
<pre><code>
&lt;a href="#id-of-container" class="lWOn" &gt;Link Name&lt;/a&gt;
</code></pre>


				<h2>Forms</h2>	
				<p>Now forms are a little trickier, we need to create a page as normal to get to the form first.</p>					
<pre><code>
&lt;a href="blank.html" class="lWOn" &gt;Link Name&lt;/a&gt;
</code></pre>

				<p>Now on that form page the submit button needs to define an action where we set a value in the <em>params</em> tag for 'lWForm' telling us the name of the form.   See below on how we created the submit and cancel buttons for our example.   As for the class definitions of these buttons see the next section on actions!</p>
				
<h3>Submit Form Button Sample</h3>
<pre><code>
&lt;a href="hello.php" params="lWForm=sample-form" class="lWAction" rel="insertForm"&gt;&lt;button&gt;Submit&lt;/button&gt;&lt;/a&gt; 
</code></pre>

<h3>Close Button Sample</h3>
<pre><code>
&lt;a href="#" class="lWAction" rel="deactivate"&gt;Cancel&lt;/a&gt;
</code></pre>
	

				<h2>BONUS! Actions</h2>	
				<p>Basically you can create a few actions, right now you have available 'insertForm' and 'deactivate'.   Now the <em>rel</em> attribute holds the action and set the <em>class</em> attribute hold the class defined for actions, in this case 'lWAction'.   Below is an example on how to deactivate or close a window. Of note, actions can be nested into LightWindow content as the content is parsed looking for actions.</p>					
<pre><code>
&lt;a href="#" class="lWAction" rel="deactivate"&gt;Link Name&lt;/a&gt;
</code></pre>




				<a name="configure"></a>
				<h1>Configuration Options</h1>	
				<p>Below are the possible options you can set and their default values as seen on this page.</p>

<pre><code>
resizeSpeed : 8, // Speed of the animations
cushion : 10, // Did you add a border or padding to the lightWindow-contents?
dimensions : { 
	image : {height : 250, width : 250}, // Starting dimensions for this media type
	page : {height : 250, width : 500}, // ..
	inline : {height : 250, width : 500}, // ..
	media : {height : 250, width : 250}, // ..
	external : {height : 250, width : 250}, // ..
	dataHeight : 40, // Height of the lower Data Box
	titleHeight : 25 // Height of the upper Title Bar
},
classNames : {	
	standard : 'lWOn', // Class name of links to look for to turn into lightWindows
	action : 'lWAction' // Class name of the links to turn into lightWindow actions
},
fileTypes : { // File types for the three media types that support the check
	page : ['htm', 'html', 'rhtml', 'phtml', 'txt', 'php', 'shtml', 'php4', 'php3', 'php', 'php5', 'asp', 'aspx', 'vbs', 'pl', 'cgi', 'rb'],
	media : ['mpg', 'mp4', 'avi', 'mov', 'mp3', 'aif', 'wmv', 'wav', 'mpeg', 'flv', 'aiff', 'aac', 'ac3', 'asf', 'divx', 'qt', 'rm', 'ram', 'swf', 'wma', 'moov'],
	image : ['png', 'jpg', 'gif', 'bmp', 'tiff']
},
loadingDialog : {
	message : 'Loading', // Loading Message
	image :  'images/ajax-loading.gif', // Loading Image
	options : '<a onclick="javascript: mylightWindow.deactivate();">Cancel</a>', // Loading Options
	delay : 3.0 // Delay before Loading Options appear
},
authorLead : 'by ', // Lead text for author field
galleryTab : {
	name : 'Galleries', // Name of Gallery Tab
	height : 20, // Height of Gallery Tab
	visible : true // Toggle the Gallery Tab visibility
},
overlay : {
	color : '#000000', // Overlay Color
	opacity : 70, // Overlay Opacity
	image : '/lightwindow/images/black-70.png' // Location of alternate Overlay image for Firefox on the Mac
},
formMethod : 'get', // What should you use for a form method? ('get' or 'post')
hideFlash : true, // Toggle hiding the flash on the webpage when a lightWindow is activated, if false set your wmode on your flash!
showTitleBar : true // Toggle the Title bar's visibility, if set to false the title will be place in the Data box
</code></pre>
		
		<p>To instantiate the lightWindow see the lightWindow.js file where by default it is set to this:</p>
<pre><code>
mylightWindow = new lightWindow();
</code></pre>
		<p><em>to say something like this:</em></p>
<pre><code>
mylightWindow = new lightWindow({resizeSpeed : 10});
</code></pre>


		<a name="download"></a>
		<h1>Download Files</h1>
		<p>You can grab the files here: <a href="lightwindow.zip" style="color: #ffffff;" >lightwindow.zip</a>
		
		<a name="more"></a>
		<h1>More to come...</h1>
		
		<p>Eventually an API will be available so that you can create your own actions etc.   A word of warning, modify at your own risk, however if you find a better way to do something, let us know!</p>
				
	</div>

	<div class="page-footer">
		<p>&copy; Copyright 2007 <small>Einstein Industries</small></p>
		<p>LightWindow is freely distributable under the terms of an MIT-style license.</p>
	</div>

<!-- Hidden stuff for demos -->
<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 lWWidth and lWHeight 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="lWOn 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="lWOn 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="lWOn hidden" rel="/\\:;*?<>'”|®™©&#[Sushi]" title="Left Behind" caption="Look's super tasty!" author="Unknown">image #1</a>
	<a href="gallery/1-sushi.jpg" class="lWOn 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="lWOn hidden" rel="/\\:;*?<>'”|®™©&#[Sushi]" title="That was good!" caption="Take that sushi!" author="Unknown">image #3</a>

</div>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">_uacct = "UA-624845-2";urchinTracker();</script>

</body>
</html>