LightBoxLite - light weight version of Light Box concept

ASP Free Forums Sponsor:

August 5th, 2007, 10:20 AM

Shadow Wizard

Moderator From Beyond

ASP Free God 45th Plane (27000 - 27499 posts)

Join Date: Sep 2004

Location: Israel

Posts: 27,276

Folding Points: 358841 Folding Title: Super Ultimate Folder - Level 1

Time spent in forums: 3 Months 1 Week 6 Days 13 h 24 m 17 sec
Reputation Power: 1795

LightBoxLite - light weight version of Light Box concept

Those familiar with Light Box probably know most of the scripts
involve complicated prototypes and thousands of lines of code.

I tried one of those and got burned. It was too heavy, and
ruined the very structure of the document.

Frustrated, I simply created my own version of Light Box.

Here is the result - below full source code and attached the
two required files.

Good luck, happy programming and let me know if you have any
questions or comments.

Code:

--LightBoxLite.html
<html>
<head>
<title>LightBoxLite Example Page</title>
<script type="text/javascript" src="LightBoxLite.js"></script>
<script type="text/javascript">
LightBoxLite.SetWindowBackground("#303030");
LightBoxLite.SetLightOptions(350, 260, "white");
LightBoxLite.SetClosingElement("btnCloseBox");

function OpenLightBox() {
    LightBoxLite.ShowInnerElement( document.getElementById("LightBoxSampleDiv") );
}

function SampleFunction() {
	alert("as you see, you can have anything you want inside the Light Box. including buttons.");
}
</script>
</head>
<body>
Hello.<br />This is ordinary page.<br /><br />
It can contain anything you want.<br /><br /><br />
Click <a href="about:blank" onclick="OpenLightBox(); return false;">this link</a> to see how the Light Box is working.<br /><br /><br />
The LightBox effect is nice, hope you find it useful!<br /><br /><br />
<div id="LightBoxSampleDiv" style="display: none;">
	You won't see me at first. Put anything you like in here.<br /><br /><br />
	<button type="button" onclick="SampleFunction();">Just Some Button</button><br /><br /><br />
	<button type="button" id="btnCloseBox" onclick="alert('you clicked the Close button');">Close</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<button type="button" onclick="LightBoxLite.Close();">Cancel</button>
</div>
</body>
</html>

**due to technical reasons, I can't post full JS code here,
please download the zip file to see and use the Javascript code.

Attached Files

LightBoxLite.zip (2.0 KB, 238 views)

__________________

Visit The Windows Scripting Guru

Last edited by Shadow Wizard : September 25th, 2007 at 09:25 AM.

August 5th, 2007, 10:32 AM

jmurrayhead

Moderator

Join Date: Feb 2004

Location: Reston, VA, USA

Posts: 13,090

Folding Points: 84888 Folding Title: Advanced Folder

Time spent in forums: 3 Months 1 Week 6 h 32 m 27 sec
Reputation Power: 1580

Hey Shadow,

Error: Line 37
Expected: ')'

__________________
jmurrayhead

Did I help you out? Make me popular by clicking the

icon!

New Members:Proper way to post a question

Powered by ASP.Net

August 6th, 2007, 01:00 AM

Shadow Wizard

Moderator From Beyond

Join Date: Sep 2004

Location: Israel

Posts: 27,276

Time spent in forums: 3 Months 1 Week 6 Days 13 h 24 m 17 sec
Reputation Power: 1795

sorry JMH but I've just downloaded the zip to clean location,
unzipped and tested and it works flawlessly in both IE and Firefox.
what exactly have you done that caused this error?
also, try using FireFox, it has Error Console that can show the real
code causing error, not just cryptic line number.

apart of all that, line 37 is this:

Code:

LightBoxLite.ShowInnerElement(LightBoxLite._innerE  lement);

honestly, it can't generate such error so it must be something else.

edit: oh my.. I see what happened - you copied the code, and
the forum added blank spaces to break long words. I'm going to
remove the JS code now from the post, use the zip file only.

August 6th, 2007, 02:52 AM

shem

Shemzilla

Join Date: Aug 2005

Location: Table View, Cape Town, S.A

Posts: 3,367

Folding Points: 17744 Folding Title: Novice Folder

Time spent in forums: 2 Weeks 5 Days 16 m 14 sec
Reputation Power: 531

any chance you could animate the opening of the window?

Shem

__________________
Everyone has a photographic memory. Some don't have film.
I am a nobody, nobody is perfect, therefore I am perfect.

August 6th, 2007, 03:12 AM

Shadow Wizard

Moderator From Beyond

Join Date: Sep 2004

Location: Israel

Posts: 27,276

Time spent in forums: 3 Months 1 Week 6 Days 13 h 24 m 17 sec
Reputation Power: 1795

Quote:

Originally Posted by shem

any chance you could animate the opening of the window?

Shem

this will require the thousands lines of code that I omitted.. so no, there's
no point in rebuilding the same thing.

want something fancy, cool and heavy? use what you have now.
prefer something light and simple? use the code above - the choice is
all yours.

by the way Shemzilla, thanks - you showed me the original code, and I've
decided to show this to my bosses and they're really happy now..

August 6th, 2007, 03:49 AM

shem

Shemzilla

Join Date: Aug 2005

Location: Table View, Cape Town, S.A

Posts: 3,367

Time spent in forums: 2 Weeks 5 Days 16 m 14 sec
Reputation Power: 531

Quote:

Originally Posted by Shadow Wizard

by the way Shemzilla, thanks - you showed me the original code, and I've
decided to show this to my bosses and they're really happy now..

glad i could be of service

Shemzilla

August 6th, 2007, 08:09 AM

jmurrayhead

Moderator

Join Date: Feb 2004

Location: Reston, VA, USA

Posts: 13,090

Time spent in forums: 3 Months 1 Week 6 h 32 m 27 sec
Reputation Power: 1580

Quote:

Originally Posted by Shadow Wizard

edit: oh my.. I see what happened - you copied the code, and
the forum added blank spaces to break long words. I'm going to
remove the JS code now from the post, use the zip file only.

Indeed, I got it working eventually. Sorry took so long to post back what happened, been really busy

BTW, very nice script

August 6th, 2007, 08:25 AM

Shadow Wizard

Moderator From Beyond

Join Date: Sep 2004

Location: Israel

Posts: 27,276

Time spent in forums: 3 Months 1 Week 6 Days 13 h 24 m 17 sec
Reputation Power: 1795

Quote:

Originally Posted by jmurrayhead

Indeed, I got it working eventually. Sorry took so long to post back what happened, been really busy

BTW, very nice script

thanks! actually, I owe this to someone here who posted about
cross browser transparency - couldn't have done this without it.
can't remember who it was though..