LightWindow v2.0

Check out the ultimate light-'whatever' ;)

Links

Who made this possible?

Why another light-'whatever'?

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

Backwards Compatibility: Tested in Windows Firefox/IE6/IE7/Safari3/Opera & Mac Firefox/Safari/Opera/Netscape (Keep in mind my theme that I have provided can be changed and the advanced level of the theme has an effect on browser compatibility).

Demos

NOTE: 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.

Media Movies, Flash, PDF's... just link directly to the file!

Quicktime Movie Example - 20MB Local File! Quicktime Movie Example - 5MB Local File! Apple.com Trailer - Transformers, more than meets the eye! Single SWF Example - Because I Love Flash... SWF Gallery - Any media can now be used in a GALLERY! User Example - CheathamLane.net Flash Paper - The RIGHT way to embed a PDF! You Tube - 300 Preview

External Sources Look Ma! It's like a popup window! (Other Domains)

Website Example - Preview any website from yours! NEW Page Treated as External - This page is local to this domain but is placed in an iframe.

Frame Calls NEW Call a LightWindow from a frame!

Images Singles or Gallery Sets!

Image - Just an image, a decently large one. NEW External Image - An Image pulled from an External Source. Image Gallery - Everyone needs a killer gallery! Image Gallery w/Multiple Images - Side by Sides can be good for Before and After Gallery's or to show actions, etc.!

Instantiate 1 by 1 when you need to add one window or re-add it or whatever

or

NEW A link with no Class - As in no Class Name! We built this one with a function call.

Forms yes, yes it does work...

Form Example - Submit a form in a LightWindow! NEW Form Example with a custom position - Submit a form in a LightWindow!

Pages Fixed width and Fluid.

Fluid Page - This page does not have a width, the content is flexible. Fixed Page - This page has a defined amount of space it needs or it will cause a horizontal scroll. Monster Fixed Page - This page is just plain to big for the browser window unless you maximize a 30 inch monitor. Set Dimensions - Set the dimensions of the window.

Inline Content They call this a gimme :)

Inline Content - Not a fan of AJAX? No worries, here you go.

What are all of the features?

Things to watch out for...

Things I don't care about

How to use the Script

Firstly we need to include our required javascript and css files in our page like so:

<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />

The author, caption, and title tags are completely optional and if they are all not present the Data Box will not be shown. You can also add a params attribute to any hyperlink tag and you can change the height, width, number of images to show at once and much mroe as outlined below.

params="lightwindow_width=516,lightwindow_height=530,lightwindow_show_images=2"
lightwindow_width		// Width of window
lightwindow_height		// Height of window
lightwindow_show_images		// 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
lightwindow_top			// Set as an Integer to be spaced from the Top
lightwindow_left		// Set as an Integer to be spaced from the Left
lightwindow_type		// Specify the type the window should be treated as i.e. page, external, image, media, inline
lightwindow_loading_animation	// Set to false to opt to not fade out the Loading Cover
lightwindow_iframe_embed 	// To embed media into a media into an iframe rather than just into a div
lightwindow_form 		// The name of the form

In order to instantiate any window just add a class of 'lightwindow' or whatever you set in the configuration as 'standard' for the className.

<a href="http://www.foo.com/bar.jpg" class="lightwindow" >foo da bar</a>

Now lets take a look at how to create the links that will become the LightWindow of your choice. Note that these are examples of how to do it, get familiar with the configuration options you can set in the params or in the options for the class as will be explained later in this page.

Media

Movie

<a href="http://images.apple.com/movies/newline/the_number_23/the_number_23-tlr1_h.640.mov" class="lightwindow" params="lightwindow_width=640,lightwindow_height=290" >Link Name</a>

SWF

<a href="gallery/header.swf?You-could-put-a-GET-string-here-for-your-flashvars" class="lightwindow" params="lightwindow_width=800,lightwindow_height=345" title="Preview: Doesn't your masthead look perdy?" >Link Name</a>

PDF

