Get familiar with Lightwindow – not just another light whatever

I am pretty sure like me, many of you will be thinking same looking at those fancy popups which open on currently running rich UI websites. What if I can do same to incorporate such a window in my piece of work.

I crossed path with this awesome library called Lightwindow v2.0 when one of my colleague introduced me to it.

This is one of those javascript libraries which will help you to achieve those fancy looking popups, image galleries. It is really easy to implement. Quite fast & gives very awesome looking results I must say.

During my experience implementing it, I encountered some issues which really made me scratch my head hard. So let me take you along on my journey of dealing with this library and hopefully you can find answers to all your problems and doubts related to this library at the end of this journey.

So let me start with basics:

What is lightwindow?
Basically it is a modal window plugin or can say library, build on javascript, easy to incorporate in.
This is a way it looks when opened, like any modal dialog box. Basically the fun part is the way it opens up with all transitions.

Sample Popup

Why use Lightwindow?
Supports almost every media type & renders it accurately
You can create your own custom overlays.
Can submit a form placed inside a ligtwindow like any other asp.net page.
You can take advantages of easily provided attributes of this library like caption, title, params etc.
You can instantiate it on page load via javascript or anchor tag click, depends on your wish.
As much as it can be used to popup images, it can also be used to popup forms, html content, plain text, flash animation etc. This is why it differs from other plugins used to create similar effect like lightbox etc.

How to use Lightwindow?
You can download the library from here .
LightWindow is freely distributable under the terms of an MIT-style license.
lightwindow.js requires including script.aculo.us & effects.js library
To get lightwindow work, firstly you need to include all related javascript & css files in your page like shown below.

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

Basically I have used lightwindow to open other pages as popup window. I have not used it like an image gallery. So here I will focus on whatever I have done using lightwindow, but its totally up to you to exploit it more for other uses.

To open another page as popup using lightwindow, need to instantiate it on anchor click like :

<a id="lnkManageMember" runat="server" class="lightwindow hidden" title="Select Member to Manage" style="width: 150px;" params="lightwindow_type=external,lightwindow_width=450,lightwindow_height=180">
<div style="margin-top: 3px;"> Select Member </div>
</a>

Just customize parameters like width, height, params etc. according to your need. If you want you can define which page needs to opened in that popup in source code as href for that link or can do in code behind as well.
How to open popup on Page load using javascript, just include below code in your page’s source file:

<script type="text/javascript">
myLightWindow = new lightwindow();
myLightWindow.activateWindow({
href: 'http://localhost:60823/Temp/TestPopup.aspx',
title: 'Page load popup example',
author: 'Neha',
caption: 'Works really, try it out...',
left: 300
});
</script>

Basically we need to instantiate a new lightwindow & then activate it by setting all its properties. This was the one thing which really made my day difficult to get it to work, as in how to get a popup window on page load using lightwindow. Hopefully this will save your day 🙂

By default you will be having a close button on top right of window to close that, but in case you want to close the window otherwise can do it as shown below:

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

Basically the difference is in the kind of class & parameters you are applying on a link. Like if you use
Lightwindow-type in attribute params can be external, page, image, media, inline anything. Depends on you, which feature you want to use.

One more thing which I struggled was submitting a form in a lightwindow popup. It is a bit tricky job to be done.
First you need to have an external page which you will be calling in your popup window

<a id="lnkOpenWindow" runat="server" class="lightwindow page-options" params="lightwindow_type=external,lightwindow_width=500,lightwindow_height=60"
title="Open Window" href="#">
Open LightWindow
</a>

& then on that form you need to have submit button that needs to define an action where we set a value in the params tag for ‘lightwindow_form’ telling us the name of the form.

<a href="Home.aspx" params="lightwindow_form=formPopup" class="lightwindow_action"
rel="submitForm">
<asp:Button ID="submit" runat="server" Text="Test Submit"
onclick="submit_Click" />
</a>

This will do the job for you.

That was all from my side for this awesome library called lightwindow. If any of you have worked on it or used it in anyway, then don’t forget to leave in your comments below.

Written By: Neha Rustagi, Sr. Software Engineer, Mindfire Solutions

Advertisements

Posted on March 28, 2014, in Javascript and tagged , , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: