Introduction
In user interface design, a modal window (sometimes referred to as a modal dialog) is a window that blocks input to other windows. It has to be closed before the user can continue to operate the application and are frequently an element of Multiple Document Interface (MDI) applications or desktop applications like Windows or OS X. One of their purposes is to prevent the software from being operated in an ambiguous state.
While researching the best way to recreate a modal window for our current project, we ran into Lokesh Dhakar’s lightbox.js and we knew we found a winner delivery container. Dhakar’s method, however, while fantastic, was a bit too specific for our purposes and so we created our own implementation that we think is a bit more flexible for extending a web site’s interface. In this tutorial, we’ll take a look at how to create a modal window using some nifty JavaScript and CSS.
See it in Action
Our demo illustrates a few of the possibilities available to a developer using our Lightbox Gone Wild Script. Just click on the links to see how lightbox can be used to provide additional info, show an image or present a form for user input. Lightbox makes it easy to extend a web application’s interface without having to add clutter.
Implementation
For those of you at work wanting to impress the boss, here’s the low down on getting the script working. After a quick walkthrough, we’ll take a look at the JavaScript and CSS files that make it all tick.
Note: This demo and the tutorial that follows use the Prototype.js framework. You’ll find a compressed version of Prototype in the zip file above.
Include the Files
Upload the lightbox.css, lightbox.js and prototype.js files into your web directory and include them in the head of your html document like so:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" />
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>
Apologies if you’re not a Prototype fan, but it saves a lot of time around here and it’s our flavor of choice. Obviously, you’re always free to reverse engineer any Prototype class into normal JavaScript.
Create some Lightboxes
Create an external document that contains the markup for whatever you want to be loaded into a lightbox. For example, we created a file called text.html and included the following markup:
<h3>What is a Lightbox?</h3>
<p class="highlight">Lightbox is an unobtrusive script used to overlay content on
the current page. Because it places content above your current page, it frees you from
the constraints of the layout, particularly column widths.</p>
Because we’re just inserting the HTML snippets into the lightbox you could display a login form, a photo, additional settings for your web app, help documentation, etc. The possibilities are endless.
Activating Lightbox
To call your lightbox interface, just link to the external file and set the class to lbOn.
<a href="form.html" class="lbOn">Email This</a>
Deactivating Lightbox
If you want people to be able to close the lightbox after it’s open, include a link with class lbAction and a rel of deactivate in the external file:
<a href="#" class="lbAction" rel="deactivate">Close Lightbox.</a>
Linking to a Another Lightbox within a Lightbox
If you want to load a different lightbox within an already open lightbox set the rel attribute to insert and your href to the file you want to load instead.
<a href="confirm.html" class="lbAction" rel="insert">Go to Another Lightbox</a>
And you’re done.
How it Works
In a nutshell, when the user clicks on a link with a class of lbOn, a transparent div is positioned on top of the webpage to present a visual cue that the attention is now focused on our lightbox modal window. After the overlay is set, a div (lightbox) is positioned on top of the transparent overlay and loaded with information the user can interact with. When the page first loads, our script inserts the following markup right before the closing body tag.
<div id="overlay"></div>
<div id="lightbox">
<div id="lbLoadMessage">
<p>Loading</p>
</div>
</div>
The overlay div is responsible for holding dimming the rest of the page. We’ll be inserting our different lightbox interfaces inside the lightbox div. Feel free to change the information inside the lbLoadMessage if you want to present something more exciting than just some text. When the page loads, we’re attaching the lightbox object to each element with a class of lbOn.
function initialize(){
lbox = document.getElementsByClassName('lbOn');
for(i = 0; i < lbox.length; i++) {
valid = new lightbox(lbox[i]);
}
}
One of the differences between the original lightbox.js script and ours is that Dhakar was using JavaScript to determine the size of the HTML content so he could find and fix the position of the lightbox and overlay.png at the center of the screen. Wanting to move as much of the presentation to CSS, we decided to use position:fixed to center our lightbox so that it simplifies things in all modern browsers. Unfortunately, “all modern browsers” doesn’t really include IE6 and below and so we’ll still have to use some JS to help them out.
In IE6, there’s no easy way to stretch the overlay div, which dims our page across the entire content of the HTML document to achieve a position fixed for our lightbox div. (This is a non-problem in the recent IE7 beta, but until that becomes popularly adopted, we’ll need to do the following.) To remedy this problem, we’re just going to use position:absolute instead in the CSS and hide that we’re using position:fixed for IE browsers.
#lightbox{
display:none;
position: absolute;
top:50%;
left:50%;
z-index:9999;
width:500px;
height:400px;
margin:-220px 0 0 -250px;
}
#lightbox[id]{ /* IE6 and below Can't See This */
position:fixed;
}
#overlay{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:5000;
background-color:#000;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
#overlay[id]{ /* IE6 and below Can't See This */
position:fixed;
}
If you’re familiar with Dhakar’s method, you’ll notice that we’ve decided not to use a transparent png to get our effect and instead use CSS for our transparency effect. This makes it easier to change the percentage of transparency and the color of the transparency in the overlay CSS rules. To make the overlay stretch out to the full screen for IE users, we’ll need to set the body and html elements’ height to 100% and the overflow to hidden for those browsers.
prepareIE: function(height, overflow){
bod = document.getElementsByTagName('body')[0];
bod.style.height = height;
bod.style.overflow = overflow;
htm = document.getElementsByTagName('html')[0];
htm.style.height = height;
htm.style.overflow = overflow;
},
To make everything seamless for IE users, we’ll also use a getScroll() function to find the current position of the scrollbar to jump the user to the top of the page where the lightbox is located (because it’s position absolute rather than fixed) and then use setScroll() to bring them back to their location when they deactivate the lightbox.
getScroll() & setScroll()
getScroll:function (){
var yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
}
this.yPos = yScroll;
},
setScroll:function(x, y){
window.scrollTo(x, y);
},
hideSelects()
Due to a bug in IE, select elements tend to position themselves on top of the overlay (on to of everything actually, including flash). To fix this, we’re just going to hide them. We’ve also had some problems with Firefox and Flash 8. If you’re using the latest Flash in your application, you can modify the script to hide them too.
hideSelects: function(visibility){
selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++) {
selects[i].style.visibility = visibility;
}
},
The Lightbox Class
initialize()
The most important thing initialize() does is attachactivate() to the link onclick, which gets the lightbox process rolling.
initialize: function(ctrl) {
this.content = ctrl.href;
Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
ctrl.onclick = function(){return false;};
},
activate()
activate() calls the methods responsible for setting the png overlay, manipulating the scrollbar position, and displaying the empty lightbox div.
activate: function(){
if (browser == 'Internet Explorer'){
this.getScroll();
this.prepareIE('100%', 'hidden');
this.setScroll(0,0);
this.hideSelects('hidden');
}
this.displayLightbox("block");
},
displayLightbox()
The last method called in activate() is displayLightbox(). This method sets the overlay and lightbox classes to display:block, and makes the png overlay and lightbox visible. displayLightbox() then calls loadinfo() to populate the empty lightbox div with information.
displayLightbox: function(display){
$('overlay').style.display = display;
$('lightbox').style.display = display;
if(display != 'none') this.loadInfo();
},
loadInfo()
During initialize(), a member variable, content, was created in order to hold a file location. Using this file location, loadInfo() pulls information into the lightbox. After the info is loaded into the lightbox, processInfo() is called.
loadInfo: function() {
var myAjax = new Ajax.Request(
this.content,
{method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
);
},
processInfo()
Responsible for actually inserting the information into the lightbox class.
processInfo: function(response){
info = "<div id='lbContent'>" + response.responseText + "</div>";
new Insertion.Before($('lbLoadMessage'), info)
$('lightbox').className = "done";
this.actions();
},
actions()
If you want to trigger an event inside of the lightbox, create a link with a class ‘lbAction’. Also, set the link’s rel to the function you want called inside of the lightbox class. For example, we often want the user to have the ability to close the lightbox by clicking the cancel link. deactivate() is the method responsible for closing a lightbox and can be triggered with the following code.
<a href="#" class="lbAction" rel="deactivate">cancel</a>
actions() makes the previous link meaningful with the following code.
actions:function(){
lbActions = document.getElementsByClassName('lbAction');
for(i = 0; i < lbActions.length; i++) {
Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
lbActions[i].onclick = function(){return false;};
}
},
deactivate()
As we saw previously, deactivate() is called when we want to close the lightbox. deactivate() is similar to activate(), but instead of displaying the lightbox and overlay, it removes them. Take note that the information loaded into the lightbox must be removed during deactivate() since the lightbox div is only hidden and not removed.
deactivate:function (){
Element.remove($('lbContent'));
if (browser == "Internet Explorer"){
this.setScroll(0,this.yPos);
this.prepareIE("auto", "auto");
this.hideSelects("visible");
}
this.displayBlock("none");
}
insert()
As we explained in the intro you can easily link to another lightbox from inside a lightbox. insert() is the method which makes this possible and is seen below.
insert: function(e){
link = Event.element(e).parentNode;
Element.remove($('lbContent'));
var myAjax = new Ajax.Request(
link.href,
{method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
);
},
Conclusion
Well, there you have it. We believe the lightbox to be a great tool for presenting more information to a user without taking them to a new page or forcing a pop-up. As I said in the tutorial, there have been some problems with Flash 8 on Firefox and select elements in IE. If you find any other problem areas, please let us know.
UPDATE 2/2/06 : Kevin just made an improvement to the Lightbox CSS file. Instead of using a png for the transparency, the script now uses CSS rules to set the color and percentage of transparency for the div. This will allow for greater customization for those that don’t want to change pngs everytime they want a different feel or effect.
I’d hit it.
(In other words, very nice)
Oh no, the headlights - I’m blind!
Very tasty and lovely, thanks for sharing! I subscribed to your feed yesterday and I am already loving it!
Very nice work.. this is a huge improvement.
Sweet. The same thing crossed my mind upon viewing lightbox but I haven’t had time to develop it. Thanks for the heavy lifting.
Excellent. I was going to look for a way to do this myself, but now that the hard work is done…
I have an account with onlinefilefolder.com, and the UI uses a similar effect with some of it’s dialog boxes. We are sure to see this used more and more in the near future.
I love it. Your code is making mine look slopppy. Nice work!
I spoke with Lokesh a little last week about developing a version which displayed html & other media content rather than images, and he said a version was on the way. The project I’d been working on called for a video gallery, and I thought it’d be cool to have the videos load in a Flash player inside the lightbox instead of having them load in a traditional popup window. I’m going to give it a try. Nice work, Particle Tree.
Works great!
http://www.darrenhoyt.com/lightbox2/
We’ve also customized Lokesh’s Lightbox for out side over at AlwaysBeta.com. We integrated the Moo.FX JS Effects Library so that the overlay and images come and go with fading beauty. You can see an example of our version in action at this post.
I really like this script! It makes so much sense! Why didn’t anybody do this sooner? Way to go Lokesh!
I am using a wordpress plugin version of this on a site I set up for my students. They have reacted very well to it
id.conann.com
Your keeping the “lightbox” title and file name is confusing: is it a fully compatible replacement for the original lightbox?
Btw, what about the progress animation of the original? It’s cruely missing from your implementation, and is really useful/needed/necessary.
Congratulations, this is truly an awesome script. I do have one feature request, though: Would there be some way to assign the URL which it loads through an attribute other than the href?
I ask because I would like to use this in a web application, but for backwards compatibility I need the href to point to a full page, while I would like the lightbox to load a truncated version of the page. Any suggestions?
This part in your code:
Looks like you guys beat me to it! I was working on something similar to this for a project at Harvard and it seems I now have myself some code to play around with. We’re using (or will be using) Lightbox-like functionality to display help for our web application directly on the page, something we all thought would help the user experience.
Thanks for the help, but leave the starred nipples at home next time, will ya?
Would you consider adding the same sort of open source license to the javascript that is used in the prototype javascript? I am considering using it on a tool I’m developing ofor a large oe source project, and the project leaders are quite scrupulous about licensing.
I am really sorry to just login and ask for help, but I wondered if someone could point me in the correct direction as I am not good with javascript.
I have a flash movie, that calls URLS via an HREF. I want to very much use this, but I cannot embed a style tag “lbOn” in a flash movie. So is it possible that I could call a javascript function, using the URL to load as an argument in it?
If so how / what would i modify?
This is awesome but…
please forgive me, but the fact that this breaks the back button might cause a bit of an unpleasant response. I tend to use my keys rather than a mouse, and despite this tend becoming more common, I still use my arrow keys… and end up further back than expected.
How impossible would it be to add support for the ol’ back button and arrow keys?
thanks
Nice stuff guys. You always seem to have relevant info pouring out continously.
A sidenote: I was at work when I was viewing the demo and those headlights sparked quite the conversation.
It’s Dashboard for the web!
I tried uploading the demo to my server - just to test it out, but I received an error. Has anyone else had the lightbox window read, “Method Not Allowed: The requested method POST is not allowed for the URL /lightbox/text.html.”?
The problem can be viewed here.
Great stuff.
I’m been thinking of putting something like this to work in a current project I’m working on, will certainly refer back to here when I’m ready to tackle that part of the project.
Sumeet - are you using Safari? I think I remember having a problem with the POST in Safari on OSX and changing the POST a GET fixed it.
David H - Sorry about the headlights =)
alexander - Thanks for the heads up.
David K - You could modify the script to pull the page loaded into the lightbox from a custom attribute, hidden field, or rel probably.
Ben - Everything we offer is under a Creative Commons license. Go nuts.
Alain - We didn’t include a preloader in ours and I agree, it would make a good addition.
what if my images are all different in size? original lightbox would open a window based on the image size. here, the window size is set in .css
what’s a workaround? thanks. great script otherwise.
Nice work guys. Very cool. I wanted to get it work in a select list, so I modified the initialize function to be the following:
Seems to work, but do you have any thoughts or suggestions?
Chris, I was using Firefox (for the PC), but changing the ‘post’ to ‘get’ in the lightbox.js file did the trick. Hopefully this doesn’t damage it in any other browser.
Thanks for the help.
First of all, great script! This is a great one :)
I’m having problems in IE with the scrollbar going to the top and not coming back down when exiting the lightbox.
This doesn’t seem to be working: setScroll() to bring them back to their location when they deactivate the lightbox.
Any idears why? Thanks.
This is lovely code - well done. Great, practical examples are flooding my head already … clients, beware.
Bit disappointed that the page has to fully load before the overlay works. Can someone work on this? I love the effect but having visitors use the Back button because the image has loaded in a new window prevents me using this method. Must be a way to do this I will wait.
Can the script be configured to load a PHP doc (mypage.php) as well as an HTML? My forms use PHP and I’d like to them with lightbox…
A brilliant artice, as always guys.
A few comments on the script though, that I feel are important.
If you are using google analytics, it will actually break the script and cause your page to load nothing. Well, I say that, but I mean it loads the html into the page but will not display. I havent managed to track down the reason for this as of yet, but the url that google asks you to include and subsequently breaks the world is: http://www.google-analytics.com/urchin.js
Also, you have to watch out if you are using multiple style sheets, as if the lightbox.css code is not in the current style sheet, it wont work either, from the testing that I have done on it.
Ill get back to you if I can figure out this google problem, but I wouldnt hold my breath!
The updated .css does not work properly with Opera?
Also, when displaying this on a page with Yahoo Publisher Network ads, the YPN ads always stay on top in Opera.
Any ideas for either?
Yeah I noticed that too, in Opera (I’m using Opera 8.01) the background is black and non transparent.
Appart from that it’s a nice script.
realy nice :)
is it possible to run it from an external page loaded to a iframe?
Greg - I am not familiar with the Yahoo ads, but do they have any z-index that comes along with them? If so, just try setting the lightbox z-index to a higher number. But if the problem only occurs in Opera, then I have no clue :(
has anyone been successful in loading both the original and l-g-w scripts on the same page? IE gives an error; Firefox works fine.
How would I submit a form that is shown in a lightbox to the page that opened it ? (eg. not to another lightbox, close the box and submit the info)
IE 5 and IE 5.5 don’t call the javascript function but load the page called by the function in the window. I don’t understand, it seems i’m the only one having this problem :(
i seem 2 b getting a Method not allowed error screen on my lightbox (http://www.amweb-design.com/beta/) what m i doing wrong?
@austin…………
I did some searching for you, and came up with very little. It seems you need to turn the POST method on in Apache???. If you don’t have access to the server, check with your hosting company or system administrator.
Just what I could gather from Google anyway. I hope that helps.
Hey guys,
Seems i’ve discovered a little bug. When the lightbox is active, the link that you called it from is also active. When you press ENTER on your keyboard, it will create a duplicate of the lightbox page in the lightbox. This will continue to happen as many times you press Enter.
I’ve tested this in Firefox and in IE and both seem to have similar responses. Another odd bug in IE is that it seems to add about 20px to the page width once you close the lightbox.
I also tried using this with the original Lightbox JS so I could use that for images and this script for other content; however, they didn’t seem to play together.
Can’t wait to try this again! Great job!
Grey, i have cpanel control panel where i can go into the apache extensions but thats it. IS that what i need 2 go into?
my msn is austinm22@hotmail.com
Hey guys,
Here is a screenshot of the bug. See if you can call it by pressing [enter] again after you have already activated a lightbox.
http://img92.imageshack.us/img92/5486/buglightbox8pb.gif
Hi
First of all I think the script is awesome!! Just having a problem however after I uploaded the files to my fasthosts.co.uk server, I get the following error
HTTP Error 405 - The HTTP verb used to access this page is not allowed.
Internet Information Services (IIS)
Anyone got any ideas as to why this might be happening ?
Many Thanks
Malcolm
Shakeeb - thanks for posting that. The fix shoud be pretty easy. The two options are:
1) Use event.stopObserving to remove the event handler from the link when the Lightbox is active
or
2) Switch the focus to the first node in the lightbox once it is loaded.
Good job finding that bug though.
nice! i was picking away at the orig to handle video etc… didnt work very well but then i found this and tried it out. very nice…. but not perfect for handling rich-media yet. i will take a look at the code and see what possible external work-arounds i can try.
basically, in Firefox on WIN, most media players will only appear occasionally but sometimes fall behind the z-indexed container and you only hear the audio playing but no player or video appears.
i’d say half the time it works…. IE is fine except we need to add new code to kill the media player otherwise it gets left playing despite killing lightbox, obviosuly. so i tried iframe and load a blank.txt targeted when lightbox disable link is clicked…as the low-tech approach. no joy yet. will maybe add some js.
anyway, i’ll touch back here if i have anything worthy to offer.
anyone else working on media handling inside this thing?
Does anyone have a solution for IE5/IE5.5? If it’s not going to load the html file in the light box, I’d like to load either a popup or a different HTML file, complete with my site’s navigation. Anyone up to the challenge?
you’ve created exactly what I’ve been trying to do for the last week (I have next to no javascript skills)
mad respect!
greetings from germany,
Alex
Great extension of LightBox.
However I have one comment: When loading a text document using AJAX you cannot always make sure the document fits into the LightBox. When the text comes from a dynamic source - I would be nice if the LightBox would either enlarge itself to display the text completely (preferred) or show scrollbars within the LightBox.
I’d like to use your (very nice) mod to open a Flash video player in a lightbox. However, I need to pass a variable (containing the name of the video file) to the SWF.
Is there any way to do this?
Since the whole thing happens client side, I guess my PHP knowledge isn’t of any particular use here.
Unfortunately, my javascripting skills are not very polished (to say the least). All the things I tried so far killed the lightbox.
Can anyone help?
For people having problems with the “Method not allowed error”: Open lightbox.js and go to line 126. Change the method from ‘post’ to ‘get’
you have to change the POST to GET in the lightbox.js file and it i will work fine!
Flo,
How would you pass a variable from PHP to SWF?
Great extension on the original LightBox. I’m implementing it in something right now.
I don’t get how you fix the “enter” key press double up.
you said to
1) Use event.stopObserving to remove the event handler from the link when the Lightbox is active
or
2) Switch the focus to the first node in the lightbox once it is loaded.
Could you give a an example of where/how to do this?
Well, I finally wrote my post about our customization of Lightbox at alwaysBETA. Our main change was altering the script to use animations, but there are a few other small changes as well. You can read it right here.
It’s still specific to images, but that was all we needed.
If you want to switch the focus to the lightbox add this to the displayLightBox function
if ( display == ‘block’ ) { $(‘lightbox’).focus(); }
Not a huge expert on JS - but trying to use lightbox to display different images of different sizes for a gallery page - can the lightbox auto-adjust depending on the image - or are the CSS sizes locked. Thanks
Congratulations… nice work on the script. Im my ‘home’ tests… everything went ok… but using one of my hosts…. i got the ‘METHOD NOT ALLOWED’ error. I read the reports here, but i don’t intend to use GET when not needed (IE cache … ). I changed all the .html files being linked to .php … and voila. Everything works fine.
For those of you wondering how to deal with the height of the lightbox, you can add a scrollbar to the inside of the lightbox by using overflow: auto and setting a specific height.
@ Minor:
In PHP I’d either add the variable to the SWF’s source, like this:
” /> . . . ” />
or use the new flashvars parameter, like this:
” /> . . . ” />
I tried to pass the variable via JavaScript, but “document.write” seems to kill the Lightbox.
Any ideas?
Oops, my code didn’t go through. What tags do I have to use, to get it right?
Hi all!
I’m from Hungary, and I’d liket to use Lightbox to display hungarian characters too… (i.e. á,é,ő,í,ó,ü,ö.ű)
These chars aren’t displayed correctly in Lightbox, all browsers displayed a ‘?’. How can I fix this? Any solutions? I replaced these special chars like this: á=á é=é etc.
And the problem solved… BUT!
If I display data from a MySQL database, the error occurs again, because I don’t know how can I encode with PHP these chars..
So what are your experiences about special chars?
THX for your answers!
PS: this script is really good.. :D
Wondering how you would go about (or if anyone has done this yet) creating a lightbox gallery…
click on thumb > big image appears > click on “next” from the lightbox > next big image appears.
I couldn’t get the lightbox in a lightbox to work.
super!
is there a easy way to use lightbox with the body onload method? i want to show automatically a disclaimer when opening my page.
thx in advance for your answer!
Hi all! My problem is solved, you know the headers… Ouch :P
header(“Content-Type: text/html; charset=iso-8859-2”);
I’ve the same problem as Pete: I couldn’t get the lightbox in a lightbox to work.
Why? I’ve tested it in all case, but it isn’t working.. :((
It would be very important, please email us if you know the solution…
Yeah, so I was serving as application/xml+xhtml and couldn’t get it to work. Changing it to html works here… but is poor form.
Any word?
regarding the use of embedded rich-media, i spent some time attempting to get that working…. i’ve tried several techniques but my results are the same. works in IE and seems to work in Opera, but Firefox still is about a 50% failure. Flash is ok, using wmode=transparent, but quicktime, wmp, real etc are problematic in FF. I have not tried on mac yet.
I might try a few more hacks this weekend… but if anyone has suggestions, i’d love to know them…. because this is a great way to watch video on a web within a web page.
Here is an example videoblog entry using the current implementation on my site: http://vlogdir.com/permalink/535
post here or email me if you would like to discuss- michael -@- vlogdir.com
thanks.
sull
I have been following this thread ever since i discovered light box yesterday and immediately thought of the potential to use it with video. Unfortunately I am a javascript retard so I can not help there, but I am willing to do testing on the Mac browsers. Here is what I have discovered so far while playing with your implementation for just a few minutes.
Version 2.0.3 (417.8)
I got it to play every time without any trouble. The only little weirdness occurs when you interact with the movie in any way e.g. click on it to pause or use the controls, and THEN mouse over the close window link - you do not get the hand. if you click anyway outside the light box and then mouse over the link again, the hand is back. however, the link still works either way.
back button works. did you implement this? i was under the impression that the original lightbox did not have this functionality.
Firefox 1.5.0.1
sometimes does not work at all.
when it works, it sometime ‘draws’ the controls as the slider is moving along the timeline.
when the movie is paused and you click outside the box the movie disappears.
if the movie is playing and you click out side the box, the controls disappear and it starts to redraw the timeline bar from the position that the slider is at.
back button does not work
I also tested this a little bit in IE 5.2 for mac but I will not go into details since that browser is basically dead. but I could if you wanted to.
I sooooo want this to work. I can not even tell you how bad I want this to work.
The end.
Anathema
Great extension to lightbox!! Unfortunately, I think the use of prototype.js breaks it for me when I try to use it with Walterzorn’s DHTML scripts. In particular, the dynamic window example breaks down horribly: http://www.walterzorn.com/dragdrop/demos/window.htm
I’d appreciate any ideas on how to make that window appear in a lightbox.
Thanks for the great work so far!
I too cannot get the the link class=”lbAction” rel=”insert”>
to insert a new lightbox html within the lightbox any solutions found out there?
Great job with this lightbox - it works great.
I did have one issue, that hopefully someone here can help me with. I am using the lightbox to display a flash movie. I’m able to get the movie to load up just fine, but on IE when I close the lightbox, the movie keeps playing and you can hear the sound in the background.
It’s very annoying… does anyone know how to remedy this?
michael, try wmode=transparent?
although i am having this problem half the time with other media players….. on firefox/win…. but flash seems ok, though not fully tested on mac.
some tests that i was doing last week… http://vlogdir.com/lightbox_test.htm
Quick question … does this implementation of lightbox eval() the javascript that comes back with the loaded page?
Method Not Allowed The requested method POST is not allowed for the URL /text.html.
I’m getting that, anyone have any ideas as to why?? I’ve put every thing on the server and this WORKS on my computer!
http://www.apachestudios.com/lightbox/
See above, that is my site, I don’t understand why this isn’t working like it does on the computer. Anyone??
Particletree deserves a hug.
I’ve been looking to do this with the lightbox script ever since I first saw it. I emailed Lokesh to see if he had any plans to incorporate the ability to add links, etc. He suggested I look around and see if I can find any DHTML resources that I could implement myself. I wasn’t looking forward to hacking the code myself. Thanks a lot guys!
For those having issues, change POST to GET, and that should clear up the problem.
Excellent, works a treat now, thank you!
This looks rather similar to subModal:
http://www.subimage.com/sublog/subModal
submodal… i think i actually knew of that script long time ago now that you mention it.
its nice too!
For people who are on IIS and have the POST error.
Try this:
http://www.somacon.com/p126.php
When i changed that post to the gets it would not do that popup. I did what they said on that page and everything worked fine.
Is there any suggestion as to how I could present a form in the lightbox and on submit have the receiving script output back message back into the the lightbox.
The receiving post pl program would normally use part of the submission as input to another program and also record all variables into a db.
Thanks for any feedback
Is there a way to get the lightbox display to resize to the content (i.e., the image) inside of it? Every image I try to load looks squished/out of proportion.
Kevin
Has anyone actually gotten this to work submitting a form and replacing the text in the lightbox?
Great script.
In Opera it seems to conflict with iframes with the iframe displaying on top of the lightbox, even if the iframe’s z-Index is lower.
Also, background turns black, not transparent, in Opera.
Seems like these problems have been posted already though.
Thanks
TOPIC: FORM POST BACK RESPONSE with AJAX
Just discovered this..
Here is interesting possibiltiy to work with Form GET or POST and receive response to insert back into webpage.
http://developer.yahoo.net/yui/connection/index.html
Please update us if you get it to work.
Amazing script. I’m excited to use it on my own projects.
One problem I ran into is if I use this on a page with a vertical scrollbar, launch the lightbox, and then close it, in IE on Windows, I get a horizontal scrollbar. I have centered content and can visibly see it shift to the right when I launch the lightbox. This not only occurred on my local copy but on the copy posted on this site when I shrunk the browser window’s height enough to create a vertical scrollbar.
If anyone has any ideas, I’d really appreciate it.
thanks!
Great script! Is there a way to automatically display a light box on page load? Any help is much appreciated!
If anyone cares about the above scrollbar problem I encountered above, I fixed it by separating the overflow property into overflowX and overflowY in the prepareIE function and using hidden and auto respectively and reversing them in the deactivate function. I also changed the height property in the deactivate function from auto to 100%. The scrollbars act the same in IE now as it does in Firefox and Safari.
Ok my site http://www.amweb-design.com/beta/ > on the feature site pic im launching the lightbox and i want to add the loading screen that the orignial light box has but for some reason it just shows it up in the top corner and dont show the pic just the regular X but the pic is there i know. What am i doing wrong?
my msn is: austinm22 my aim is: austingmc04
Thanks in advance!
It’s very nice script … but i have a problem with view the get and post variables when i use { class=”lbAction” rel=”insert”} using form how can i use this script with php echo $_POST or $_GET vars using form …
What browsers does this work with?
Also is there a way to make it a scrollable box?
This is awesome, however, I’m having small difficulties with it in .NET. If I open the file on the hardrive, it works great - as soon as I test it on localhost through .NET (or on the .NET server), it says “page cannot be displayed” - can anyone think of a reason why?
Just to clarify, the lightbox appears, but the imported .html file doesn’t show up (page cannot be displayed error). Thanks to anyone who might know a solution…
Love it! thank you. I have implemented it into my new portfolio site:
dmsdesigns
I have managed to break it in IE, but that will be fixed soon, thanks again.
dustin
In the original script the images are called like this:
image #1
so there is no need for creating a separate page for each image. is there way to call the images like in the original version?
thanks.
Is there any reason this wouldn’t work on Textpattern? I tried it on 2 different sites and it doesn’t work on either. However, if I just upload the demo forms it works fine.
Anyone???
Hi guys
I have in the form tag
...action="send.php" method="post"...and I used the submit button …input type=”submit” value=”Send”…
but the script not running
Where is the problem, please?
Great script. It works just fine unless I display my content using:
JS: document.getElementById(“subcontent”).innerHTML = content;
HTML:
Basically I am inserting a bunch of elements using .innetHTML and they show up with no problem, yet the script does not activate when I click on the link.
How would I go about fixing it?
Well todd, i too can’t get the insert links to work. And since there is no example on this site, i guess the never have worked.
For anyone having trouble with pulling outside information into the lightbox when you click on a link with rel=”insert” class=”lbAction”, go into the lightbox script and in the insert function, change link = Event.element(e).parentNode to link = Event.element(e). In the demo, there was a button inside of the link. If you are just using a link, do not need the .parentNode.
Works great Chris, thanks.
Hey all,
I sure would love to know exactly how mike fixed the horizontal scrollbar problem in IE he mentions above. Mike: if you are there, can you post your modified PrepareIE and Deactivate functions for us non-coders?
And…
I’ve been tinkering with using a form within Lightbox, but have not been successful in sending the actual contents of the form to an email address.
I’ve used aformmail.php and mailer.php (both free scripts that work well in most situations) - these scripts actually fire inside a lightbox, but the email they send is void of any info typed in the actual form.
Any assistance with this would be greatly appreciated…has anyone been successful at actually sending the contents of a lightbox form to an email address???
Thanks!
Flash doesnt seem to work well inside the lightbox window. After many tests I have found this:
Flash works perfectly if you launch the lightbox window right after the page loads. Then it will be fine even if you open and close the window multiple times.
The flash object wont display if you wait for a few seconds or more after the page has loaded and then launch the lightbox window.
I will continue trying to get this to work, any help is appreciated.
Slow down. I wrote something very similar a few years ago (I called it modalDiv - not a cool name but very self explanatory). And “lightbox” seems to suffer the exact same problem: it is not modal.
I’ve tested lightbox here: http://www.darrenhoyt.com/lightbox2/
I tested in IE6 and FF 1.5.01 - both “fail”.
The problem? You can tab to any focusable element anywhere on the page. The “benefit” as described, that the lightbox is not “in” the page but “on” the page is pretty meaningless. The div itself is part of the DOM and the elements available are… well, still available. Which, in my book, does not amount to modal.
Sorry guys.
russ
Hey guys,
I tried to implement a flash video player myself. First I had problems with displaying the whole flash file. Often nothing has been displayed. After adding a element before the flash tags, it seems to work. It would be cool if somebody could test it as well: http://marcelfahle.com/2006/02/20/lightbox-is-going-wilder/
Thanks guys!
Russ - You’re correct that this demo is not completly modal. However, for a majority of applications this will work out just fine. In the cases where a true modal window is needed, we can trap the tab key. This has been requested by a few people, so when we get around to implementing it on our own version, we’ll be sure to update this feature.
For the record, the demo Russ put up works fine in Firefox 1.5.0.1 (Mac)
Terrible choice for a test video though. I will assume he was trying to be annoying on purpose and forgive him.
Yep, the error with flash has to do with whether it has loaded or not. If it has not yet loaded in firefox and you launch the window it will show correctly.
If it has been loaded and the flash has “started” then it will not show. This explains the reason why it would only work if I launched it right away.
Also, if you launch a flash file and it begins playing and then you close it, the music keeps on playing.
Hmm got it working by adding:
wmode=transparent
Check it out on my site, http://www.gamegum.com
Does anyone know how one should correctly DOM reference a script function contain within page in a lightbox form presented page.
my server response javascript invokes the script on the page containing the form when outside of the lightbox by:
however when the form is displayed within the lightbox, I cannot seem to get it to reference.
Any DOM reference I should use: looking at the lightbox.js script I thought it should be something like:
div.lbContent.handleResponse()
or
document.getElementByID(“lbContent”)
in the postback javascript to get to my handleResponse() function.
any suggestions appreciated.
Ryan said: In the cases where a true modal window is needed, we can trap the tab key
Ryan, what about the Return/Enter keys? What if submit is the default “underneath”? And pray tell what about accessKey!? And, how then to achieve what Chris said in the original post, quote: “One of their purposes is to prevent the software from being operated in an ambiguous state.”
Only true modality will accomplish that. While any input device (ie not just a keyboard) can gain access to any input element “beneath” the so-called modal element (lightbox here)… it aint modal. Like I said- sorry.
I was much sorrier a few years ago when I wrote my own and figured there was no real cure for the problem.
Anathema: the demo was not put up by me (see a much earlier comment above). I just looked through the comments searching for one that linked to a suitable lightbox demo for the test.
Did you try tabbing around and watch carefully for the focus landing on the control in the page beneath? I don’t have a mac to check… but I’d be surprised if the mac’s dom support suddenly knew how to mind-read the programmer’s intention and disable all input to all controls beneath the lightbox. Sorry, but psychic dom binding has been held over until firefox 2.0 ;)
If you have one built locally, try a full-fledged form beneath the lightbox - position it so that you can see it, if that helps. Can you - using the keyboard - gain access to the form controls? If you can - LB is not modal. Period.
russ
Russ - Trapping the return/enter key would be fine also. Just add these steps to the code:
1) When the lightbox loads up, disable all form submits, and when it closes, enable them. Around 8 more lines of code.
2) Find every form element, and send its focus to the lightbox if it receives focus. This will get rid of the accesskey problem. Around 8 more lines also.
3) Send a tab key press anywhere on the document to the lightbox, unless you’re already in a lightbox element.
Anyway, my point is that all of these steps can be added. And even more can be added based on how much you need. Will it ever be 100% modal? Probably not, because some crazy input device will break it. But 99% of the time it will work out.
i would also like to know how to use this with the onload event… any suggestions?
Thanks for the nice script I have changed to so when you click on the gray area it deactivates the lightbox… here is the code
displayLightbox: function(display){ $(‘overlay’).style.display = display; $(‘lightbox’).style.display = display; if(display != ‘none’) { Event.observe(‘overlay’, ‘click’, this.deactivate.bindAsEventListener(this), false); this.loadInfo(); } }
I just added the Event.observe(‘overlay’, ‘click’, this.deactivate.bindAsEventListener(this), false);
though this might help someone… if anyone sees a problem with this let me know.
thanks again Particletree
What’s the best way to pass variables from the main page to the lightbox content? Here’s a method that worked for me. Can you suggest a better solution?
The main page includes a link to create a Lightbox overlay:
Turn on LightboxInitialize() in Lightbox.js is edited to become:
initialize: function(ctrl) { this.hrefarray = ctrl.href.split("?"); this.content = this.hrefarray[0]; this.pars = this.hrefarray[1]; alert(this.content); alert(this.pars); Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false); ctrl.onclick = function(){return false;}; },and LoadInfo() becomes:
loadInfo: function() { var myAjax = new Ajax.Request( this.content, {method: 'get', parameters: this.pars, onComplete: this.processInfo.bindAsEventListener(this)} );This solution passes variables to the code driving the lightbox in ‘GET’ format.
hello there, i like your modification pretty much - but i do also like the alwaysbeta mod! is there any possibility to use it together? i just tried mixing the scripts together, but it didn’t really work at all…
anybody tried that? regards, leo from germany :)
Lightbox sucks, SubModal rules, lightbox can’t do shit…
http://www.subimage.com/sublog/subModal
Hi I’m really new to javascript and I’ve finally managed to get the lightbox to show up by adding the lightbox.css into my original css (instead of using multiple css), however, the image wouldn’t load in the lightbox and (maybe because of that) I can’t close the lightbox when I click on the while area.
Here is the link http://testbed.shirster.com/wp/portfolio/
Any help appreciated ! ;)
Great script. So easy and it works so well. And it has tons of possible applications.
I’ve found two “solutions” for older browsers (afaik it does not work for IE5 and Konquerrer seems to give problems too):
put a div somewhere in the “included” html-file, with some text about the user using an old browser and a link to go back. Make this div (via its class) invisible using the css of the main file - this is not read by the html-file itself and browsers showing only this file will show this text.
use a php-file to be “included”. Test if the referer is the main file. If it is, this means the browser shows only this file and let it redirect (via the header function) to a proper html-php file. If the referer isn’t the main file, there is a lightbox and the actual file can be shown. (This goes wrong for people who have made their referers invisible, but one could safely assume such visitors are using the latest version of Firefox… ;) )
I am also wondering how you would pass the POST variables of a form contained in lightbox to a php confirmation script contained in lightbox.
I’ve seen it asked a couple times above, but haven’t really found a concise answer.
The problem is that you have to use a form to pass POST variables. However, in a form, you cannot add the class=”lbAction” or rel=”insert” tags to the target of the form.
Thanks for any help you can offer. I will keep working at it as well.
Hi!
Thanks for the great tool! I would like to make this work for a link within a Yahoo map customPOI marker. So far I’ve gotten the lightbox to work when the link is outside the map, but within the map is a different story.
Here’s my example: MAP
Thanks for any help!
Brandon
Sorry! um here’s the url to the above example: http://www.bittercyclist.com/maps/accmap.php
Oh… I have found a problem. I have a document that contains some Greek text. That is fine, no problems displaying it, as I’ve set the charset to iso-8859-7. However… if I copy the same Greek text to the html-file that contains the lightbox, it displays only a series of questionmarks. Weird!
Someone mentioned above that it could have to do with setting the character set. It is set correctly for the main document. Is there perhaps a way to set it for the included html-file as well?
Okay, I have found by now the problem has to do with Javascript reading from files as if they were UTF-8 encoded, while the file in fact is ISO-8859-7. So I have two questions: 1. where exactly in the prototype.js does it read the file (the lightbox-html-file)? 2. how to change this to read said file as an ISO-8859-7-file?
I had a couple of problems with IE. The first was that the content of the page disappeared after deactivating the lightbox. The second was that the window would not scroll to the top after the first lightbox click so the lightbox and shade would only cover part of the screen.
The problem was that having an auto height on the html and body tag messed up my template. The solution I found was to set the height as an empty string then it will revert to whatever style you’ve defined in your CSS.
I solved it by changing this.prepareIE(“auto”, “auto”); to this.prepareIE(“”, “”); in the deactivate function.
This should work fine as long as you have the styles for your html and body tag in a style tag or external file and not in a style attribute.
In the future it would probably be a good idea to revert to whatever height had been set before the lightbox was activated insteading of assuming that “auto” won’t cause problems.
Well, I can confirm that instead of going into the lightbox.js and changing the post methods to get, changing the links that you’re pulling up in the lightbox to .php from .html allows it to work… no more method not allowed error. Also remember that just because you change the extension and filetype to .php, doesn’t necessarily mean you have to recode anything as long as you don’t include the ?php tags in the document.
Also, I’ve been toying around with a few different ways to try to get a post form (like an email form and confirmation) to work properly in the lightbox.
I tried the Yahoo utility posted somewhere up the page to no avail. Also, I’ve tried several different ways of using javascript. I tried leaving off the rel tag of the form, so that it will still work, but then attaching an onClick js to the submit button that added the rel tag. This didn’t work. I also tried using the button shown in the demo and attaching to it a js that submitted the form. This also did not work.
If anyone gets this to work, PLEASE let us know. You can see my current implementation at no bs web design on the contact link
Thank you.
@Bhaal: it took me a little wile to figure out Mike’s script to not get a horizontal scollbar in IE, but it is as follows:
change the prepareIE-function as follows:
and then change the two times this function is called to this.prepareIE(‘100%’, ‘hidden’,’auto’); (in the activate-function) and this.prepareIE(“auto”, “auto”,”hidden”); (in the deactivate-function)
As far as i can se lightbox waits to display the image until it is fully loadet !? - Can any one explaine me how to do that ? - Am a javascript noob and can’t figure out the prototype code :-)
Nice thingy, optical…. no doubt.
But….. ….for what are we all creating websites? generally to show a companies CI, to inform your customers, to generate income, to explain your work, etc.
and this is the point! javascript will NOT be spidered by google or other search engines. but okay, your links are in the HTML-part of the site and google will follow them. but now open just one of the links and look at the page in your browser. no CSS, no formating…. thank god, you at least entered backlinks! ;)
in google it will look like this: every of the pages will be spidered, but the text.html, image.html and form.html will be spidered like frames as single pages without any information about CSS or javascript. if you now hit one of the displayed google links, you will land on a page without the mentioned CSS, javascript or formatting.
Is that what you want your customers to see? ;)
This is pretty sweet. I’ve used in my email newsletter software, http://www.primomailer.com.
There’s still some wierdness going on where it doesn’t quite center on the screen on lower reslution (800x600), otherwise it works great to preview drafted campaigns without leaving the page.
Otherwise, grat job!
sebotroniker,
You raise a good point aout Google and other search engines providing links to pages sans style information.
However, from all of the posts that I’ve read on this page, no one has talked of putting information in these boxes that they would want indexed in the first place. You generally don’t really need a link on google that goes to a simple contact form that doesn’t provide any other info, or to a flash video or picture viewer, or to a disclaimer, or to a login script (these pretty much cover everything I’ve read here).
But, thanks to your post, a good point is brought up… that when using this form, you should probably explicitly tell the searchbots not to index the linked scripts in your robots.txt.
Please can anyone help me or point me int the rigth direction.. I am trying to build an image gallery with AJAX but my problem is that i don’t wan’t to change the inner html og the image display div until the new image is fully loadet. - I could use an onload event in the image tag but in this case im loading a div with the image as a background… Have searched the net for several days now without finding any solution.. - Sorry if this isn’t the right place to ask but are getting desperate :-)
Me again… It struck me that when a pages has more than one lightbox (or a lightbox that is clicked more than once), the loading-image or -text only appeard upon the first click. I managed to solve this problem by adding the line $(‘lightbox’).className = “loading”; in lightbox.js just after the line this.displayLightbox(“none”);
Could anyone tell me how I would make a lightbox appear automatically when a page loads? Thanks for your help.
Can you use lightbox for login/password application.
Ie, submit a 2 part form (login/password) and then If they are successful, just remove the lightbox and let them in, or unsuccessful, keep the lightbox there and display a error message.
It seems like you can but i wanted to double check before i started hacking at brand new code.
Well, it’s obvious that I’m not the first one to do it — but I needed a Lightbox/Prototype combo myself, and did some quick hacking:
Lightbox coupled with Prototype
Nice work on the Lightbox+Prototype integration. Your blog says that you’ll be adding new features soon, so be sure to come back and update us here when yo do!
While trying to connect Lightbox to my webapp to make a call to display a form caused both Firefox 1.5 and Mozilla 1.7.1 to crash. IE 6 and Opera 7.1 worked just fine. I’ve traced the problem to prototype.js (version 1.4.0) at line 683.
I’ve looked on the website for a place to log bugs but saw nothing listed. Is there someone with whom I can have a conversation with to help ascertain what has occured and caused the browsers to crash? Thank you in advance.
Is it possible to lightbox a div from the same page (i.e. one that initially has display: hidden)? For the times when it isn’t practical have content on a separate.html page.
i don’t know, what can i say, in indonesian languange, it call like this..
anjrit! keren banget! hehehe… :D
nice work! i will implement this script on my website later….
Simon at Eight Media has a nice modification that resolves the issue of search engines indexing lightbox child pages. Take a look: http://www.eight.nl/files/leightbox/
Nice one guys! But if i want to call “lightbox” from a flash movie?!
Thank you so much.
IE just displays “Loading…”, but never actually loads the content.
The background blackens, and the box pops up, but content is just not loaded into the box.
FF works fine. Has this happened to anyone else?
I also need to know how to make this thing appear on a pageload event
Interesting…If i added an PNG background image in the stylesheet. And added the form to be on top. It wont let me focus into the fields. I try playing around with the z-index…Something is wrong..PLEASE HELP
U need a hug.
Hi,
As you suggested, I adapted your -wonderful- code to run without Prototype. It also works in IE and during real pages transitions, thus is can be used to prevent double-submissions, etc.
Find it here -C.
I’ve hardly rewrote original Lightbox-gone-wild script, cause I wanted to remove Prototype functions and use YahooUI libraries instead. After 2 days of difficult reversing I was successful! $) Also I added Drag and Drop for Lightbox and change a look of it using SubModal features. Now it’s draggable, use YUI, have title, and fix small bug when after loading pres enter caused to add content onse more… ( thnx to blur()! ). But for the moment i cant remove TABs -> it’s possible by using TAB and Enter keys to open links on the backgroung page, it’s bad! I’ll try to fix it, if someone have an idea - drop me a line! zoomerr2k [at] inbox [dot] ru You could look at the code here: http://izumoff.j29.net/lightbox_test/ it’s full source here: http://izumoff.j29.net/lightbox_test/lightbox_wild_drag.rar
I’m having a little trouble with the insert function. It’s loading the content from a second page into an open lightbox, but I can’t stop the link from then loading the second page in the browser.
Anyhow, anyone know how to short circuit the link so that it doesn’t call up the new page in the browser after it loads in the lightbox? I tried adding a return false; at the end of the insert function but that didn’t seem to do anything. Thanks.
I think it is a wonderful idea, allowing to remove confusion in the mind of the user. any initiative in this direction is very welcomed. So thank you very much for the excellent idea !
i’ve used it for a project you can view it here: http://www.etc-cte.org/european_theatre_today/index.php?year=2006&action=plays&eid=1 let me know where credits should be placed (source code maybe?)
i need to get this to work to show a flash movie. saw a few references to adding wmode=transparent but i’m not sure where this goes. any help? thanks.
I view ur side very useful and nice thankinging u .
well, wmode=transparent doesn’t seem to do it. here’s a test page for what i’m trying to do.
http://imostlydotv.com/lightbox.htm
it obviously loads the movie, since the audio plays, but there are no visuals. anyone get this to work?
@Josh Adams, et. al:
You can get this to work as a “Please wait” dialog for form uploads with very little additional coding.
Step 1: In lightbox.js replace the original initialize function (starting on line 65) with this initialize: function(ctrl) { if (ctrl.nodeName.toLowerCase() == “a”) { this.content = ctrl.href; Event.observe(ctrl, ‘click’, this.activate.bindAsEventListener(this), false); ctrl.onclick = function(){return false;}; } else if (ctrl.nodeName.toLowerCase() == “form”) { this.content = ctrl.getAttribute(“lbAction”); this.loadInfo(); Event.observe(ctrl, ‘submit’, this.activate.bindAsEventListener(this), false); } else { return false; } },
Then add a class attribute and a “lbAction” attribute to your form:
Note that this may cause unexpected results if you mix links and forms that use the lightbox code on the same page. The reason for this is that in order fot the content of the lightbox to show up when the form is submitted the script has to preload the content, otherwise only a blank modal box pops up. If anyone can find a way around this I’d be interested in hearing it.
Errr, that last box should have contained (hope I get this right, we could really use a preview button!)
>form action=”my.usual.form.action.php” method=”post” enctype=”multipart/form-data” class=”lbOn” lbAction=”/be.patient.this.is.gonna.take.a.while.html”>
OK, I’m screwing this all up. Not to mention that I found several bugs in IE using the code posted above. Let’s try again. This has been tested in IE6 and FF1.5
To use the loght box as an “uploading…” dialog follow these steps:
Step 1: In lightbox.js swap line 54 and 55 so that the two lines are organized like this: Event.observe(window, ‘load’, getBrowserInfo, false); Event.observe(window, ‘load’, initialize, false);
Step 2: In lightbox.js replace the original initialize function (starting on line 65) with this initialize: function(ctrl) { browser = browser; if (ctrl.nodeName.toLowerCase() == “a”) { this.content = ctrl.href; Event.observe(ctrl, ‘click’, this.activate.bindAsEventListener(this), false); ctrl.onclick = function(){return false;}; } else if (ctrl.nodeName.toLowerCase() == “form”) { this.content = ctrl.getAttribute(“lbAction”); if (browser != “Internet Explorer”) {this.loadInfo();} //exclude other browsers here if you see multiple content blocks Event.observe(ctrl, ‘submit’, this.activate.bindAsEventListener(this), false); } else { return false; } },
Step 3: add a class and lbAction attribute to your form: <form action=”my.usual.form.action.php” method=”post” enctype=”multipart/form-data” class=”lbOn” lbAction=”be.patient.this.is.gonna.take.a.while.html”>
The page designated in the lbAction value will be used as the “uploading…” text. Here’s an example: be.patient.this.is.gonna.take.a.while.html —- BOF —- <div id=”takeAwhile” align=”center”> <h2 style=”margin-bottom: 1em;”>Please Be Patient</h2>
<p style=”margin-bottom: 1em;”>Your file is now uploading.</p>
<p style=”margin-bottom: 1em;”>This could take a while…</p>
<!— Note that image src is relative to the file that will call this file, not relative to this particular file —> <p style=”margin-bottom: 1em;”><img src=”images/loading.gif” width=”126” height=”22” hspace=”0” vspace=”0” border=”0” /></p> </div> —- EOF —-
Oh christ its late… remove the “browser = browser” line in step 2. It’s harmless but unnecessary. And why the hell step three is in a different font i can’t know… If an admin wants to clean this up for me, I’d appreciate it. If not, I humbly appologize for the confusion.
i’m having huge problems embedding flash. ff on mac shows the flash, but after clicking it, it goes behind the grey background and is inaccessible. adding wmode=transparent makes things worse as it doesn’t show up at all.
my firefox is pretty pimped, so it could be because of that. however safari and shiira refuse to show it at all on os x.
Hi! It works just fine unless I display my content using:
JS: document.getElementById(“subcontent”).innerHTML = content;
HTML:
Basically I am inserting a bunch of elements using .innetHTML and they show up with no problem, yet the script does not activate when I click on the link.
How would I go about fixing it?
A nice improvement would be if the script supported both the html and pictures (without wrapping them on an html-page).
If you have problems with charset=iso-8859-XX
Write
AddDefaultCharset off
in your .htaccess or in the apache configuration file.
has anyone yet needed a way to set the height and width of the lightbox specifically for each link? i need 1 lightbox to be a certain height and width, and another link to be different dimensions. how can i do it? i can’t use it if all windows have to be the same size (and i’d really like to use it :).
For those having trouble with images, you may need to specify image dimension in css style.
That is :
may not work.
Use instead
Hope this helps.
Regarding the hideSelects() of the .js code: what exactly does Mr. Campbell mean when talking about hiding Flash Player 8?
I’m having problems in IE where the flash movie is displayed on top of the lightbox. Not exactly the effect I’m looking for.
Any help?
Thanks.
strange problem here…
this works fine: insert
and this doesn’t work: insert (blank screen)
:-?
O_o
ok, again…
Linking to a Another Lightbox within a Lightbox this only works with a button-link. the result of clicking a plain text-link is a blank screen.
:-?
Nice work guys.
For anybody that is still struggling with using the POST method from within a lightbox, I managed some progress there.
1) Easiest thing is to first use Prototype’s form.serialize method to produce a string from your form fields (make sure to give your form an id)
2) Make sure that you serialize the form before the lbContent is removed from the lightbox (otherwise there is no form data to post anymore)
3) Use the postBody property instead of the parameters property
So the insert function might look like this:
insert: function(e){ link = Event.element(e).parentNode; var parameterString = Form.serialize(‘formElementID’); Element.remove($(‘lbContent’));
Is there a Lightbox Gone Wild wordpress plugin available?
Thanks
Hello,
I’m trying to impliment lightbox gone wild in Wordpress 2.0 to display flv files. So far, all I’ve been able to get it to do is to display the placeholder with a big ugly X within it along with the animated gif above.
I’ve placed the three links in the top of my page as such:
and in the body of the page:
My test_flv.html looks like:
/f lvplayer.swf?file=//test.flv&autoStart=false"> /flvplayer.swf?file=//test.flv&autoStart=fals e" />Can anyone help to determine why the flv player isn’t appearing as expected in the lightbox container?
Many thanks, Brad
sigh code snippets were stripped… I placed them in code tags.
How to i open/activare the lightbox from a javascript?
On my site, I’d like the user to register for access on a regular page, then when the user clicks the Register button and the registration form is submitted, I’d like a lightbox to appear with the results of the registration script. In other words, I’d like the form to post to a lightbox. Is this possible? If so, how would I go about implementing it?
Thanks for your help!
I also would like to use a POST form inside a lightbox, which posts to within the lightbox.
Is this possible?
…Just want to clarify, I want to post from outside a lightbox to a lightbox. I have a form and when it is submitted, I want the form action to call a lightbox with the post variables.
Amazing script!
Thou, I still have a tiny problem:
I use the script to access a .php page that lists information from a database. When I try to access lightbox for a second time (after I have updated the database content!) IE will only show the content from the first time i accessed .php page via lightbox.
Annoyingly, it works perfect in Safari, and Firefox.
Anyone who got a solution?
oh….this is very great script….
thanks for sharing.
embedding Yahoo! maps in Lightbox possible? When we try it shows up blank.
Echos the nice script. One issue that I’ve run up against though: some of my readers have bad eyes, and hence have their monitors at 1024x768 or 800x600 screen resolution. If I code for them, then the higher res. people have little boxes. If I code for the high res. people, the lightbox expands beyond the edges of the window (I’m putting lots of stuff in the lightboxes).
Any thoughts?
thanks again, G
Has anyone had any luck with getting the lightbox to display on a pageload event, or can someone clue me in on how to call it from inside of a
I need to be able to bring up the lightbox without the user having to click on the actual link
Problem solved…
Seems like IE is caching the page displayed by the lightbox, so by adding
header (‘Cache-Control: pre-check=0, post-check=0, max-age=0’); header (‘Pragma: no-cache’);
Its all good!
Hurra!
Still, Chris needs a hug!
Hi everyone,
I have a problem with the lightbox…
I need to deactivate the lightbox from a function outside the class.
How can I do this?
Thanks
Those trying to get a lightbox to “open” on pageload… here is what I did:
1) in global variables add var defaultLightbox;
2) below addLightBoxMarkup() added new function
function activateDefaultLightBox() { if(defaultLightbox != undefined) { defaultLightbox.activate(); } }
3) change function initialize() to be…
function initialize(){ addLightboxMarkup(); lbox = document.getElementsByClassName(‘lbOn’); for(i = 0; i
4) in page you are loading, for the lightbox you want loaded, add id=”defaultLightbox” Example: About Lightbox
Note: At first I added Event.observe(window, ‘load’, activateDefaultLightbox, false); after the loading of the getBrowserInfo, but that didn’t work in IE (activateDefaultLightbox was running before initialize). So I just threw it into initialize and it seems to work for Firefox and IE6. But I’m not sure what that does for things called by lightbox.activate() that are browser specific.
That sucked. I second the request for a preview button.
Anyway, for those who wonder what comes after the for i=0; i part in step 3…
for(…………………………..) { valid = new lightbox(lbox[i]); if(lbox[i].id == “defaultLightbox”) { defaultLightbox = valid; } } activateDefaultLightBox();
And Step 4 is… in page you are loading, for the lightbox you want loaded, add id=”defaultLightbox”
As for Matt’s comments:
I am almost there, but im a little confused on step 4:
I have this:
Event.observe(window, ‘load’, activateDefaultLightbox, false);
But its throwing an error. the name of the file i load is: /templates/login_form.cfm
Can you help me over the last hump?
You don’t need the
Event.observer line anymore. That was supposed to be part of a little note at the bottom of my comment. But it ended up looking like it was part of Step 4.
Step 4 is simply to add id=”defaultLightbox” to the lighbox link in your html/php/asp/whatever file that you want to open on page load.
Example: a href=”text.html” class=”lbOn” id=”defaultLightbox”
Great script but had hoped to popup a div containing an image and some styled text. The problem I am having is that the image resizes itself to whatever is set up in the #lightbox section of the CSS.
My images will all be the same size so it would be nice to be able to simply position the image in the corner of the popup and then have my text on the right,
If it helps you imagine, check out this profile page…http://www.arsenal.com/player.asp?thisNav=first+team&plid=60089&clid=4421&cpid=703 it would be nice to be able to popup the pic as well as some styled text.
I’m late to the party, but… aweseome!
I’m having an issue in Safari, though. If I call an image that isn’t in a table; everything is groovy, i.e.:
“Lightbox Gone Wild” link calling: [a href=”#” class=”lbAction” rel=”deactivate”][img src=”images/wildryan.jpg” alt=”Wild Ryan ” /][/a]
But if an image is in the simplest of tables, IT DOESN’T SHOW THE IMAGE, i.e.:
“Lightbox Gone Wild” link calling: [table] [tr] [td][a href=”#” class=”lbAction” rel=”deactivate”][img src=”images/wildryan.jpg” alt=”Wild Ryan ” /][/a][/td] [/tr] [/table]
Can anyone tell me why this is happening? Thanks so much in advance, Ap
There is also this….
http://blog.eight.nl/articles/2006/02/21/fire-lightbox
Called the Leightbox, it allows you to pop up a div on the page rather than just an image and any image in this div is not resized like I found it was with lightbox gone wild….
The only problem I have with the Leightbox is that any div you want to appear has to be within the page and I can’t figure out how to externalise this so I don’t have to load all of my divs at once….so I guess I want a combo of the two, boo…trial and error city here we come :-)
I am having some conflicts caused by the prototype.js file when i am running my google maps api program. It prevents IE from opening info windows when you click on markers.
Has anyone else had this problem? (works fine in FF)
Man I had to scroll down a hundred pages just to compliment you.. I’m beat!
This tool is GREAT!
Can it be used with Visaul Studio 2005 ASP pages?
Thanks
Could anyone post the code that allows this to work within iframes?
Thank you in advance!
Hi,
Thank you so much for this great tool!
I’ve been trying to get the moo.fx accordion javascript to work within the lightbox. Even t