For this to work, you need to have a PDF viewer installed in your browser or the browser will prmopt a download. THIS IS NOT RECOMMENDED, instead use Flash Paper

<a href="http://www.ready.gov/business/_downloads/sampleplan.pdf" class="lightwindow">Link Name</a>

External (i.e. A Website)

<a href="http://www.rubyonrails.com/" class="lightwindow" title="Ruby on Rails" caption="One of my favorites, and really it should be one of yours.">Link Name</a>

Images

Now Galleries use the rel 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.

Single Image

<a href="images/image-5.jpg" class="lightwindow" title="What is this Plant?" author="Unknown" caption="Whatever it is, it is still a pretty cool picture. .">Link Name</a>

A Gallery

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

Instantiate 1 by 1

So if want to instiate just one window we can now use the createWindow(id) function as show below. Just be sure to reference the myLightWindow object that is automatically created or use the one you have opted to.

<a href="http://stickmanlabs.com/images/kevin_vegas.jpg" id="sample-link">link Name</a>
<script type="text/javascript">
	myLightWindow.createWindow('sample-link');
</script>

Create and Launch a Window with a Javascript Call.

To do this simply call activateWindow(id, options) function as show below. Just be sure to reference the myLightWindow object that is automatically created or use the one you have opted to.

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
});"

There are many options you can set, see below...

href			// The hyperlink for the window
title 			// Title of window
author 			// Author of window
caption 		// The Caption for the window
rel 			// Set the rel tag
top 			// Top position of the window
left 			// Left position of the window
type 			// The type of the window you want to change it too
showImages 		// How many images to show
height 			// The height of the window
width 			// The width of the window
loadingAnimation 	// Make the Loading Cover skip the animation
iframeEmbed 		// Emebed the Media into an iframe instead of a div
form 			// The name of the form

Local Page

This page will size to fit the content unless the viewport isn't big anough or you specify a different size in the params.

<a href="blank.html" class="lightwindow" >Link Name</a>

Inline Content

The library on load will look for the container, hide it and reference its content for the window.

<a href="#id-of-container" class="lightwindow" >Link Name</a>

Forms

Now forms are a little trickier, we need to create a page as normal to get to the form first, so how about a local page...

<a href="blank.html" class="lightwindow" >Link Name</a>

Now on that form page the submit button needs to define an action where we set a value in the params tag for 'lightwindow_form' 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!

Submit Form Button Sample

This is how you create a submit button for a form. It is important to set lightwindow_form to the name of the form.

<a href="hello.php" params="lightwindow_form=sample-form" class="lightwindow_action" rel="submitForm"><button>Submit</button></a> 

Close Button Sample

This is how you create a Cancel Button.

<a href="#" class="lightwindow_action" rel="deactivate">Cancel</a>

Iframe Calls

Iframe calls are very simple, all you need to do is precede the function call with the level you have placed the LightWindow code. For example this is how we launched the window above in the demo. We look for all the links with the class 'lightwindow_iframe_link' and activate it to open a window in the 'parent' frame. For more in depth help or questions, help me out with my macbook and post a question in the forum and I'll get you going.

<a href="http://www.stickmanlabs.com" class="lightwindow_iframe_link" ><strong>Open a LightWindow from an iframe!</strong></a>
<script type="text/javascript">
	var links = $$('.lightwindow_iframe_link');
	links.each(function(link) {
		Event.observe(link, 'click', function() {parent.myLightWindow.activate(null, link);}, false);
		link.onclick = function() {return false;};
	});		
</script>

BONUS! Actions

Basically you can create a few actions, right now you have available 'submitForm' and 'deactivate'. Now the rel attribute holds the action and set the class attribute hold the class defined for actions, in this case 'lightwindow_action'. 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.

<a href="#" class="lightwindow_action" rel="deactivate">Link Name</a>

Configuration Options

Below are the possible options you can set and their default values as seen on this page.

