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