// The resize speed 0-10
resizeSpeed : 8,
contentOffset : {
    height : 20,
    width : 20
},
// Default sizes for each type
dimensions : {
    image : {height : 250, width : 250},
    page : {height : 250, width : 250},
    inline : {height : 250, width : 250},
    media : {height : 250, width : 250},
    external : {height : 250, width : 250},
    titleHeight : 25
},
// The class names to look for to create a LightWindow or an action
classNames : {	
    standard : 'lightwindow',
    action : 'lightwindow_action'
},
// The file types resepctive to their actions
fileTypes : {
    page : ['asp', 'aspx', 'cgi', 'htm', 'html', 'pl', 'php4', 'php3', 'php', 'php5', 'phtml', 'rhtml', 'shtml', 'txt', 'vbs', 'rb'],
    media : ['aif', 'aiff', 'asf', 'avi', 'divx', 'm1v', 'm2a', 'm2v', 'm3u', 'mid', 'midi', 'mov', 'moov', 'movie', 'mp2', 'mp3', 'mpa', 'mpa', 'mpe', 'mpeg', 'mpg', 'mpg', 'mpga', 'pps', 'qt', 'rm', 'ram', 'swf', 'viv', 'vivo', 'wav'],
    image : ['bmp', 'gif', 'jpg', 'png', 'tiff']
},
// Mime types for the file types
mimeTypes : {
    avi : 'video/avi',
    aif : 'audio/aiff',
    aiff : 'audio/aiff',
    gif : 'image/gif',
    bmp : 'image/bmp',
    jpeg : 'image/jpeg',
    m1v : 'video/mpeg',
    m2a : 'audio/mpeg',
    m2v : 'video/mpeg',
    m3u : 'audio/x-mpequrl',
    mid : 'audio/x-midi',
    midi : 'audio/x-midi',
    mjpg : 'video/x-motion-jpeg',
    moov : 'video/quicktime',
    mov : 'video/quicktime',
    movie : 'video/x-sgi-movie',
    mp2 : 'audio/mpeg',
    mp3 : 'audio/mpeg3',
    mpa : 'audio/mpeg',
    mpa : 'video/mpeg',
    mpe : 'video/mpeg',
    mpeg : 'video/mpeg',
    mpg : 'audio/mpeg',
    mpg : 'video/mpeg',
    mpga : 'audio/mpeg',
    pdf : 'application/pdf',
    png : 'image/png',
    pps : 'application/mspowerpoint',
    qt : 'video/quicktime',
    ram : 'audio/x-pn-realaudio-plugin',
    rm : 'application/vnd.rn-realmedia',
    swf	: 'application/x-shockwave-flash',
    tiff : 'image/tiff',
    viv : 'video/vivo',
    vivo : 'video/vivo',
    wav : 'audio/wav',
    wmv : 'video/x-ms-wmv'			
},	
// ActiveX Classids for file types
classids : {
    mov : 'clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B',
    swf : 'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000',
    wmv : 'clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6'
},
// The plugin sources for the file types
codebases : {
    mov : 'http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0',
    swf : 'http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0',
    wmv : 'http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715'
},	
// The default padding for the viewport when a window is to fit the browser
viewportPadding : 10,
// What files types should the EOLAS Fix be applied to
EOLASFix : 'swf,wmv,fla,flv',
// What are our overlay images and default opacity, the preset has to be prebuilt for firefox as we cannot use an opacity setting
overlay : {
    opacity : 0.7,
    image : 'images/black.png',
    presetImage : 'images/black-70.png'
},
// The default skin and associate markup, the id's and class are required
skin : 	{
    main :  '<div id="lightwindow_container" >'+
                '<div id="lightwindow_title_bar" >'+
                    '<div id="lightwindow_title_bar_inner" >'+
                        '<span id="lightwindow_title_bar_title"></span>'+
                        '<a id="lightwindow_title_bar_close_link" >close</a>'+
                    '</div>'+
                '</div>'+
                '<div id="lightwindow_stage" >'+
                    '<div id="lightwindow_contents" >'+
                    '</div>'+
                    '<div id="lightwindow_navigation" >'+
                        '<a href="#" id="lightwindow_previous" >'+
                            '<span id="lightwindow_previous_title"></span>'+
                        '</a>'+
                        '<a href="#" id="lightwindow_next" >'+
                            '<span id="lightwindow_next_title"></span>'+
                        '</a>'+
                        '<iframe name="lightwindow_navigation_shim" id="lightwindow_navigation_shim" src="javascript:false;" frameBorder="0" scrolling="no"></iframe>'+
                    '</div>'+								
                    '<div id="lightwindow_galleries">'+
                        '<div id="lightwindow_galleries_tab_container" >'+
                            '<a href="#" id="lightwindow_galleries_tab" >'+
                                '<span id="lightwindow_galleries_tab_span" class="up" >Galleries</span>'+
                            '</a>'+
                        '</div>'+
                        '<div id="lightwindow_galleries_list" >'+
                        '</div>'+
                    '</div>'+
                '</div>'+
                '<div id="lightwindow_data_slide" >'+
                    '<div id="lightwindow_data_slide_inner" >'+
                        '<div id="lightwindow_data_details" >'+
                            '<div id="lightwindow_data_gallery_container" >'+
                                '<span id="lightwindow_data_gallery_current"></span>'+
                                ' of '+
                                '<span id="lightwindow_data_gallery_total"></span>'+
                            '</div>'+
                            '<div id="lightwindow_data_author_container" >'+
                                'by <span id="lightwindow_data_author"></span>'+
                            '</div>'+
                        '</div>'+
                        '<div id="lightwindow_data_caption" >'+
                        '</div>'+
                    '</div>'+
                '</div>'+
            '</div>',	
    loading : 	'<div id="lightwindow_loading" >'+
                    '<img src="images/ajax-loading.gif" alt="loading" />'+
                    '<span>Loading or <a href="javascript: myLightWindow.deactivate();">Cancel</a></span>'+
                    '<iframe name="lightwindow_loading_shim" id="lightwindow_loading_shim" src="javascript:false;" frameBorder="0" scrolling="no"></iframe>'+
                '</div>',
    iframe : 	'<!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">'+
                    '<body>'+
                        '{body_replace}'+
                    '</body>'+
                '</html>',
    gallery : {
        top :	  '<div class="lightwindow_galleries_list">'+
                        '<h1>{gallery_title_replace}</h1>'+
                        '<ul>',
        middle : 	    '<li>'+
                                '{gallery_link_replace}'+
                            '</li>',
        bottom : 	'</ul>'+
                   '</div>'
    }
},
// What form method should be used
formMethod : 'get',
// Should flash objects be hidden on the page when the window opens
hideFlash : false,
// Hide the gallery tab
hideGalleryTab : false,
// Show the gallery count when viewing a gallery
showGalleryCount : true
// Define your own handlers here, see the 'How to Theme Section'
animationHandler : false,
navigationHandler : false,
transitionHandler : false,
finalAnimationHandler : false,
formHandler : false,
galleryAnimationHandler : false

To instantiate the LightWindow see the lightwindow.js file where by default it is set to this:


myLightWindow = new lightwindow();

to say something like this and define your own options just as you would with prorotype.js or scriptaculous...


myLightWindow = new lightwindow({resizeSpeed : 10});

Now there has been some grumbling about how to set this up, it's really simple, don't over-think it.

  1. Place your CSS/Javascript/Image files somewhere on your web server.
  2. Add the CSS/Javascript tags to include said files to your page.
  3. IMPORTANT Make sure the paths to the images in both the CSS file and the configuration of the lightwindow.js file are correct as to where you placed the images.
  4. Now check out the How to Use Section.

Download Files

You can grab the files here: lightwindow.zip (v2.0)

How to setup a theme

Too be honest this is no easy task. You must be very knowledgeable in XHTML/CSS and Javascript to create your own theme and animations. When I get time I will write a series of tutorials on how to do this that will create a new free theme and explain all of the quirks and pitfalls in detail to make something really nice.

Oh yeah, this content was pulled from within the page!

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.

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.

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.

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.

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.

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.

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.