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 tabbed divs would work fine. Can you suggest any techniques for getting this to work? see moo.fx for more info on their tool. Or if you could refer me to another example like this?
Thanks!!!! Brandon
If you’re having trouble getting the insert part to work, modify the insert function in the lightbox.js file.
Find the line that says:
link = Event.element(e).parentNode;
and change it to:
link = Event.element(e);
This effect looks good, thanks for publishing.
One problem I have is that appearance is quickly broken once fonts are increased (try to press CTRL-+ a few times in Firefox when looking at the box).
I’m so glad I found this, but I want to implement it in a different way and I haven’t found out how to. What I want is rather to show a static page in the lightbox, I want a form submitted from within the page, then call the lightbox that shows the content of the submitted form. So, user fills out form, go to click on submit, lightbox shows up showing the content of the submitted form. Any ideas?
I am having a little trouble with lightbox. Essentially, I have the script set to display a simple html file and it works perfectly on my local machine, but when I move things to my server, I get an error saying the file can not be displayed because the address is wrong. I have verified the destination URL’s and everything seems ok…any thoughts?
Hi,
I am using lightbox in my photo archive and as in every archive there are pages which contain alot of thumbnails, and lightbox has to wait for the whole page to finish loading then it will load, anyone know how to get over this?
Even with the added instructions on implementing this with a post form, It’s still not working properly. In particle trees provided form example, is there really a legit use for such a thing?
Maybe someone finds this usefull:
lb = document.createElement(“a”); lb.href = “msg.php?n=1”; pop = new lightbox(lb); pop.activate();
This way you can activate a popup without clicking on a link.
Awesome stuff here. Thanks for putting this out.
For those of you having PostBack/submit problems in the Lightbox, just handle the submit like you would with a modal form. Basically you create a wrapper page for the page that will submit information to the server. The wrapper will load the submitting page in an iframe. Layout: Lightbox.asp - link to wrapper.asp wrapper.asp - iframe with submit.asp as the src.
I’m using this solution with aspx pages and it works great. The user is able to open the lightbox, fill out the fields, click submit. When the submit returns, the page is loaded right in the iframe. After getting the result, the user can close the lightbox and resume on the original page. Tested in IE and Firefox.
Funny, I wrote a script that basically does the same, not as ordered as yours, but it does the job…
But! I’m having a problem, the images I load into the lightbox are not loaded at all on IE.
http://ecentricsolutions.com/real_estate/listings.php
This is just a sample… try it on IE, click on the images one.. two.. three or more times.. and at some point.. IE stops displaying the #!$@# image.
BTW, I use a black layer (100% wdth, 100%height) with a 60%opacity.. instead of a semi-transparent png. I guess it’s less trouble.
Hi, correct me if I’m wrong, but it still does not seems to prevent access to the underlying elements by selecting them via tab.. (I had the same problem with a similar script I made myself).
Everyone needs a hug.
I’m using lightbox gone wild to load dynamic pages in spring. However, whenever I open the lightbox, for some reason, it automatically submits the dynamically generated form. Opening the form regularly does not cause this problem. Any ideas? Thanks.
Hi,
So i need also to get a dialogue opened when the page loads, i have implemented MAtt Langemens tenique, but it is not suitable for my purporses. ( I need to pop open a lightbox if the user is using IE, and using his method i cant do this using IF statements).
So I want a simple javascript call I can use and call if the User is running IE.
I saw Bert Casiers,
lb = document.createElement(“aâ€); lb.href = “msg.php?n=1â€; pop = new lightbox(lb); pop.activate();
But it doesnt work.
Has anyone done this?
everyone definitely needs a hug…
Hi! Thanks for posting this code, I really like it!
Just two things which might help others who intend to extend the “wildbox”:
1) As already mentioned the insert method might get you in trouble. The solution suggested by Peter Vulgaris might work in some, but not in all browsers. A (as far as I could test) crossbrowser compatible solution is to replace the line that says
with
2) Second thing applies to the case, where you update a part of on open Lightbox using Ajax.updater() and want the actions-links inside this newly loaded part to do what they are supposed to.
First, in the onComplete: parameter of your Ajax.updater-call add
to set the actions again. The problem is, that this would create lots of duplicate event-observers whicht might end in unpredictable behavior… The solution is to check for the existance of an event-observer before assigning a new one to an action-link. Find the line that says
See everything in action at http://www.nemata.de (soon) and have fun :)
First of all, sorry for posting twice! Humm… I just had to find out that it’s not that easy :( The Problem is, that IE cant handle the find-request correctly…
Here the workaround which works in recent FF,Opera,IE. The lightbox.actions-method:
and the working Array.prototype.find-method:
How can I post a form with JavaScript to the same Lightbox window?
My submit button:
Function login: document.forms[“login”].login.value=”Login…”; document.forms[“login”].login.disabled=true; document.forms[“login”].submit();
Is there any way to get the “login” function to post the form to the same Lightbox window?
Thanks in advance
HTML code was splitted.
Awesome implementation of lightbox.js. I am currently using moo.ajax.js for ajax calls … which uses the prototype.lite.js. MUCH lighter than the original prototype.js. Will your script work with my moo package, AFAYK?
Thanks for this and any help you can provide.
Hi there,
i downloaded the surce code from your Lightbox if i try make a call from the index.html and it worked, then i tryed tu upload the files on a server and if i make a call from online it doesn’t work.
The files are original like downloaded, is there an protection in it or am I doing something wrong?
Please let me know,
Flavio Pigozzo
Trying use the “Linking to a Another Lightbox within a Lightbox” feature. Got it working in IE and FF (PC and Mac), but it does not seem to work in Safari web browser for Macintosh. I don’t think Safari likes the a href=”#”, because it returns “null” in the lightbox instead. Also tried a href=# and the ascii code for #.
Any suggestions?
Let me correct that (post above this one). The # is not an issues, I’m referring to the class=”lbAction” rel=”insert” used when “Linking to a Another Lightbox within a Lightboxâ€. Safari doesn’t like it. Instead of opening the next lightbox, it returns the word “null” in the lightbox window. Works fine in FF for Windows/PC and IE for PC.
Try href=â€javascript:;â€.
If my page that I’m lightboxing contains a QuickTime mov file, in Internet Explorer 6, the video does not disappear when I close the window. Also, in Opera 8.54, the opacity filters do not work, the background is completely black. Finally, in Firefox, the mov file doesn’t show up at all.
Hi Marcell, I tried the href=â€javascript:;†you recommended instead of the standard link for “Linking to a Another Lightbox within a Lightbox†but it did not work at all in any browser/platform to call the next html page in the existing lightbox. The formats I used where: href=â€javascript:;†and href=â€javascript:filename.html;†and href=â€javascript:;â€href=â€javascript:filename.html†and href=â€javascript:filename.html†Is there some other way of doing it?
For anyone that’s been having the problem with dynamic/different sized images getting stretched…the only solution I found was to specify the size via css. I surrounded the IMG tag with a DIV that had the width and height specified in the style attribute of the DIV. I got the image size using php’s getimagesize but you can do that however you want.
After spending all day yesterday and coming up with the solution above…today I found the problem with images getting stretched. In lightbox.css the following lines are the culprit…
I removed those and it worked great.
A possible solution to the insert action:
TextGoHere
Before I tried without a tag around the displayed text, and i didn’t work.. After I tried with a tag around the displayed text, it did work…
Putting a nonsense tag around it also worked :) TextGoHere
Why it works…. I don’t know, but it did…
Sorry html messed things up … A possible soluction to the insert action problem
Just surround the text of the link with a SPAN
That worked here, Jaime… thanks!
Helo everyone, I’m using lightbox, it’s easy to use and fast. However, regarding the “press enter and get duplicated code bug” I’ve tried the solutions posted up there, and while safari (for osx) works fine, firefox and IE keep crushing (duplicating the html code), this happens on XP and also on OSX, even after I add the line:
> if ( display == ‘block’ ) { $(‘lightbox’).focus(); }
on the function:
> displayLightbox: function(display){ …. }
Now just for being cautios I tried the examples posted at this site, and the bug is still here too. Has enyone had this problem? Could someone point me in the right direction here?
Helo everyone, I’m using lightbox, it’s easy to use and fast. However, regarding the “press enter and get duplicated code bug” I’ve tried the solutions posted up there, and while safari (for osx) works fine, firefox and IE keep crushing (duplicating the html code), this happens on XP and also on OSX, even after I add the line:
if ( display == ‘block’ ) { $(‘lightbox’).focus(); }
on the function:
displayLightbox: function(display){ …. }
Now just for being cautios I tried the examples posted at this site, and the bug is still here too. Has enyone had this problem? Could someone point me in the right direction here?
Everyone needs a hug.
Of course, I meant everyone deserves a hug, eheh.
It’s late I’m tired :)
So, I just uploaded this to the server here at work and I am getting :method not allowed” So I changed the “Post” to “Get” and now it open up a new page with the info that should be in the lightbox. Is this as far as I can take it, meaning I need to have the IS dept. change something on their end? Love the script and hope I can use it. error is here if you want to check it out http://www.studioparati.com/work.html
thanks for any help!
Just tried changing the .html files to .php and with the .js still saying post it is doing the same thing as changing the post to get. hmmm, my neck hurts, I’d buy anyone a beer who can help me.
Great script, it’s really cool, i am using it on a site that i am developing, and the only missing thing that i see is that the loading message just show the first time that you display the lightbox, i just change
initialize: function(ctrl) { this.content = ctrl.href; Event.observe(ctrl, ‘click’, this.activate.bindAsEventListener(this), false); ctrl.onclick = function(){ return false;}; },
to
initialize: function(ctrl) { this.content = ctrl.href; Event.observe(ctrl, ‘click’, this.activate.bindAsEventListener(this), false); ctrl.onclick = function(){ $(‘lightbox’).className = “loading”; return false;}; },
i just add
$(‘lightbox’).className = “loading”;
and now it’s working great
For those discussing resizing the box to the shape of the content, why not just:
Change class “lightbox” in “lightbox.css” so that width and height are set to “auto” and maybe add a few pixels of padding.
Hello! First Thanks for lightbox gone wild!
But i have a problem (btw: i’m not a JS geek), i want to use Lightbox to display a edit box for somthing that is selected in a select box, but Lightbox initializes the hrefs at loading, so i can’t give the Lightbox the value of the selectbox.
Any ideas how i can do that?
Hello, Nice piece of code.
All that I am missing is a way to control the lightbox from an external function (a javascript function outside the class would have to close the lightbox).
Question originally posted by Tulio Faria
Thank you
I agree with what Sabastian is saying. I would like the ability to assign the class “lbOn” on the fly but when I do that, the href that I put in the tag does not show up in it’s own modal window; it actually takes me to the address specified in the href. Has anybody found a way to dynamically assign the class of the link and still get it to show up in the modal window?
Does this lightbox modification work with the new Lightbox 2.0?
@Francis
You need to call the initialize function to reinit the lbOn anchors. I took the onload handler off for the initialize function and just call it dynamically everytime new links with lbOn are added to the document. Works like a charm for me.
Ok i went and testing it myself and this doesn’t work with the lightbox 2.0 script.
Can anyone get the new 2.0 script to work for this as I i would really like the new transition effects with the HTML page features of this modification.
Regards, Rob.
Hi; There is a problem with usage of Wizard object in asp.net 2.0. When i add the wizard object to the Lightboxed page it gaves error while rendering the wizard object as javacript Syntax Error in prototype.js var Enumerable = { each: function(iterator) { var index = 0; try { this._each(function(value) { try { iterator(value, index++); } catch (e) { if (e != $continue) throw e; } }); } catch (e) { if (e != $break) throw e; } },
Anyone have an idea on how to kill the current active lightbox from a javascript function outside of the class? That would be greatly appreciated. Already a superbe little piece of code.
Hi,
Great script! I have implemented this for use in a registration form. The parent page is a list of events. A user can register for more than one event. I open a wrapper page in lb and iframe in the form. Insert data and submit. Close lb and the page is frozen so to speak. (only in IE, FF is fine [.net aspx]) You can not select text (anchors work). Also, upon opening another lb for another registration, it is impossible to enter text into form fields. If you don’t submit, all is well. Why would a submit action in an iframe effect the parents parent page? Well, I haven’t figured that out yet. Something with the event listeners I think. A bit over my head. So, time to learn something new maybe. I have implemented a clunky fix by reloading the page at the end of the deactivate function. Just wondering if anyone else has seen this issue and figured out a more elegant fix.
Thanks.
Is there a solution to Michael’s issue: http://particletree.com/features/lightbox-gone-wild/#5759
I’m also interested in activating the Lightbox using an onLoad event handler as opposed to relying on an html link.
Best Jon
Was going to send an email but couldn’t find a contact link anywhere on the site.
Just thought you guys might like to know that we are currently using ‘Lightbox gone wild’ on a promotional site for Alltel, using flash movies of recent broadcast ads. You can view the site here: http://alltelcircle.com (look in the sidebar)
Thanks for sharing!
Thank you for some awesome Javascript!
I wanted to let you know we are now using lightbox-gone-wild on ForecastAdvisor.com!
Just enter in a U.S. city, state or zipcode and when the weather forecast comes up, you can click on a day’s forecast which brings up a lightbox with historical weather forecasts for that day, so you can see the weather forecast trend, which can sometimes give you insight as to how accurate the weather forecast might be.
Again, thanks for the code!
The function is not working within an innerHTML neither with nodes created with DOM. What I’m doing wrong. How to call this function within content created with innerHTML or DOM.
it would be nice to be able to change the links that the lightbox opens.
I’m trying to add a query string to the url in the href (via js).
Looks like the inital href is stored and my query string is ignored.
so… if you need to change the url of the “lbOn” A tag via javascript, just call the initialize() function after you change it. The same way when you need to create new link in your page via javascript or ajax.
Great stuff but how can I add javascript into the lightbox? For instance, if I wanted to use http://www.youngpup.net/2001/domdrag (example 4) as the html file?
For anyone that desires to use lbOn as a dialog that submits a form and dismisses when you click “OK” I made some changes and did a writeup on how to accomplish that. The blog posting is RoR specific but it may very well translate elsewhere. I’d definitely like to hear some feedback from you guys about whether or not there’s a better way to accomplish what I want with lbOn and have it work with IE6?
http://javathehutt.blogspot.com/2006/07/rails-realities-part-15-ajax-modal.html
If you want your Lightbox to load when the page loads, here’s a quick n dirty hack:
In lightbox.js ~ line 183, just add an extra line:
valid.activate();
This is pretty handy hack for 18+ age confirmations via lightbox, etc.
Hey all, First off, great code.
Ive used it before on a apache based server and no problem, but I, unfortunatly, am running on IIS now and I am getting the HTTP Error 405 error. I read about a suggested fix, but I am unsure where to make this fix in the code.
any info on how i can get my lightbox to load when the page loads?
i’ve seen a lot of things done with these , but they’re all happening when you Click for them…
thanks!
Hello Benjamin,
The HTTP 405 error occurs because IIS is configured to disallow posting to HTML files. Possible workarounds:
Cheers!
Hi! Very nice script.
But I want it to work with a mySQL form input, but I don’t know how to open/load the error messages or the “data inserted”-confirmation in the lightbox-window. Here’s the script:
— It’s in Norwegian, if you don’t understand anything, let me know so I can translate it =)
It wen’t wrong=S
HERE’S THE SCRIPT!!
It wen’t wrong=S
HERE’S THE SCRIPT!! PUSH!
We’re currently trying to get an onload lightbox effect going, like the rest of you are. The way we see it, we clearly need a funciton that can run the lightbox job with a URL as a parameter. Any idea where we can start?
A hack i just did up was to change initialize() to this
function initialize(){ addLightboxMarkup(); lbox = document.getElementsByClassName(‘lbOn’); lboxAuto = document.getElementsByClassName(‘lbOnAuto’); for(i = 0; i then simply having a link w/ a class lbOnAuto would make it pop up after this script finished loading. you could hide the link w/ css. this is an ugly, ugly hack.
i need
function autoLightbox(url) { lightboxmagic }
Anybody have a forum for this very useful script? The commenting area is a horrible place for ‘technical support’.
I got this to work for FF, but a slight problem in IE6. I have a flash file on the page which is ignoring the z-index set by the lightbox.css Heres the page if anyone has a solution (only a problem in IE6)
(scroll to the bottom of the page and click the “contact” link to access the lbOn class
http://emark-clients.com/elina/bio.asp
Everyone needs a hug. You need a hug. :) Thanks for this great application.
Hi I liked your LightBox a lot! I’m using it in asp.net for showing images from sql server database. I’m facing the following and need some help:
Any idea?. I’ve been able to close the LightBox when I click on the caption area, but only works in IE and not in FF. Thanks in advance.
Sorry, I didn’t read very well, closing the LightBox when clicking in the overlay is accomplished doing what enej posted in http://particletree.com/features/lightbox-gone-wild/index.php#5877
Shifting problem
First, great code and functionality.
I read Mike’s entries above the shifting “window” he experienced. I am encountering the same problem in IE.
How exactly can that be fixed in the functions (have not worked with the overflow properties before)?
Thanks,
James
When I take this Demo Make a virtural catalog in IIS and click the href it always make me 405err， (the file not found) can you tell me why?How to ravel?
In regards to the onload lightbox effect, can you just make it activate after initiate like the following:
initialize: function(ctrl) { this.content = ctrl.href; Event.observe(ctrl, ‘click’, this.activate.bindAsEventListener(this), false); ctrl.onclick = function(){return false;}; this.activate(); },
Hi there,
I needed to display a div inside the lightbox that was also on the page (long story) - here is how to do it.
Replace these functions (in lightbox.js) with the following code:
In your html file, you can use it like this:
….
So rel is the ID of the div you want to show. In my case I had hidden divs that were generated on the same page ( ASP.NET controls that modify the content on the page) but wanted a modal dialog.
Well, the html examples got screwed up - here is the usage:
what I must do too have polish signs in form in lightbox? I have only “?”
Whenever I initialize the lightbox a bug appears in Internet Explorer 6.
Any DIV that has a specified URL for its background-image will for a split second loose its background image before reappearing again.
Any idea how to stop this?
Hi Guys, you definitely deserve a hug, question:
when I open a modal window, i’m trying to load a url from flickr, in this case:
http://www.flickr.com/slideShow/index.gne?set_id=72157594222918772
but the lightbox js doesn’t load the page. i assume it’s because of the question mark in the string. any ideas?
Can someone explain how I would incorporate this into my flash website. In as much detail as you can (I want to click one of my thumbs in flash and have this pop up)
please
.. I’m always getting an error message whenever I try to load a file. It says “Method Not Allowed - The requested method POST is not allowed for the URL /lightbox/image.html.”. The files do not work on my server, but they do work on my local disk.
What is up? :\
I’m trying to figure out how to change the height and width and centering, but haven’t been able to maintain the centering when changing the lightbox’s dimensions. HAs anyon done so sucessfully?
i’m having trouble using the activeX plugin for embedded .mov in the html i am displaying. the .mov doesn’t show up, untill i roll over any given link. it’s acting as if it doesn’t know that i’m looking at the div container, untill i roll over a link insid of it. how in the heck could i fix this?
This works a treat on a standard web page but does not seem to work at all in a subsequently rendered partial HTML fragment (AJAX style). Basically in such a subsequently loaded fragment the link functions as a vanilla anchor link rather than an embellished LGW one.
Does anyone have any ideas on what I am perhaps doing wrong? I have embedded the JS and CSS in my Rails application.rhtml and basically put a basic test link inside one of my partials (HTML fragment).
I download the code and I made the following changes.
Changed form.html to form.php and I changed the link before the submit button to form.php.
When i click on submit the contents of the form do not get posted. I look in the .js and the nothing is being passed in the area for “parameters”. How do I actually send over the form contents?
Thanks,
Does anyone know if it’s possible to have the lightbox fade in (like Scriptaculous Effect.Appear)?
Question asked earlier by someone..I need answer to the same. my base page calls the light box..I show the light box…user clicks close..all good. now I want the parent (base) page to know the focus is back and do something..how can we do that? Any help is greatly appreciated.
Great tool! Has anyone found a method to display (compare) two separate images side-by-side in a single frame? Is there an existing implementation of this that I haven’t seen?
Thanks in advance, —Mark
Can someone please tell me how I can display the “loading” message eveytime the lightbox is activated? I’m having a hard time trying to figure this out.
Thanks,
Blake
Hi,
Great script!
I am working in ASP.Net and having a problem though. If I place an ordinary “lightbox-link” to a form, it works great. If I create a GridView and create a link on each item, the lightbox loads, but it just says “loading”, even though the targetform is exactly the same.
Any ideas
Anyone found a solution for displaying non-english characters (such as Hebrew, Arabic) in the lightbox? new Ajax.Request can deal with utf-8 characters only. How do I solve this??? Thanks,
I have put the sample up on my site. It gives me a 405 error, can anyone help?
http://www.lincolnleung.com/dev/lightbox
Does anyone know how to launch the lightbox using Flash (i.e. getURL)?
HI,
how can i implement this in a onsubmit action, i want to show the lightbox while loading data from the server and hide it after loading is finished. I work with jsp.
Thanks
Hello I am using the light box to submitt inormation on the click event in asp.net. I m facing two problems the first on is the formattig of the font that i ahve applied on the page through a css file does not apperar on the form the second problem is that when i submit the form the entries sucessfully wents to the data base but the page i m showing in the light box open in the window from where i have called it. Any Idea?
Thanks
I’ve tried and tried, and I can’t get a GET or POST response from my form. Any other examples?
First off, great stuff…
Now - I’m not like most of the guys here - My js skills suck, so can someone help me., All I’m trying to do is get this lightbox close onClick yes if the user clicks elseware other than the lightbox itself i wanted it to close…
thanks in advance
@lincoln: I’m seeing the “Method Not Allowed” error on your demo there. Please see Alex’s post from February 8th.
“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’”.
I was having the same problem, but that fixed it for me!
I gave up on Lightbox a while ago because I couldn’t get a link from within a lightbox to remain in the box ie. rel=”insert” class=”lbAction”. The lightbox stayed, but the box said “null” or had no text at all depending on how I did it.
After much forum searching I found the following… and it works for me.
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 (and it prevents your content from showing up).
hi there,
my name is helder meneses and i´m implementing lightbox in a page with an iframe. the iframe as a script that what it does is to expand the iframe to the body size like: parent.document.getElementById(‘main_frame’).style.height=document.body.scrollHeight;
now, i have a problem that when i click on the link that opens the lightbox, the modal window appears at the middle of the the page, and it should appear at the getscroll….
how can i getscroll to show the modal window ate the right position?
thank you…
and … u all need a hug…
Everyone needs a hug.
> Ben - Everything we offer is under a > Creative Commons license. Go nuts.
Which CC license is it released under, it does not say anywhere in the downloaded files and so if it was your intention to release as CC, im not sure that is what you have actually done… I would be much happier with a little header in each file :)
Hey Dave,
The license can be seen at http://creativecommons.org/licenses/by/2.5/. There is a link to it on our homepage on the bottom of the left column.
This is soo sweet!
Everyone needs a hug. come across an interesting bug..in IE 7 ..dont know of other versions, when I click on “return button” to close the light box and come back to the original page, some of the controls visibility changes to visible. This does not happen in Firefox. Anyone know of this problem and possible solution? I did find a soln to scrollbars…had to make a change in css file too.
this is great and all, but what happens to those people who have js disabled. they may be few in number, but they are still out there. if your site’s traffic is growing, the more likely it will have had visitors with JS disabled, and lightbox gone wild will be a terrible experience for those people.
Hi All
I need help with this one I have aspx page and i want to open another aspx file in the lightbox I need to pass variables from the first file to the second how can i do it?
TX keren
Love the script, great work.
I didn’t know if anyone was wondering how to style your links once you add the class “lbOn” to them. This is just something simple I did so I could style the link on my page. Just pop this in your style sheet .
a.lbOn:link { color: #12A3BE; text-decoration: underline; }
a.lbOn:visited { color: #CCCCCC; text-decoration: none; }
a.lbOn:hover { color: #12A3BE; text-decoration: none; }
a.lbOn:active { color: #799741; text-decoration: underline; }
Another Tip (Maybe): I found that if you create a page that want the LGW script to open and it contain some regualr content and maybe a picture, due to the statement in the css:
Your images would scale to 100% which didn’t look good for me. You can remove that ID from the CSS and everything should work fine.
Also in the ID #lightbox in the CSS file you can remove the width and height statements so the light box will auto size itself to your content. I tested this all out in FF and IE 6 and it works fine. But this is if you are trying to open html content. Hope this helps someone.
Thank you for the source.
I am trying to us lightbox on a site but for some reason on IE after the lightbox has been deactivated scrollbars show within the body of the page as if I was using frames. You can see and example here: http://www.bitemyphoto.com/item/index if you click on any of the images the lightbox will come up, when you deactivate it you’ll see the scroll bar. I narrowed down to this line in the lightbox.js
this.prepareIE(“auto”, “auto”);
By setting the overflow to auto it causes ie to display those scrollbars I am not sure why.
Hello,
Firts of all, sorry by my bad english…
I am trying to use lightbox to create forms… but I am having problems.
I have a button that cancels the form using Cancel. It works correctly.
The problem I have in this… Cancel. Because this link don’t execute the Javascript.
I want that this link execute the Javascript and later close the window.
It is possible? How?
Thanks in advance.
Sorry…
In the first cancel the code is:
a href=”#” class=”lbAction” rel=”deactivate”> Cancel
And in the second is:
a href=”#” class=”lbAction” rel=”deactivate” onclick=”addchild();”> Cancel
No support for IE7 yet?
ugh.
While testing it I just had it printing out one line, which was somehow going under a flash file on the page. Moved it down a tad and it showed. Sorry.
Now to figure out how to get the flash to be blacked out too…
I wish we could edit :) I’d look a lot less silly.
I’m sure other people have figured this out already, but just in case.
hideSelects: function(visibility){ selects = document.getElementsByTagName(‘select’); for(i = 0; i I wish we could edit :) I’d look a lot less silly.
I’m sure other people have figured this out already, but just in case.
hideSelects: function(visibility){ selects = document.getElementsByTagName(‘select’); for(i = 0; i
I would like to trigger display of a lightbox in a hidden div when the user clicks a radio button, not a link. Is that possible? I tried a couple of (unsuccessful) approaches:
input type=”radio” class=”lbOn” href=”#lightbox2” rel=”lightbox2” name=”radioGroup”
In case #2, the lightbox does not appear, and the following error occurs: $(this.content) has no properties
<a href=”#lightbox1” rel=”lightbox1” class=”lbOn”> <input type=”radio” name=”radioGroup” /></a>
In case #2, the lightbox appears, but the state of the radio button is not being correctly recorded.
Maybe the problem has something to do with this part of the javascript:
but my limited js skills aren’t leading to a solution.
Any help much appreciated!
Is there a way to refresh or go to a different page on exit of the lightbox?
For instance, I am using the lightbox to update some data in php, and then I want that data to show updated when they close the window.
Thanks for the help
I need to call initialize more than one time on a page, because i’m going to reload content via ajax.
Example: I have a login-form in a lightbox and you can access it via the navigation-bar.
Then you can browse in the content area a view different items. Each item have it large view of the picture in a own lightbox.
So i have to do initialize() after loading the Item-Content via Ajax. But then i have more then one event-observer on my login-Button, because it recieves his event-observer onload.
The result: If i click on login, the content of login is 2x and more in the lightbox.
Conclusion: I need a function like reinitialize() which places event-observers only for new lbOn-Links. I tried hours do create such function, but failed. Can somebody help me?
I solved my problem above!
function initialize(lbOn){ addLightboxMarkup(); lbox = new Array(); lbox = document.getElementsByClassName(lbOn); for(i = 0; i
I changed the classname to a variable. So I can call initialize(‘lbOn1’); onload and initialize(‘lbOn2’); on ajax request. My Lightbox-Links are seperated in 2 groups and so these, how are on every page again, are not assigend to a event observer again.
Acording to that, it is necessary to expand the function addLightboxMarkup with a If-Condition:
function addLightboxMarkup() { if (!document.getElementById(“lightbox”)) {
Now I can be sure, that the action of this function is only performed once.
Perhaps I can somebody help with that!
I am trying to make the lightbox show up on mouseover, rather than clicking a link. How would I do this?
The problem with lightbox gone wild is that you can’t have javascript inside the modal dialog (as far as I can see).
This obviously means that you can’t do ajax stuff in there.
Please see my blog for how I approached the modal dialog problem:
http://richtextblog.blogspot.com/2006/09/lets-get-modal.html
Hey all,
Thanks for the great script. Very clean and easy to implement.
For those, like Daniel (a couple comments up), who are trying to change the link href with Javascript or something and are getting multiple pages in the Lightbox, just add this code before you initialize():
Event.unloadCache(); initialize();
That’ll clear the lightbox object in the cache, then re-initialize the whole thing. I’m not sure it’s the best way to do it, but it’s easy and it works.
Thanks again.
Cool script guys. Nice simple and clean.
One thing I noticed though was the problem of links being exposed and taking their normal behavior if you clicked on an LB link before the page finished loading.
Wouldn’t notice it on quick loading simple pages, but our pages are pretty heavy, so it had to be addressed.
Here’s the simple solution. just add style=”display: none;” to your link.
OpenThen in the lightbox::initialize method, add ctrl.style.display = “inline”; which gives you something like this:
initialize: function(ctrl) { this.content = ctrl.href; Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false); ctrl.onclick = function(){return false;}; ctrl.style.display = "inline"; },Just a fail safe to make sure the presentation is correct.
Lucas
It seems a lot of people are having questions about using it with FLASH - how to open & close from FLASH, and also embedding into it etc. There don’t seem to be any answers to these questions, which seems very odd! Is FLASH a dirty word around these parts! :)
Has anyone got any answers on how to open/close from FLASH etc?
Would be very sweet to do so.
Hi Erim,
You posted a fix that meant adding the code: Event.unloadCache(); initialize();
to re-initialize the Lightbox. But I don’t know where to put this code?
Can you help?
Thanks.
OK this script works fine in Firefox,Safari,Netscape, Opera and every other browser I could test (or at least with the limitations discussed above) but I have found a bug(?) in IE which will seem to lock the Lightbox in IE6 to showing the loading text screen forever.
I had the link \ tag in a \ tag which isn’t a problem unless you give the tag and id of ‘info’ .. any other names seem to be OK, and using info as a class seems to be OK just not an ID.
This has taken me A LOT of time to track down not being a coder more of a ‘script fudger’ so I hope this helps others. (it’s 1am now:( )
Actually another point that should be made is that in links themselves (with the calss=’lbOn’) they should not have names or id set as this stops the scripts from working.
Hmm… this is why a preview button helps on these sorts of pages….take 2
text should read
I had the link (A) tag in a (DIV) tag which isn’t a problem unless you give the (DIV) tag an id=’info’ .. any other names seem to be OK, and using ‘info’ as a class seems to be OK just not an ID.
Would it be possible to give me an example on how to open lightbox on mouseover?
Thank you!!
Mike > > >
To use Mouseover trigger (for all links), replace this part of the lightbox.js
initialize: function(ctrl) { this.content = ctrl.href; Event.observe(ctrl, ‘click’, this.activate.bindAsEventListener(this), false); ctrl.onclick = function(){return false;};
with»»
initialize: function(ctrl) { this.content = ctrl.href; Event.observe(ctrl, ‘mouseover’, this.activate.bindAsEventListener(this), false); ctrl.onmouseover = function(){return false;};
hello, I’ve downloaded this example to my page. (I didn’t change anything) And when I click window opens and says Method Not Allowed The requested method POST is not allowed for the URL /lightbox/image.html.
How to repair it?
Did anyone manage to get the posted form variables to work? I see it asked a lot in the comments, but no one posted a solution.
Any ideas?
P.S. If email is required, don’t say it’s optional ;-)
Please ignore my post above, I managed to get Richard’s Response above to work.
I don’t deserve a hug. :(
There seems to be an issue with Lightbox and flash on Firefox/Flock. When flash is displayed inside a Lightbox, sometimes the flash will not render. It appears to be random.
Can anyone confirm this? I have an example here: http://www.findmotive.com/flashbug/
Is there a fix?
I am using this script and admin of my server mofied it a little as it has a security bug and POST function did not work.
Now it is working, but it does not render image sizes correctly. If I do not put every image in a table it displayes it very large even though width and heioght are specified.
And in Internet exporer when you close this lightbox you then have horisontal scroolbar displayed untill you refresh that page. Why is this so?
Any ideas to solve these problems? Otherwise the script is really great!
Sometimes the url is not simple. It may be constructed based on logic. So I have modified it in this way:
in the html, we can write this:
It will be great if that can be integrated into original script.
I am seeing a problem with forms shown on the popup window in Firefox. Sometimes the cursor does not appear in the text boxes when you click on them - works OK 50% of time and fails 50%.
When it fails, the text box works OK but user may get confused by lack of cursor. This problem seems to happen with the example files when selecting the “Submit an enquiry” option.
Do other people see this - and does anyone have a solution?
Thanks Alan
Alan,
I fixed this with css. Just set the cursor for your text fields.
formID input {
cursor: text; }
So has anyone figured out why flash/video files don’t render 50% of the time?
Everyone needs a hug. But you ppl need more than a hug. I am subscribing to feeds.
Hi Kelly
Thanks for your suggestion - but I have tried this and it doesn’t fix the problem. The problem is not that the cursor type is incorrect - the text cursor always appears over the input boxes. However when you click inside an input box, a flashing cursor should appear - and half the time it does not do so on Firefox.
Thanks Alan
@erim 09/26 — thanks for the tip. Works like a charm! Great script, PT, thanks for sharing.
How can I get lightbox links to work when they are brought in through an Ajax.updater call? I fill a div with links to cause the lightbox funcitonality, but the links just reload the whole page. I can see where to call the initialize function on lightbox links brought in through Ajax.
IE 7 Beta, causes an exception and shows the famous send to microsoft message box, when browsing websites enabled with the lightbox.js. This I suspect is because of the star-html hacks.
Even on this site too
I really need to be able to trigger the script onLoad. Does anyone know how to do this?
Please I see this question being asked with no answer.
thanks
I have a lightbox with two insert links, one text and one an image button. The fix described above only solve the problem if you are using one or the other, not both. I hacked it to fix this problem, though I am sure if I had more time I could find a better way. Here is:
Hey… I am trying to user Lightbox gone wild with Xaraya CMS for a photo gallery.
Is working fine but, anyone solved that problem about resizing images?
What I noticed:
On safari, the image resize to fit the box On firefox/camino the image, if bigger, overrun the box.
Is there any way to avoid that LGW resized images, and that the box fit his height, depending by the content?
OPS, ok, I found out what to do…
I just had to remove this from the CSS
Everyone needs a hug.
Forms, having major troubles getting forms to work, the submission into the same lightbox area, ive tried all of the above on the form, it wither returns empty $_POST data or tries to submit the form to the page (outside the lightbox area) please help !!!!!
To everyone and anyone having issues with carrets (flashing cursors) disappearing for input boxes within your lightbox, I have found the problem and have a suggested fix.
The problem is related to when you have more than one element on the page that has a position of fixed and the input being contained in one of them.
The suggested fix requires a bit of hacking to the original lightbox.js:
function addLightboxMarkup() { bod = document.getElementsByTagName(‘body’)[0]; lightboxFixed = document.createElement(‘div’); lightboxFixed.id = ‘lightboxFixed’; overlay = document.createElement(‘div’); overlay.id = ‘overlay’; lb = document.createElement(‘div’); lb.id = ‘lightbox’; lb.className = ‘loading’; lb.innerHTML = ” + ‘Loading Activity. Please wait…’ + ”; bod.appendChild(lightboxFixed); lightboxFixed.appendChild(overlay); lightboxFixed.appendChild(lb); }
displayLightbox: function(display){ $(‘lightboxFixed’).style.display = display; if(display != ‘none’) this.loadInfo(); }
You will also need to update lightbox.css with the following:
Remove -> #overlay[id] { position: fixed; }
Add -> #lightboxFixed { position:fixed!important;position:absolute;width:100%;height:100%;top:0;left:0;display:none;}
Remove -> position: fixed!important from the lightbox declaration.
That should be it! Now you would have the carret issues. Also, the script will run a lil more efficiently because it now only needs to modify the display of one element. The lightbox and overlay are contained within the lightboxFixed div.
EDIT: Now you wont have the carret issues. not would. hehe
Here’s how my site uses the light box, works really well too.
Please take a look and let me know, thanks!
http://www.work-ed.com
I’m having two strange issues…
1.) Clicking the link just loads the image/page referenced in the browser and ignores the overlay and all that.
2.) Can’t seem to get it to run from an image map. Is it possible to build an onClick event that triggers the overlay?
The loading div doesn’t show up after the first time a light box is loaded, have to add the following line to the deactivate function:
$(‘lightbox’).className = “loading”;
The canned script will link the initialize() function to the body’s onload handler. This results in 1) the needed DIVs being “pre-inserted” into the page’s DOM, and 2) a new lightbox being instantiated for any tag with a className of “lb0n”.
It’s clean, if somewhat limiting. Like many here I wondered how do I bring up a lightbox programamtically inside my own Javascript code. For example, I use Active Widget’s UI library in one webapp I am building. I wanted to have a lightbox popup when a Button element from that library was clicked. Here’s how I did it:
1) Modify lightbox.js to handle a null parameter in the initialize() function:
A Class object in Prototype has the function initialize() as the constructor. (see prototype.js, line 21) Now, unless I am mistaken, lightbox.js is setup to expect a “handle” to a control, after which is does all the tie-up work between events and handlers. All of this is not necessary when trying to use lightbox dynamically. Simply wrap the code in initialize() such that a handle to a control is not needed if null is passed.
initialize: function( ctrl ) { if ( ctrl != null ) { this.content = ctrl.href; Event.observe(ctrl, ‘click’, this.activate.bindAsEventListener(this), false); ctrl.onclick = function(){return false;}; } },
2) Use key functions to popup the actions that happen in the initialize function and after it is triggered by an onClick. Basically, setup a null lightbox object, set the content string and then call activate. Three lines. The code below sets up the three lines to run when someone clicks on an Active Widget button. You could wrap this instead with your own function called at any point in your code.
myButton.onControlClicked = function(event) { var popup = new lightbox(null); //the ‘null’ value is not needed, but I have it in there as a reminder popup.content = “../lightboxGW/form.html”; popup.activate(); };
Alter the path in the second line to be a path to the form you wish to popup.
And, voila, a dynamic popup that can be triggered when desired.
Enjoy with a glass of fine wine.
Everyone needs a hug. Has anyone tried to use this on a secure website? what happens then??? In my case till when it was unsecure, all worked fine. As soon as we made the site secure …on IE 7.0, lightbox dont seem to work.
Hi, I’m having issues with the flashing cursor inside of form elements in firefox. I tried the suggested fix by Roger Riche but it won’t work for me (maybe i’m to stupid to implement it correctly :-|).
Could anyone who implemented this fix sucessfully email me the modified files? That would be sweet.
Also: Everyone needs a hug.
One limitation of this lightbox implementation is that it only hooks the lightbox up to things that exist on the page on the initial load. If you bring in content via XmlHttpRequest (or some other AJAX style asynchronous method) it can’t add the lightbox markup.
Initially I was just calling initialize again, but that added the lightbox markup to the existing links again, causing two copies of the content to load in the lightbox, interesting bug. I managed this by adding an array to keep track of which items already had the lightbox attached, and checking it with a new reinitialize() function included in script tags at the bottom of each block of HTML I loaded asynchronously.
First, add the array to the GLOBAL VARIABLES section at the top:
Next, modify the existing initialize() function to push items into the array:
<
pre> // Onload, make all links that need to trigger a lightbox active function initialize(){ addLightboxMarkup(); lbox = document.getElementsByClassName(‘lbOn’); for(i = 0; i
hello how can you get this for the new lightbox 2 the one with the cool resising effects…?
Everyone needs a hug.
BTW, my e-mail add is trotter[at]medien-haus[dot]de
<
p>Any examples on how to include forms in the lightbox complete with submit buttons? I need to do form verification server side and redisplay the form if any errors occur… cannot do with the simple
Roger Riche’s css should look like this: (it was cut off on display)
lightboxFixed {
position:fixed!important; position:absolute; width:100%; height:100%; top:0; left:0; display:none; z-index:4999; }
I added z-index: 4999 because I’m floating lightbox over a flash movie. In addition I had to set display:block in both #overlay and #lightbox in order to see all the divs.
P.S. Comments were broken in Firefox 2.
A simple solution for an onload lightbox event is to call initLightBox(); then give your link an id eg. test and call myLightbox.start(document.getElementById(‘test’)); This is lightbox v2 specific.
METHOD NOT ALLOWED Hi I designed mu pages with the lightbox. Worked great OFFLINE , then uploaded it all and got this message in the container box; Method Not Allowed The requested method POST is not allowed for the URL /lightbox-1/text.html.
See http://www.sl66.com/lightbox-1 ( I uploaded the downloaded folder as a test , wich has the same result as my original pages ) Hope anyone can help Cheers; jaap
Everyone needs a hug.
hey how can i use lightbox for my flash website i have created some buttons in flash and i would like them to open a picture in lightbox ! Is this possible or not ? and if it’s possilbe how do i got to do it ??
I’m getting the same METHOD NOT ALLOWED error im using yahoo web hosting
please email me if you know what i can do, if anything, to help this
ANSWER TO THE “METHOD NOT ALLOWED” PROBLEM
this: Alex · 9 months ago
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’
AND - do both
change all the pages (parent and linked) to php
hope it helps
Im having a problem with forms.. I’m trying to close the modal box with my submit button at the same time as submitting to form.. I’ve tried to use
but im too js illiterate to figure it out please help me
Everyone needs a hug. and especially John , this advice really saved my day and quite a few more. HUG HUG HUG !!
Best Tool
Great script! Im very happy with using it. Only sad enough Internet Explorer is such a sucky browser. Its releads my flash menu and puts it on top of the overlay all the time. Losing all the effect.
I ended up here on a tangent. I dont have a use for this right now but I’ve bookmarked it.
Primarily, I just wanted to say that I like the layout of comments :-)
Great stuff.
im using it now „ thanks to coded
For those of you who may have been having trouble with the fact that the contents of the lightbox get duplicated every time you display it, I came up with the following solution. Change processInfo to be like this:
// Display Ajax response processInfo: function(response){ // remove previous lightbox if it's there Try.these( function() { Element.remove($('lbContent')) } ) info = "" + response.responseText + ""; new Insertion.Before($('lbLoadMessage'), info) $('lightbox').className = "done"; this.actions(); },There is probably a more elegant way to check for the existence of a div but I’m not that familiar with prototype. At least this gets the job done. I’d love to hear suggestions for better ways of doing it.
Hi! Thanks so much for this awesome code. I am having a hard time getting ‘close’ to work for me though, not sure what im doing wrong :( I have added the link as follows: Close but nothing happens upon clicking. The javascript error is telling me: element has no properties and is pointing to line 877 on the prototype.js file (?) my js skills are not good enough to figure this one out.. help!
I am having an issue with some special charaters in my html which is displayed in the lightbox. How can i set the charSet to UTF-8 in the lightbox.
yep… me too… i’m having a problem displaying special characters (e.g: Cachè) where the “è” got replaced by a question mark.
badly need help on this one.
TIA!
while i appreciate the humour, i wonder if you might consider changing the image. i was reading this article with great interest, started to tell my boss about it, then went over to the demo. erm .. it was a bit of a shock. hardly suitable for the work place.
Everyone needs a hug.
if i use ajax to update the content of a lightbox, how do i dynamically add a new link to the currently open lightbox that will allow you to close the lightbox? anyone have any good ideas for that?
I am also wondering about putting a lightbox gallery in my Flash movie. I saw someone do it one time, so I know it’s possible, but I can’t figure it out myself. I see a few people have already asked, but no one seems to respond and I can’t find anything.
If anyone has a solution - please post!
is it possible to pass a javascript function which output should be written to the light box instead of a url? this could be very usefull
<
p>Hey Particletree folks, One of the biggest questions with these lightbox style things is: “How do I make it work when the page loads, like with
BODY ONLOAD!
<
p>Hey Particletree folks, One of the biggest questions with these lightbox style things is: “How do I make it work when the page loads, like with
This message board sucks! It keeps ruining my posts.
BODY ONLOAD! WHO HAS A BODY ONLOAD SOLUTION!!!
Hi! great script.. but when coupled with mootools (release 83) only the last one linked works. apparently it gives an “Ajax.Request is not a constructor” on line 126. I’ll be happy to any help possible!
Hello
Did anyone get a solution to Calling the Lightbox gone wild from Flash. I love how this functions and would like to get this to work from flash.
Any help would be great
Thanks
To set scroll, you will need edit lightbox.css file, and insert the “overflow: auto” in #lightbox section.
I don’t think form submissions w/ the ability to post back errors in the submission works with this thing. Unless someone can prove me wrong! ;-)
Hi,
great work, but i have found a BUG - i would like to make a link to a external page. I have replaced href=”form.html” with href=”http://www.google.de” but i only get the LOADING message. I have tested some file:/// links too, and it seems, that only relative links are supported !
Why ? Is there a workaround ?
I have a big problem, everything works fine, butt some images in the lightbox got streched to the maximum, if i put a image into a table with width 100px the image appears in 100px widht, ich i put an image in a table of widht 100% the image appears the whole lightbox. whats wrong there???
Just wanted to comment that your code is excellent — thank you!
Reading over a few posts, I’d also like to spawn the lightbox via a flash app. I’m testing a few solution— I’ll post back with any progress.
After nearly 3 days of trying to get flash to show up correctly in a lightbox under FF (both Windows/Mac), my progress seems to have diminishing returns. From the above comments, it seems like the accepted workaround is to simply use wmode=transparent for the flash movie. This does, in fact, work in my case. The solution does, however, hide the fact that flash movie is playing from some phantom z-index. This can be seen from the fact that while the flash movie renders everytime with wmode=transparent, user control within the flash movie exhibit the same 50% chance of working.
My choice of rendering my lightbox relies on the lightbox div element containing an iframe element pointing to the external page that has my flash movie. Works great for external pages that don’t have rich media, like flash. I’m not sure if I understand the above claims about the timing of when the flash movie is loaded. Indeed, I have placed the loading of my flash object on timer events such that they only explicitly load after enough time has elapsed with no different results.
I feel the problem is somehow attributed to the specific way FF queues rendering items. For example, IE and Opera will load a flash movie even though the parent div is set to display:none. FF, on the other hand, tries to be smart by not loading the file since it is not shown. My guess is that this extra intelligence somehow screws up the rendering queue, inevitably placing the flash movie in some bizarro z-index.
Of course, this is all speculative. Has anyone been able to figure this one out completely? Your help would be much appreciated.
I just activated overlay click -> close lightbox. Here are my edit.
I have a problem with my site, I want a scroll on lightbox when its overflow, else i just see half lightbox… :(
This is a fabulous effect that I hope to use on a flash site I’m working on. I notice there are many inquiries asking how to get this to work from a flash swf, but there are no responses. If you have any knowldege on this issue, your insight would be greatly appreciated!
Erik Sjölander, you are my hero. Cheers!
How would I go about making the submit button greyed out and unclickable until all forms have data in them? From what I can tell that would be the easiest/safest way to resolve the issues listed above but I can’t quite think of a speedy way to do it.
Hi! Very nice site! Thanks you very much! g1aehB1Nh6dt
my page contains 2 different links(URL1 and URL2) that will use the lightbox but when i click the link for URL2 the lightbox will contain URL1. that also happen when using 3 or many links. The lightbox only gets the content of URL1. I checked the navigateURL of the other links and it is all correct! HELP!!!
For those of you running flash movies that keep the audio streaming in IE, here is the solution. Change the following line: objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; } to objBottomNavCloseLink.onclick = function() { myLightbox.end(); window.history.go(0); return false; }
This tells the browser to “refresh” the page or check the window’s history at stage 0 when the close x button is closed. Since the flash movie wasn’t loaded then, the audio stops. Hope this helps…I know this was a pain for me to get figured out. To see it in action, go to: http://www.stormfrontproductions.net/multimedia.php
How can I recativate the auto-resize feature?
Hi. Nice script. But I think you should modify your example a bit, since a newbie would completely go crazy untill he figures out how to link to a lightbox from within a lightbox. In your example there’s an anchor with a child element in it: a button.
Some link textThis works fine if the function reads like this:
// Example of creating your own functionality once lightbox is initiated insert: function(e){ link = Event.element(e).parentNode; Element.remove($('lbContent'));But what if you use a simple link with nothing nested inside? Like this one:
Some link textOoopsie: Safari says »null«. I had to change the insert function to this:
// Example of creating your own functionality once lightbox is initiated insert: function(e){ link = Event.element(e); // remove selecting the cild element Element.remove($('lbContent'));To find out took me an hour! ;)
But anyway, big hug, nice script!
Great script, have added a link to it in ajaxshack directory http://www.ajaxshack.com
I am trying to put a form with a tiny mce rich textarea on a page called by the Lightbox Gone Wild. Has anyone else had the same problem? Any idea?
Thanks.
How to center vertically a lightbox?
Centering things vertically in webdesign has always been a problem for me and here again i block on this :
I’m using the lightbox and fill it with text coming from a database, so i don’t know what will be the height of the lightbox.
So in the lightbox.css, i changed this :
lightbox{
It works well, the box adapts its height to the content, but now i’d like to have the box centered vertically (it is horizontally as the width is fixed).
I thought i could use : var p = Position.getPageSize(); $(‘lightbox’).style.marginTop = (p.page.height-$(‘lightbox’).style.height)/2 + ‘px’;
but $(‘lightbox’).style.height has no value here…
Any idea?
if i want to show my div on body on load how I setup this? thanks
jjodfpwk
Everyone needs a hug.
To add the ability to pass $_POST and $_GET variables add the line,
after the line
in the javascript.js file. And then pass the variable “pars” into the parameters of the Ajax.Request function.
Form.serialize returns a url-formatted list of field names and their values, like ‘field1=value1&field2=value2&field3=value3’ which is what the the Ajax.Request function expects for its parameters.
The full code for the “insert” function:
In the form.html file, I am sending the variables to upload.php via
Hope this helps! -Chris
The submit code didn’t show, but this is what the “a” tag includes.
href=”upload.php” class=”lbAction” rel=”insert”
This is great, thanks for all of your hard work you have saved me a bunch of time in development.
I am using lightbox wild with image mapping.
But I am facing problem with resizing of the image as soon as the popup window of lightbox apperars.
Images look like blurry at a first click,but when I reload a page, it works fine.
I have tried the solution provided by Matthew Strickland over here,i.e. by removing following lines from lightbox.css file, but it didnt work for me.
lightbox.done img{
width:100%; height:100%; }
Has anyone else had the same problem? Any idea? Please suggest a solution if anyone is having the same experience.
Thanks in advance.
Everyone needs a hug.
Flash…i have a flash menu, i need it work in this, how i made?
Just a side note — Converting .html to .php is enough to stop the 405 error from happening.
Ran into that problem and didn’t a confirmation to the solution.
is there anyway to remove lightbox functionality for links you’ve defined with class=”lbOn”?
i have several items on a page, but only one needs to trigger the particular lightbox. i’ve tried using prototypes $(element).getElementsByClassName(“lbOn”) and removing the “lbOn” class after the lightbox has disappeared, but it’s still triggering the lightbox to appear. how can i reinitialize the lightbox code to ignore these links that no longer have “lbOn” defined?
Everyone needs a hug.
doesnt seem to work when using along side the SIFR js for headline text, it ends up just linking the page as normal.
Is there anybody who have implemented the moo.fx thing or is able to fade in the lightbox? I would like to implement one of those effects (), that’s one of the advantage from thickbox, but i like this thing here much more, cleaner smaller code and prototype not jsquery solution, only an optional effectlibrary is missing.
Hi Chris, we would like your permission to use your lightbox code. I couldn’t find your email address on the site. Do you mind shooting me back an email. Thanks.
Thanks to jonben, I now have the lightbox displaying the image at it’s correct size, without the large white box that could not be resized.
thanks, very good !
good works.. thanks…
thanks..
I’m trying to use Lightbox with a simple mailer form. Somehow it seems that the form does not get posted. Any ideas? The form of course works when not in a lightbox.
Thanks
I have a form in a lightbox ( form has an action). Is it possible to validate de form serverside and display the errors in de same lightbox?
Thanks..
Hello
I very much like the scripts and would like to use them for some of our commecial projects. First I’d like to know more about a few things:
I’m not sure how to prevent IE from auto-resizing images. With Firefox it seems simple enough, removing lightbox width and height does the job. What about IE?
This leads me to another issue. If I remove lightbox width and height, horizontal centering doesn’t work.
Can we use your scripts for our commercial projects? If we can, how does your licencing work?
Thanks
Nice script! One question: I want to use lightbox for some form. Is it possible to execute some js-code before deactivationg lightbox? E.g. Cancel Cancel but this code don’t work.
I was having the problem that a couple people have listed, when you want to include elements that are dynamically created by javascript using “innerHTML” or “document.write” declarations. The problem (i think) is that the initialize() function will not find these elements because they don’t yet exist when the page is loaded (so the class is not attached). I worked around this by creating the elements within the page and then I dynamically populated the link href and link text with javascript. As long as the elements exist on the page when it is initialized then the lightbox will function properly and you can still dynamically populate the text and href. Hope this helps someone!
good job ! realy like this script :)
Thanks for this script!!!! ;)
Great job. Nice tutorial. I will implement it in my website
Everyone needs a hug.
Another request for commercial licensing info here…
And none of the fixes concerning the loading message not displaying after the first time are working (on any browser)… I know it should work but it doesn’t… Are there any others still having this problem?
I tried adding to the deactivate: and also “ctrl.onclick = function(){$(‘lightbox’).className = “loading”; return false;};”
neither is working for me… Testing on IE6, Mozilla 2
Hello-
Just a heads up guys I am working on a lightbox script that is going to do everything this one does and dakars and even more. About a week out.
Lattaz
nevermind… I definitely got that problem solved… excuse my idiocy :D
still want licensing info though
Anyway to contol div’s ?
Trying to get this to work document.getElementById(“area2”).innerHTML =”hello”;
Within the lightbox
Any ideas ?
I used it in my site and works great!!! Thanks dude!
Sebastian buscouniversidad.com.ar
has anyone tried slimbox? really nice.
http://homepage.mac.com/yukikun/software/slimbox_ex/
Has anyone been able to utilize lightbox for the purposes of playing video?
Hello, is there a way to make the lightbox’s width automaticly set by the width of the content that is loaded into it and still have it centered on the page?
And i’m having issues using this script with the latest prottype on IE, it simply is’nt loading ajax content, any idea? Thanks
For those having problem getting lightbox to work with dynamically inserted content, I found a call to “initialize” whenever I load the content works out pretty well. This function is usually on called when the window initially loads.
For example, using prototype Ajax updater: “new Ajax.Updater(‘my-div-to-update’, ‘my-url’, {evalScripts:true, asynchronous:true, onComplete:initialize});”
I have a feeling that this will result in a memory leak due to “initialized” lightboxes remaining around when they are no longer on the page and new ones being initialized over the long term, but I’m not good enough with js (yet) to understand this completely.
Great tutorial. Tnx a lot to share it!
If you try to write in your example greek words Όνομα instead of Name you will get boxes instead of greek characters. Only if you write html entities like Κ you are able to get the greek character Κ etc…
Any suggestions? I think that other languages will face the same problem.
Imagine every feature request on this page and a whole lot more and ALL of the functionality of lightbox2 and even more in one system….
Now while you are imagining wait about a week, I will need some feedback and will release it very soon for this reason.
…docs take time as well as browser testing….
Hey, great job.
Do you know if there is any way to make LBGW non modal?
So I can include onmouseover events from other places to change my LB image ???
Thanks, STeve
this is great. expect to see this at angelsoft solutions. thanks!
For people having a problem with innerHTML elements, after you create the elements, call the javascript function initLightbox(); That should solve your problem :)
what about callbacks? is it possible to reload the underlying page content without destruction of the displayed lightbox?
As promised:
http://stickmanlabs.com/lightwindow/
Hope someone finds it useful.
Thanks for the advice… great tips!
Cheers
Everyone needs a hug. But, I need some urgent help I can’t find anywhere.
I am returning JSON data from the link I send lightbox. In processInfo, I am trying to parse this JSON but it always dies at the dataIn = eval(‘(’ + response.responseText + ‘)’); line. I want to get dataIn, the be able to do info = dataIn.email, info += dataIn.name, etc.
I tried using prototype evalJSON but that fails as well. Can anyone please offer any advice on doing this?
ok…first off, great script!
I have a lightbox that has both “insert” links, and a dropdown AJAX.Updater script. Currently, the “insert” links, and close (deactivate) mechanism work, until I use the AJAX.Updater.
I am using
new Ajax.Updater( "lbContent",url, { onComplete: function() { Event.unloadCache(); this.actions(); } } ) ;in my AJAX call, and yet it still doesn’t work. First person to get me a good working solution gets a free beer (via Paypal). If you want to help, send me an email, and I will get you to the code I currently have in my dev environment.email = admin at ccgdb dot com
Great tips! Nice… ;-)
or…how to do an “insert” with a select (drop down), or set an “insert” event for a select? Would that require a change to the actions script, and the type of values in the select?
With IE 7 don’t works
nevermind…I found a lightbox at a 100% javascript-driven modal (Control.Modal) @ LivePipe.net (it can also do Event driven, like LBGW).
People use CSS2 all the time, and they even already use parts of WHATWG HTML5 (like the CANVAS element, or contentEditable). I do not believe that the W3C HTML WG will complete recommendation status by 2008; and neither do I believe that that WG shall be disbanded late 2010. Specification are usable before being finished but not before those parts are incorporated into User Agents, e.g., browsers. Safari, Mozilla and Opera (since they’re the copyright holders) may be the first to include HTML5 elements and attributes once they become stable, Right?
HI! I have a form(popup.php) from which input data to be posted to next send.php page. I have used as in example but values do not get posted? Anyone can help?
Hello
Does anybody know if it’s possible to trigger an onload event in the html file that loads in the lightbox? I’m trying to check a particular radio box when a search form loads in the lightbox. Works fine when loaded in a browser window, but in the lightbox it doesn’t trigger the onload event. Any ideas, or a better way to manipulate form fields in the lightbox. Thanks.
hi there:
i just found an image host who hosts the light box script and your image light box’d for free…
http://www.inselpix.com
i just thought i’d share it with you all! :)
HUG ME BACK ALL! :)
j
this script’s error with flash embed on Firefox . CAN”T CLICK ON THE COVER LAYER
I am trying to make the script start when the page is loaded. Does anybody have an idea how to make this done?
Regards, Constantin
is it possible to load dynamic content in the lightbox window, ie a product details from a mysql db?
I am trying to make a registration form with the lightbox script. I want to do some checks of the form (ie. valid email, username, password). For some reason, it won’t allow javascript functions on the windowed page. Anyone else with this problem? Or a solution? Thanks
There are sites and examples where lightbox is called within Flash, yet no one is willing to share how it’s done. No one has a concrete, step-by-step answer. Some tutorials exist, but they’re usually incomplete or completely wrong. I know there are people who know, but won’t tell us. Why does it seem Flash and lightbox are taboo together? Share some Flash/lightbox info people. Where’s the love? LOL :)
for everyone who wants to use lightbox from flash, there’s a script called flashlightbox which does exactly that. I haven’t tried it yet but i’ve seen it working. look fo it in google and that’s it finally. hope it helps
here’s a donwloadable file with flashlghtbox.. http://juliusdesign.wordpress.com/2007/02/09/flash-e-lightbox/
ok, now i need a hug (again:) i’ve been trying to use lightbox from a link in a page loaded via ajax (in a div)…and it doesn’t work! Even if the ajaxan page is the index.html i just downloaded from here (clearly it works on its own). 1) i checked tha paths 2) there are no conflicts beween scripts 3) so i’m stuck any idea?
this is tha page im workin on http://office.azero.it/fitoben.it/prodotti/prodotti.php (choose soething from the first and second select, click on an img and you’ll find the index.html..) thanks
Its great to see such a creative mind…………. I have a doubt can i implement lightbox in struts application it will gonna work or not please help me out..
for everyone using LGW from within content loaded via ajax: this link has a solution for our problem:) http://www.dynamicdrive.com/forums/showthread.php?t=17426 (thanks to john from dynamicdrive).
Now the new problem: how can i stop IE from scrollin up when i open or close a lightbox? i need it to stay exactly where it is. and then..i want a link within the lightbox to load some content inside its parent div and then close itself but the -class=”lbAction” rel=”deactivate”- stop my function ajaxpage to load the content. Any help/thoughts/idea?
here’s the infamous page
http://office.azero.it/fitoben.it/prodotti/prodotti.php
one more question.. what if i want the light box page to scroll if the user window is shorter then my content (now if i scroll in firefox only the original page moves, while ie i can’t scroll anything) cheers
Everyone needs a hug. wawoo it’s very cool ~~
assume i have centered content on a page… and i would like the lightbox to open directly over this content centrally on the page (irrespective of the browser screen resolution) i would normally create a relative div and then an absolute div layer to position the content relative to central content on page. But i cant seem to do something similiar wit hthis script.. does anyone know how to achieve this. ???
You should also check out this one by Kevin Miller: lightWindow
Handles a variety of media.
http://stickmanlabs.com/lightwindow/#download
i solved my previous problems…one more thing though, concerning ie6.. to make the setScroll work i changed the 100% to auto value in the PrepareIE function: it works fine in ie7 but the overlay div in ie6 doesn’t stretch to fill the page..what could it be?
http://office.azero.it/fitoben.it/prodotti/prodotti.php
why not to put up a forum for LGW? i would be very useful for everybody Hugs Vittorio
anyone with a solution on how to make this work all the time in firefox when flash is used ??
Like marc above, I can’t get javascript tied to controls in a light box to execute. I’ve got a simple page with one function on it. There’s a button on the page with an onclick attribute to call this function. Clicking the button generates an “object expected” error in IE and my script never fires. Taking Lightbox out of the picture and just running the page shows that the click works outside of lightbox. And replacing the call to the function with a simple alert(“Test”); results in the alert being displayed as expected.
I just can’t get the function to execute from the onclick handler for the button when it’s displayed via LightBox.
Any ideas?
Thanks in advance!
-=- Steve
Very Cool, We used your code (with modifications) on our new site Up Up Results Pittsburgh Web Design. we are publishing the new code used to make the changes (with credits to you and the orignial of course). Thanks for the great work!
Max
any advice on why the function setScroll doesn’t work in ie6 (in the standalone version) on the deactivate action?
I spent so long looking for how to deactivate lightbox with javascript. I finally figured it out.
If you’re loading in different links that activate lightbox via ajax, they won’t work if they aren’t there when the page loads. To fix this, simply call
Another really good tweak is to remove line 59-62 in the stylesheet if you are using lightbox to display stuff besides images.
I hope this helps. I know that this made lightbox actually usable for me now.
It’s very nice but i can’t use it :’( HELP!
I have a form in a lightbox ( form has an action). Is it possible to validate de form serverside and display the errors in de same lightbox?. Please help me asap. Thanks in advance.
Thanks..
First of all thank you for this nice javascript.
I do have a little problem though with opening a lightbox from content that got inserted with ajax. I did read the page linked in the comments and I tried it. But the problems still exists.
After the first call of the initialize() function there are two lightboxes opened. And if the initialize() function is called a second time, every click on a class=”lbOn” link opens one more. So one click opens 3 lightboxes for example. I hope I made myself clear… it’s confusing somehow.
Any ideas are really appreciated. Thanks in advance.
@JAnak
sure, just do a AJAX request and have it update a div inside the lightbox.
I change this funtions of light box: initialize: function(ctrl) { if (ctrl.rel == “error”) { this.content = ‘#’; this.displayDiv = ctrl.rel; Event.observe(ctrl, ‘click’, this.activate.bindAsEventListener(this), false); ctrl.onclick = function(){return false;}; //this.activate(); } else { this.content = ctrl.href; Event.observe(ctrl, ‘click’, this.activate.bindAsEventListener(this), false); ctrl.onclick = function(){return false;}; }
},
loadInfo: function() { if (this.content == ‘#’){ divbox = $(this.displayDiv); info = “” + divbox.innerHTML + “”; new Insertion.Before($(‘lbLoadMessa_e’), info) $(‘lightbox’).className = “done”; this.actions(); } else { var myAjax = new Ajax.Request( this.content, {method: ‘get’, parameters: “”, onComplete: this.processInfo.bindAsEventListener(this)} ); }
},
deactivate: function(){ if (this.content == ‘#’) { Element.remove($(‘lbLoadMessage’)); } else { Element.remove($(‘lbContent’)); }
}
This is to load in lightbox by div id (previous example ot this page), Also I add 2 different styles for lightbox on the same page.
When I click link with first style- ok, when I click second link with the second style- ok, then click again first link with first style- lightbox open and CAN’T loag contents. 1st link with a href some page, second link is load content by id.
Have someone idea about this problem? Thanks!
And here is the solution:
// Onload, make all error msgs that need to trigger a lightbox active function initializeVal(){ // addLightboxMarkup(); lbox = document.getElementsByClassName(‘lbOn_c’); for(i = 0; i < lbox.length; i++) { valid = new lightbox(lbox[i]); } }
and add this for page onload
Event.observe(window, ‘load’, initializeVal, false);
Cheers
And here is the solution:
Event.observe(window, ‘load’, initializeVal, false);
// Onload, make all error msgs that need to trigger a lightbox active function initializeVal(){ // addLightboxMarkup(); lbox = document.getElementsByClassName(‘lbOn_c’); for(i = 0; i < lbox.length; i++) { valid = new lightbox(lbox[i]); } }
Could you instead of creating a div for the overlay assign the body the id “overlay” when you wanted to hide it and remove it when you wanted to show it?
Everyone needs a hug. And a lot of people need help with Forms! Please make a more detailed tutorial for forms with lightbox.. Thank You!
has anyone been able to make this the lightbox (gone wild) work with the newest version of prototype.js —- it looks like the lightbox code is being distributed with prototype v. 1.4.0 and now many things (including scriptaculous) are using prototype v 1.5.0 which does not work with the lightbox code and is creating many use conflicts… just wondering… thanks.
Does anyone know how to launch the lightbox from a frame and have it overlay the entire frameset? So my class=”lbOn” link is in a frame but when the lightbox fires it just overlays the frame that the link is in and not the whole page. Any help would be appreciated.
I believe this one applies “Unless each man prodiuses more than he receives, increases his output, there will be less for him than all the others”, doesn’t it? got no site
whats the solution for this
I’m having problems in IE where the flash movie is displayed on top of the lightbox.
Sorry if this is a Double Post… How can you change the size of the Lightbox to a larger size… I’ve tried editing the CSS file but that throws off the centering?? Any help?
Great script guys! But I had to fix a little bug. If you close the lightbox and re-open it again, the activity indicator won’t be displayed anymore. To fix that, I hacked the
Hope it might help someone ;-) Greetz, toby
Has anyone actually managed to get onload command to work, because I have tried all the examples above and none of them seem to work.
If someone could actually post the solution (e.g. what code needs to be changed, in which files) that would be great.
Does anyone know how I can put the previous and next hover links outside of the lightbox like the close link image I don’t want it hovering over the image
Hi All has anyone figured out how to edit the CSS so the width & height can be auto set to the lightbox’s contents but still retain the correct centering on the page? Complete noob here :D
regarding forms: i added the form.serialize to the lightbox.js as Chris suggested…. but what should the server script look like? i have a simple php mailer script but it wont receive any variables using this method. i can go back to using classic form-submit and receive variables but it reloads the underlying page (php script header reference), which looks kinda bad. thanks! hug!
michelle — position the links in your css using position:absolute; then you can put them anywhere on your page (using top, left, margin, etc.)
Sprites // IE 6… When one closes a lightbox window, it disrupts any links using Sprites. Anyone know of a work-around?
I need to create a scrollable DIV in the lightbox. In the usual page, when I create the DIV with overflow:scroll, it display the scrollbar, but when I put it into lightbox, I can’t see the scrollbar and it’s not scrollable.
Anyone can help me?? please.
I have created a signup form inside a lightbox that uses AJAX to submit the form, process the results and display them within the lightbox. However, when I try to use a link to deactivate the lightbox on the result window, it doesn’t close the window. I’m using the code on the first ‘page’ of the lightbox as well and it works fine. But once the form has been submited the deactivate link (Close Lightbox. ) doesn’t work.
Im having the problem linking to lightbox from another lightbox. My code is: >Go to Another Lightbox but it just opens a blank lightbox, and the url is fixed in the statusbar as if its not loading. Ive tried debugging with no luck, any ideas please?
What is the license for this? There is a comment to Ben that eveything is under a Creative Commons license? Which one? Where is it? I can’t use this in company if not license to point to.
Found another posts above which indicates the license is supposed to be the CreativeCommons Attribution license (version 2.5 or later)
However, you do not seem to be even following this license?
For example: —Attribution. You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work).
You have not specified anything?
Or: —For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do this is with a link to this web page.
You dont provide any clear license terms for this work.
Please could someone solve the flashing cursor issue in firefox ?
Really simple question. How would I display the form in the example on page load?
Thanks for you great work, I have a work around for variable window sizes, don
t know if its posted yet.add a rel tag to the link: (width x height). In my case I only needed the width size because I`ve set height: auto in CSS.
add “this.size = ctrl.rel;” to initialize: function(ctrl) to capture the rel tag.
add var arrSize = this.size.split(“x”); $(‘lightbox’).style.width = arrSize[0]+”px”; $(‘lightbox’).style.marginLeft = “-” + (arrSize[0]/2) + “px”;
to the activate: function(). And it works.
Need some sort of form example. I see this has been asked for before.
I have a form in lightbox gonewild with three fields. Comment, name, email. On submit I want to post to another lightbox where “onload” I can grab the contents of those fields and run an ASP server script to submit to a database and send email…and finally display “thank you for submitting your comment” in the new lightbox.
I don’t understand the serialize form input suggestions given in the comments. Is it possible to add an example of how to do something simple like this?
I’m trying to implement a onKey event; when Escape-button is pressed then disable lightbox.
Inserted this above the ajax response function:
Instead of “this” there should be some form of id to the ligntbox element, but I dont know which.
Currently the content is being cleared at least. Help would be appreciated.
I like this, going to spice up some websites with this.. thanks
Love the lightbox idea but have a slight issue. Basically when i used it in HTML it worked fine as long as I change the method to GET instead of POST. Now Im doin my website in php but for some reason the lightbox doesnot work. I was just wondering whether it needs to be changed back to POST or it doesnt work with php. Also on the lightbox page it shows text “loading” at the bottom and once an image is clicked it fine. Anyone experienced this?
This is so wonderful!!! Thank you! I have run into one problem though. When I close the lightbox my main container, with a z-index of 1, closes as well. Why this is being targeted? The DIV is certainly named differently.
like the lightbox, but do not get the Cursor to appear in FF.
There were several demands for a solution, but no working reply/fix so far.
I am willing to pay 100$ for a fix, any help?
Heiko Frosch heikofrosch(at)webPOINTde
I have a big big Header Problem !!!!
This would be my Header Content-Type: text/html; charset=iso-8859-1 but how can i give this Information the the Lightbox Script ??? I cant find any reason. Im no JS Proffessional. Only a Designer. My German Characters wouldn’t work with this Lightbox, but i hope their is a Reson for this kind of characters.
Please send me an answer
How to download the source code. When I click the link Download the Code. it seems no zip file there. I tried to download by clicking “download sources”, still nothing happened. It is source code still aavailable?
To get your flash to display under the lightbox; add the following to your flash object.
I’ve tried to include a form with dropdown menus (ie select) in lightbox, in FF it works perfectly fine, but when it comes to ie6 and ie7, the fields disppear.
Is this a bug?
Hey - your lightbox is great, but i still have some probs with submitting forms like some people before:
I have a form with four fields. Name, email. topic and message. On submit I want to display if there are any errors like no valid e-mail adress and something like this. I tried do follow your advice with the “insert”-id to show lightboxes within a lightbox. On submit there comes another page in a lightbox with the error-text or a message that everythings gone fine. But it doesn´t work anyway…
I need help - so, please send me an answer! —Regards from Germany—
It’s soooooooooooooooo COOOOOOL. I tried make sth similar… Good JOB!
I downloaded the code and it does not work on my webserver. The lightbox gets filled with browser window “Page Can Not Be Accessed”. The code - however - runs fine when run as a file. I suspect something changes when I move the code from my file server (where it runs fine) to the web server (where it gives a 405 error). Can you help? Thanks!
Michael: Try add to select style “visibility: visible !important;”. Should help in IE
Is there any possibility to translate this article? Let me know.
Is there a solution for overlaying an entire frame set, and not just the frame where the link is? I did not see it posted…thanks! help is appreciated
Hello,
Great lightbox. I’m interested to apply this into my site. But i have a problem in implementing it I wanted to put lightbox form. How do i put some validation of the form? Pls help me.
Thank’s
Hey I’m liking this! Does anybody notice how the content of your HTML page underneath the lightbox is shifted over to the right when the lightbox is displayed?
Any ideas how to fix this weould be great!
Got some problems using your lightbox with the new Prototype version, under IE7 it´s just showing the preloading screen and stops there. When I replace it with the old Prototype it works, but my scriptaculous stuff ist not working anymore then. I´ll try to figure out where the problem is in the script, but if some of u guys knows a solution … ;)
Truly beautiful…
I came across this code after looking through Threadless.com’s source for their lightbox implementation. Throwing your addy in the source is a good idea. ;-)
How dosome validation of a layered form? I too am having an issue with this. Everything works fine, the form appears and the page below grays outs but I need to call some js scripts to validate before submitting the info and for the life of me I can not get it do this while using Lightbox classes. The page works fine by itself. Can someone throw me a bone here.
Thanks
hi, i m having problems with forms as well, basically on submit, if there was a way to use a submit button instead of an href link ?Cheers
No FT. No comment.
Hi there! First of all: great job!
But i’m having a problem: i want to show a youtube-video in the lightbox. So, the content of my lightbox is just the youtube-embed-code. The Problem is now, that i can see the youtube-flash-player, but i can’t play the video, because i can’t click on anything from the youtube-flash-player. There is just the simple cursor and not the cursor-hand… I also tested some z-index-values… but that did not worked. Curiously it works very well with IE, but not with Firefox…
Does anybody know how to fix? Or a workaround? Any Idea?
Thanks and greetz, Karlsson
sorry for my english ;)
great script, everything is working perfectly but one minor issue!
When I open the page, in internet explorer 7, my main website jolts a tad (2px or so) to the right. Then when I close the lightbox link, it jolts back to the orignal position. In firefox the behaviors work perfectly fine. Does that make sense?
Would love some feedback, thanks! :)
Does anyone know how to allow a person to scroll if the content is longer than the screen? I havn’t seen a post describing how to do this.
Hello, I’m having some strange problems that I can’t really describe with the lightbox
I implemented it in the “Preview Code” link under the logo here http://www.lazycode.info/programs
you have to click it a few times to see it work then scroll down any hints?
Got it working after some fuss, amazing script by the way
I was wondering if you guys are going to make this work like Lightbox 2, you know, make it automaticly fit the content… and have a close button drop down.
its works on my computer, but when I upload it to my host I get a 405 error, bad http verb anyone have a fix for this?……
I had problem getting this script working because I was using the newer version of prototype. So I decided to try another framework and I found this http://thecodecentral.com/2007/07/13/creating-lightbox-with-yahoo-user-interface-library.
With a little setup, I can create lightbox effect (with HTML content within it) and the compatibility is great.
I have a bug showing up when the background gets greyed out. The flash ads on my website does not get greyed out. Anyone care to explain why ?
Hello, I was just wondering if it is possible to open Lightbox GW from a redirect. I.e you get to a page but you are not logged on so the log in box (Inside Lightbox GW) is auto opened? Thanks
Hey! I need some help, because i am no js pro. So, my problem: i have a index site with a div tag and i load via Ajax.Updater another php file into this div. this works. the lightbox works, when i call it directly in my index file. but i want to call the lightbox in the file, which i load with the ajax.updater. when i try this, it opens just a new site, but no lightbox any more. i also try to first call initialize() in the file which i load per ajax. doesn`t help. why? thankx!
Hi!
I have a FormView that shows when you click the link and it works fine. The problem is when you click on the pager, then it closes the window in internet explorer. In FF is it showed like a regular windown (without a the rest of the design) and the ‘close window’ link stops to work. Do you know whats wrong?
I need to know 2 things: First To get my flash to display under the lightbox I have to add some code to my flash object and I need to know it. Please help me. And Second what I have to do to send the information in the form to my mail?
Great script, but the form example doesn’t POST. It might as well just be another link example. How do I pass the submitted forms to a php script and keep it inside the lightbox?
Hi,I am very much thankful to you for devoting such a valuable code.I am developing an application in which lightboxAjax is to be used.I got a priblem there.I want to submit a form.But,as all pages are returned to index page,I can not do form validations,aler messages of success on the form page.Can you please help me ?I request you to help me in getting so.Also,when going through ‘prototype.js’,I understod some points.The coding is excellent.I needed comments threre.If there were comments,I would have used the code proficiently.Thank You !I personally appreciate you for such a great job.Please reply.
can I display a .swf within Lightbox Gone Wild?
Hi… I’m a complete novice to all of this and I saw an example of a lightbox and I found yours. I’ve been trying to get it to work but I’m falling down on the section “activating lightbox” :
Email This
I’m not sure where to put this line of code. Could you tell me? Is there a camtasia video for how to get Lightbox to work?
I didn’t read through all of your feedbacks, but from the one’s I did read everyone seems to be experts.
I hope you can help, thanks a million. John
In order to center your lightbox with content of unknown height and width, change the height, width, and margin properties to auto in the CSS file.
Hi
I’ve tried to use it, and it works fine locally, but i get a “The requested method POST is not allowed for the URL /saj/gb.html” - error when I put it on the server (running Apache)
Any suggestionss?
Regards Klaus Mogensen
(Everyone needs a hug)
Hi there.. this stuff is really freaking me out :-) good work!
d
Can you have a drop down list in the div? I tried it and I can’t get it to work….
Choose a Search Engine… Yahoo Google Ask
please tell me if it would be possible to call an asp file as the content in the lightbox
Thank you. It is working really good.
Thanks a lot for this, it works very well!
One question I have, is it possible to make it so that clicking outside of the lightbox closes it? I don’t want users to have to click the “Close this window” button.
Thanks again!
Lightbox 2 has been out for some time. It supports a number of things various comments here have asked for.
Try it out at http://www.huddletogether.com/projects/lightbox2/
Hi,
I’m Mon Magallanes of the Philippines
Can you help me with this issue…
I use this feature to my system. Everytime the user make changes, the DIV that will calll the lightbox will apear. Then the user will click it to apply the changes. My problem is I want my DIV that calls the lightbox disappear when the lightbox deactivated. Is there a way?
Your help will be highly appreciated…
Mon Magallanes
I have some JS that changes the url of a link on a page every few seconds. If it’s a certain link I dynamically change the link class to be lbOn. Even so, when I click on the link it doesnt open the lightbox.
Anyone help?
I need help for my form to submit before the link is submitted. I am using lightbox to display a form preview and it is not sendng the hidden values due to the form not actually being “submitted” but it is linking me to the lightbox. How can I make the lightbox function onsubmit?
I having group of images but i want to display the images using Light box , I added some files like light box.cs and light box.js even though i am unable to display the images can u help in this as soon as possible really i would be thankful to u
Everyone needs a hug.
For those wanting to open a flash movie in a lightbox - including the possibility of passing variables into it, I’d recommend using Ryan Lowe’s LITBox with Flash Support. Sooo much easier to use and has the same effect.
http://www.ryanjlowe.com/?p=11
i have two problems when using this lightbox.
Thanks a lot for this. just getting my head round making it work. Just wish I could work out a way of dealing with space characters :(
I have this script working fine, but the problem I’m getting, is that I want to user the rel=”insert” on an image, but when I do it, it just loads a blank lightbox. Can anyone suggest a fix? Thanks :)
ddddd
Just want to say thanks to: enej who posted a fix how to close the lightbox by clicking on the greyed area(outside the lightbox bit) Heres what he put incase you cant find it. I was originally searching for the keywords:
clicking outside, deactivate on click, clicking outside area, overlay and couldnt find it,so added the keywords for future searches. Heres what he put:
#
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);
#
fuck
Everyone needs a hug.
Is very good, everyone come here : http://www.ququhu.com
Is it possible to make the popup show dynamically generated content instead of a static html file? If so, can someone please point me to the right way of doing so?
Thanks, m^e
we used this
Hi,
Great Work, It will save time of all of us. Thank You.
Thanks for the script, however on IE 7 on XP just before the browser window goes dark and the content pops-up the main content on the page gets shifted over by about 72 pixels or so. I have looked through the source and haven’t found the problem yet. Anyone else have this issue on IE 7 or 6?
thank you
muchas gracias , esto esta muy bueno :D
great, thank you :P Best Regards
Anyone have any issues with images being displayed bigger than they should be? I have some images that are supposed to be displayed at 500x150, but they are displaying at 590x177. This is on a dynamically generated page being called.
Any help, please email rrasco@smfgarage.com
Nice LB by the way.
Has anyone else run into issues (and hopefully found solutions) for opening other popups from a lightbox window? I have a nice little window in a lightbox where people can view the colors that define their websites, and I want to trigger a color picker that will open in a new window, allow the changes to be made, then if they like the overall palette, they save the changes from the lightbox, otherwise they close out and keep their previous colors.
Unfortunately, I can see the effects of any inline javascript while I’m testing, but as soon as I try to do ANYTHING that pops out of the lightbox, it just does nothing. I can’t even get an alert box to fire during testing, never mind the new window with the color picker.
I am using lightbox to load a local html page. The page has it’s own javascript with some functions activated by prototype’s version of an onload event.
When I check the generated content of the page after the lightbox has been activated the html pulled into the lightbox div does not include the call to the javascript (found in the head of the local html page).
Does anyone have any advice on using lightbox to pull in a local html page that has it’s own javascript? I am not even sure that my ‘onload event’ in the pages javascript would work, because the html page is not being loaded as such it is being pulled in by ajax.
I can’t use it on IE, cause a blank screen comes…
Anyboy help?
rafaelcg at gmail dot com
Lightbox is cool. it is easy to adopt it into your design. Much thanks for free stuff
I get this error
“Method Not Allowed. The requested method POST is not allowed for the URL /network-about.htm.”
What do I need to do to fix this problem or to make it work
I am looking for a way to close (“deactivate”) the window from “outside”… I activate lightbox to display a form, when it is submittet, I want the lightbox to dissappear. The other thing I could imagine is closing it with rails’ rjs files… Any hint on how to do this?
You can view this short tutorial I made to make lightbox automatically popUp (ala onLoad functionality) with ease and flexibility.
http://webfoundation.net/downloads/lightbox_gone_wild_tutorial.html
enjoy :)
I keep getting this error everytime i try to open on the links in my website…. help anyone?
“The page cannot be displayed The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access.
Please try the following:
HTTP Error 405 - The HTTP verb used to access this page is not allowed. Internet Information Services (IIS)
Technical Information (for support personnel)
Hi, I want to use your version of ‘lightbox.js’ for a commercial project, but did not find any license or copyright information in the sources. Is your version of ‘lightbox.js’ also published under CC 2.5 ‘BY’ ?
Regards, Tino
Very nice I will try it out on my site. :D Thank You
Does anyone know how to activate lightbox via javascript? (i.e. by passing I want to show that my record is being saved (e.g. Saving record …) using lightbox while the record is being saved via Ajax.
Hi all,
I’m trying to work out how to pass variables via a querytring to the target file (whether it be ASP, PHP or SWF) but any attempt at adding a querystring results in the target not loading.
Any ideas?
very nice stuff! thx a lot for this!
I may use HTML you say?
What about style=”“?
I need some help. I have a modal that pops up over a flash movie. The flash movie initially disappears when the modal is activated, but when the flash movie gets to a transisition, it suddenly shows up through the overlay. How do I make this work?
Can anyone help with this error message I get when I run the demo on my hosting company’s server?
The page cannot be displayed The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access.
Please try the following:
HTTP Error 405 - The HTTP verb used to access this page is not allowed. Internet Information Services (IIS)
Technical Information (for support personnel)
I tried using this on another box and now I get…
Method Not Allowed The requested method POST is not allowed for the URL /text.htm.
Apache/1.3.39 Server at http://www.mysite.com Port 80
For those wishing to include PHP in your lightbox, here is the best way to do it. Open form.html, add an include call to your php file for say variables, then just use your variables in your form.html and you should be good to go.
Right now I’m having issues with the chdir(); but thats not working too well.
Just figured it out. Use this: chdir (‘../’); then include your variable php file and your all set.
hello, lighbox is just what i need. But i wonder if this is possible: i want to open a form on a lightbox to send a recomendation e-mail. The form, on submit, must redirect to another page. now, the whole page reloads, but i just want that reload on the page on the lighbox. Can anyone help me?
How do you pass the $id variable from your php page into lightbox so that it can properly add your entry to the right part of your database?
Here is my solution for onload. Works well .
Add following in your lightbox.js->initialize() method ; right after current for loop
What this does is looks for a lboxAutoLoad class and auto loads the modal dialog only if it finds above class in the page where you are calling lightbox.
Go to your page where you are calling lightbox add following
For anyone using lightbox on a URL with a query string and having problems, I found this worked for me:
Add the following to your initialize() method
In your loadInfo() method set the parameters for the AJAX request to the query string value
HTH
Nice work , it works perfectly for our Needs. cheers
Hiya!
Superb stuff dude! Thats exactly I was looking for.
But there is an issue, I am keep getting the “Invalid Argument” error in my IE 6.0 while running your example in the ASP.NET Project, any reason why I am getting this?
I get this error when I click on the link and I setup it up as mentioned in your article as follow:
Comments
When I click on the Comments link, it show the background (as black as it is on your website) but it don’t show me the file I put it there that is Form.html, it saying “Invalid Argument”
Any idea why’s that?
Thanks
Mudassir
If you want an onload-event to work when the page loads, just “id”-tag (in this case “the_first”) your desired image and modify your lightbox.js with the following code:
I found this on the Dynamic Drive forums. Happy X-Mas Bernhard
Everyone HELLO~~~ TAIWAN NO.1~~~
This is not working with prototype.js version 1.6.0 Right now I have to call 1.4.0 and 1.6.0 because I have no idea which part of prototype lightbox is using. Anyone got this lightbox to work with 1.6.0?
Everyone needs a hug. Yeah weres my hug then?
I switched to prototype 1.6 so I could submit forms by Ajax and was getting errors on unloading the page, so I commented out //Event.observe(window, ‘unload’, Event.unloadCache, false); (previous posts mention this is already handled by prototype anyway) and it seems to work just fine.
Thank you!
Nice tool, but I couldn’t use it for my needs :(
Hi, Could anyone please help me with the following problem. I would like to use the lightbox2 script but the images on my website are structured different than the lightbox2 script requires - big images and thumbnails are in different folders. The folders are named something like “/photos/small/†and “/photos/big/â€. How should I modify the script to be able to use it for my needs? Any suggestions on this would be appreciated. Thank you.
Everyone needs a hug! =)
I am having trouble getting this to work on my wedding photography website. For some reason, it does not work very well with IE7. My picture loads the black opacity except that it only covers 60% of the website. If anyone has a solution, please respond!
Does anyone know how you get it to load from an iframe inside the master page. When I try it, it just loads as a normal page inside the iframe
You (Particletree) should remove that “FORM.HTML” example since it is deceptive.
All that example really is, is a LINK to another page that LOOKS like a form. I just spent over 6 hours trying to get a form in a Lightbox to display an error message within the original Lightbox and I see here that people have been asking about this same issue for OVER A YEAR with no response or solution. If you can’t fix the issue or offer a solution, then you should remove that example.
Hugs for all :-)
MyProblem: I have a list of lb0n links which are all updated from a form submitted from the lightbox window through Ajax.Updater(‘changeme’,’mylink.php’); after the first call of Ajax.Updater the links are broken and no longer spawn a lightbox. Is there an easy way to update the now changed lb0n links so that they will open lightboxes again?
I read this: http://www.dynamicdrive.com/forums/showthread.php?t=17426 but didnt really get it :-(
Cheers & hugs
Yes, I did it. Thank you very much man. This is what I am looking out for while it is very crucial for my project.
Lots of hugs! Reddy
Hi, I have a problem, How can I make this is MOVABLE!
Can anybody help me out pleaseeeeeeeeeeeeeeeee!
Cheers, Reddy
Hi, I have a problem, How can I make this is MOVABLE!
Can anybody help me out pleaseeeeeeeeeeeeeeeee!
Cheers, Reddy
hey guys
very nice work! thx for the great documentation.
cheers
Would be a much more useful script if there was any sort of support to the problems people seem to be having. I’ll stick with Lightbox 2 which works perfectly for most things
YL8ztg hi nice site thx http://peace.com
very nice work
this is a test
Why in the world do you load the lightbox with a POST request? It doesn’t make any sense.
Hi There, How would I get a link that is shown in a lightbox to go to a page that is outside the lightbox? (eg. not to another lightbox, close the box and redirect to a different page).
I think lightbox is a great step forward however while I have loaded the scripts and can get the original text file to display when I create a new html file and link to it I get url not found on the server/path…the message is within the lightbox. I can see no reason for this. Can anyone help please?
really nice explanation and good demos
Happy Birthday LGW. You’re 2 years old as of today. While the original script works fine with what I need, is there any chance that this script will be updated with new features? I’ll buy a round of beers if it helps… Thanks.
Am I crazy, or does this script not work in prototype 1.8? At least, it’s not working for me =(
how do i add a tooltip on a lightbox and the tooltip has links.
126 POST to GET
This is a really nice script. Love how it works so easily.
How can I display the next and previous links all the time? I do not want the mouse over to display the link. It should be there always. Can any one help me?
How to get lightbox to work with flash?
Open a new html page which contains a iframe into the div, and from there load the content from url parameter. Like: link in a site with lbon class: http://www.somesite/video_loader.php?video=somevideo.htm
It helped for me!
I tried uploading the demo to my server 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.â€? http://www.tria4.com
NICE!! Thank You
Everyone needs a hug.!!
A hug for everybody! nice work!! thanks
Nice script! We’re using it to display device support information for a mobile software product - http://www.iswirl.com. Thanks for your efforts!
hugs for everybody!
great plugin!! I cant live without it
congratulations! nice work
For a crude method of auto-resizing, replace the following line in processInfo:
new Insertion.Before($('lbLoadMessage'), info);With:
$('lightbox').innerHTML = info; $( 'lightbox' ).style.height = ( $( 'lbContent' ).getHeight() + 16 ) + "px"; $( 'lightbox' ).style.marginTop = ( ( $( 'lbContent' ).getHeight() / 2 ) * -1 ) + "px";Tested in IE6 and Firefox 2.0.0.11
Can someone tell me what i have to do, if i want to use a direct Javascript call via onClick=”…” instead of class=”lbOn”?
Nice work
Thank you
Question - Is it possible to display a datagrid in an overlay and delete items from the grid? I know how to display images and static text - but can the overlay handle more complex pages that require code behind? If so, how would one go about implementing it?
Everyone needs a hug.
Any plans on making the “lightbox” close when pressing escape? or adding an image at the bottom right, top left etc with a X ?
How do you make the light box open with a button using javascript instead of a href link?
Hello, i have question. In main_index open first lightbox window. From this lightbox I need open next lightbox.
this open new ligtbox correctly
echo “[detail]”;
when change [detail] to img
echo “”;
lightbox show blank page. I need show link as image not as text.
Any ideas?
“[detail]”;
“”;
[detail]”
“
When using lightbox in IE7, all is well except that the Previous and Next images don’t appear or work. Even hovering over the area won’t allow me to click. The Close image in the lower right shows up as a red x, but if I click on it, it indeed closes. So in a gallery of images, I have to click on one, close, click on the next, close, and so on. In Firefox, the Previous and Next images appear and work fine, but the Close image doesn’t appear or work at all. Weird. To see this in action go to http://www.chriswilsondesign.com/html/PortAds.html
Can anyone help me?
The inset doesn’t work for me any suggestion.When I perfform the insert I got a black screen.
Buenisimo voy a intentar implementarlo en el blog
HELP
i use this to show a product detail.
The lightbox shows DOUBLE page….
example: -main page with thumbnail of A-B-C-D -detail page with informational product of A-B-C-D
the problem: -i click the link [thumbnail A] on main page. it shows [detail A] -i click [Close] on [detail A] and return to main page
-i click the link [thumbnail C] on main page. it shows [detail A] AND [detail C] <== what am i doin’ wrong??
Well, i read the comments again, and i found event.stopObserving to fix the problem [comment by Shakeeb Rahman]. but…. how can i do that? where do i put the code?
This is awesome… Thanks for the info. Planning of integrating this on my website.
Is there a way to make the page reload on the actual page (parent), once I’ve click on the submit button? Much appreciated for your help.
Prototype 1.6 has deprecated the Insertion class. To correct for this, I’ve changed line 134 of the lightbox.js to read
“Element.insert($(‘lbLoadMessage’), {before: info})”
It works for me.
Thanks very much. Nice and simple.
I use button to call js function that pops a new lightbox as per code below function email_contact() { lb = document.createElement(“a”); lb.href = “/notification/email_contact/?id=1”; pop = new lightbox(lb); pop.activate(); }
I have a page where I dynamically load in a div via ajax, and that div contains lightbox links that need to be activated. So, I created this:
// add new lightbox activator links. function addLightboxesByDiv(div_id) { lbox = $(div_id).getElementsByClassName(‘lbOn’); for(i = 0; i < lbox.length; i++) { valid = new lightbox(lbox[i]); } }
Whenever content in the div is loaded, a function call is made to this function, and lightbox links are activated.
Might be something good to add to the distribution?
[Is there a way to make the page reload on the actual page (parent), once I’ve click on the submit button? Much appreciated for your help.]
Arlan…here is what I did. You can add this statement in the lightbox.js to the end of the deactivate section: location.reload(); I actually made a new function called DeactivateReload because not all of mt close buttons need to reload the page. Hope that helps!
Thank you !
http://www.simpletroc.com/
.
Hi. Any plans to make it work with prototype version >= 1.5 (right now ie7 fails if using any prototype version subsequent to 1.5)
Everyone needs a hug. That’s really good tutorial! Many thanks for this prototype!
Your comment listing is confusing. Good design gone bad.
Lon to display with all theses comments
Good article, thank You
How Did You Made This Really Cool Comment Design?
I was able to combine a hover thumbnail effect from here: http://dynamicdrive.com/dynamicindex4/thumbnail2.htm with the lightbox here using an iframe for the thumbnail effect. It wouldn’t seem to work otherwise.
See demo here: Travel 2 Wealth on opportunity page.
I want to see which colour my comment will be
Can anyone please tell me how to send form data from one lightbox and manipulate/display it in another using the recommended rel=”insert” attribute? The question is asked here many times but I can’t see an answer. And even the demo doesn’t actually do anything with the form data, it just loads an image when you click the submit button.
ie. Submit or. Submit
Whoops, sorry
ie. <a href=”somescript.php” class=”lbAction” rel=”insert”><button>Submit</button></a> or. <a href=”form.submit()” class=”lbAction” rel=”insert”><button>Submit</button></a>
Everyone needs a hug. How to pass variable to SWF - using lightbox script you can easily add variables to swf~!
Those who are having a problem popping the lightbox over top of the entire master document using a link that’s inside an iframe..
Change the following line of code at the bottom of the lightbox.js script:
bod = top.document.getElementsByTagName(‘body’)[0];
To:
bod = top.document.getElementsByTagName(‘body’)[0];
For me, this caused the lightbox to have a 100% height and width property - not sure why as the CSS is included globally across all pages in the site so would have been included in the IFrame and the master document where the IFrame is nested.
In any case, to fix this I simply added a couple of lines..
lb.style.height = “50%” lb.style.width = “50%”;
Hope this helps those who are having a problem with it. It certainly annoyed me ;)
As a foot note: thanks for the script guys! :)
Everyone needs a hug.
Everyone needs a hug.
Everyone needs a hug….especially me.
I’m trying to place a javaScript generated Quicktime movie into my lightbox, the HTML file containing the quicktime script works fine, but when i i load it using the lightbox the only thing that shows up is the CLOSE button.
I tried the initLightbox(); function someone mentioned above (since maybe the JS quicktime objects havent yet been generated.. And nothing.
Ex:
script language=”javascript” type=”text/javascript”> QT_WriteOBJECT(‘videos/american.mov’ , ‘320’, ‘256’, ”, ‘EnableJavaScript’, ‘True’, ‘emb#NAME’ , ‘movie1’ , ‘obj#id’ , ‘movie1’) ;
what do i have to do to make it show up in the lightbox?
Everyone needs a hug.
Check this out for lightbox implementation:
http://www.justthinkart.com/General/Portfolio_AwardWinners.aspx
Everyone needs a hug.
hi.. i placed a media player in the lightbox.. it works fine but when i close the lightbox, my page is cut off to 30% of its original size.. what’s the problem..? help me please…
I have used this quite a lot since discovering it in use on an auction site, great script. A problem I have is that in a few image pop-ups on this page: a href=”http://www.baacorsham.co.uk/yourpage27.htm” - eg the second group with the red haired painting, the larger image doesn’t fully open but adds unecessary scroll bars. I cannot work out why this is happening as the other images on this page and elsewhere on the site, appear ok. I’m viewing it in ie6/7 on a PC and safari on a mac. Anyone know the answer?
Another request for fixing the IE 7 bug. Like said before: with IE7 and the latest prototype lib, this great lightbox doesn’t work. And yes …. everyone indeed needs a hug. Here’s one from me to you.
The litghbox run without problem in Firefox but my HTML doesn’t want to load in IE7. The overlay is launched but the ligthbox doesn’t stop to load.
Are there any fixes for IE7 yet? Nathan… PinkCherry.com http://www.PinkCherry.com
How can i get the scroll bars to appear for documents loaded inside the lightbox in IE7?
I used the “overflow: auto†in the #lightbox section of the CSS. This caused the scroll bars to appear in FF, but not IE7. Curse you IE.
Figured it out. On the overflow: auto; property, you have to use the !important declaration in CSS to get this to work, so the line should look like this:
overflow: auto !important;
POST is not allowed how do i fix?
Using the tab key, one can go back to the main windows following links, scroll etc
“POST is not allowed” => there´s nothing to fix, but a simple trick: rename the file with the extension “.html” to a file with “.php” extension. Don´t ask me why, but it works. ;-)
Is there somebody who has a implemented the possibility to close the lightbox with the ESC-key?
Cool
Everyone needs a hug. No one needs a bug!
I LOVE this script, it has worked wonders. I was wondering if there was a way to click a link in the LB window and have it stay in there. I’m creating a contact form and when they click send, it goes to a new page confirming their message was sent. I’d like to keep it in that LB window.
Phil, you need a modal dialog window. An excellent implementation is at http://www.wildbit.com/labs/modalbox/. It does what you’re looking for.
Awesome script. Worked perfectly for a portion of my company intranet! can make it work with anything really… good job and thanks!
Phil I didn’t try it yet but, I think maybe using: “Linking to a Another Lightbox within a Lightbox” will do the job. (See the last part of the Kevin’s explanaition of how it works.) Your first Lightbox call your Confirmation Lightbox.
Thank you Kevin!
Very good, very cool. This page links to provide a convenient and continue to improve. Thank you!
This is really awesome. Thank you so much!
I was looking at another version of Lightbox called slimbox and I noticed that you can click on the grey background or press the esc key to close lightbox. Is there a possibility of doing that in this version and how would it be done?
how does it work with flash? Can you have a flash button call a document that has flask in it? I have been trying to get it to work with no luck.
how i can use this function in flash?
// Allow using ESC key to close lightbox
—> Add this code at the end of file
// Allow pressing ESC to close lightbox kHandler: function(event){ switch(event.keyCode) { case Event.KEY_ESC: this.deactivate(); break; case Event.KEY_UP: case Event.KEY_DOWN: case Event.KEY_PAGEDOWN: case Event.KEY_PAGEUP: case Event.KEY_HOME: case Event.KEY_END: } },—> Find :
displayLightbox: function(display){ (...) },—> Add inline :if (browser == 'Internet Explorer') Event.observe(document, 'keydown', this.kHandler.bindAsEventListener(this), false); else Event.observe(document, 'keypress', this.kHandler.bindAsEventListener(this), false);// Allow click on overlay to close lightbox
—> Find :
displayLightbox: function(display){ (...) },—> Add inline :$('overlay').onclick = this.deactivate.bindAsEventListener(this);// “element has no properties” error bug fix
—> Find :
deactivate: function(){ Element.remove($('lbContent')); (...) }—> Replace with :deactivate: function(){ if ($('lbContent')) Element.remove($('lbContent')); (...) }This is really working good in firefox, in ie 7 it blocks.
I hope you will give a support to IE
thanks for the work
Thanks for you work, you make good job.
vey good the modifications! congratulations
Great, great feature! After implementing several of the fixes and suggestions I thought I would post a few that helped me quite a bit!
To allow you to open and close the lightbox from javascript I made the following modifications.
1) I replaced the initialize function in lightbox.js with an if statement allowing it to contain a null value. This is needed to keep a direct javascript call from triggering an error. Here is the code:
2) Next I added two functions right below the checkit function in lightbox.js:
3) So now you can open/close the lightbox with the traditional code and a js call as follows:
Open w/ javascript: onClickLightbox(‘test.php?var=BED’); Open from href: Test Open Close from href: close it Close w/ javascript: closeLightbox();
This can obviously be used in the Body onLoad or any other function, event etc… It works GREAT!
Finally, I made a few other tweaks that proved helpful…
1) I had to disable the overflow calls in lightbox.js to keep IE form shifting on open and creating some strange scrolling errors in IE(6,7&8). I did this by commenting out //bod.style.overflow = overflow; and //htm.style.overflow = overflow; in the prepareIE function.
2) I also removed the width and height from the lightbox class in lightbox.css to allow for me to control the width and height. The centering of custom heights and widths needs some js code if u want it to be dynamic. I believe someone posted it above.
3) Finally, I commented out the last class lightbox.done in lightbox.css to keep it from doing strange things with images in the lightbox.
Cheers for the modifications!
the ‘insert’ does not seem to be working correctly for me. It always tells me that the file could not be found.
I have replaced my dynamic links with a simple link to google.com and it still tells me that the file could not be found. While when I just drag (or copy) the link, it works just fine.
What am I missing?
Thanks Higinio.
That helped BIG TIME!!!
Muchos Gracias
Hi Higinio,
I have changed the code as per the changes mentioned by you. It works in IE but not in Mozilla Firefox. I have traced it but could not find any problem. Can anyone help?
Thanks
Everyone needs a hug.
Dude… Higinio… I’ve come at the right time. It seems like everyone has asking for this feature for like 2 years.
What is the deal with the terrible support?
it seems that you cannot have links to videos, for example, that are located in another directory? I can have the css files and js files in a different directory (I keep a clean directory structure that has a directory name “inc” and I put all things like js files and css files). So, I have to have the movie floating in the directory as the file that calls it? I cannot put all my videos in say “videos” directory. if I do, it will not work. if I move the movie into the directory that the page is in that calls this lighbox code, it works… what’s up with that? why would the movie have to be in the directory as they file that uses the lightbox code? even if you change the link to point to the video, it will not find it until you move it.
its really a nice script. Great work!!!!!!
How to execute Lightbox Gone Wild from Flash.
In Flash use: getURL(“javascript:myfunction();”);
Included this in the <head> of your HTML page:
function myfunction() { addLightboxMarkup(); mylightbox = new lightbox(‘filename.html’); }
Within ‘lightbox.js’ comment out (by adding ‘//’ at the start of each line) line numbers: 67 68 69 72 179 - 185
Images within the external page that gets loaded into the Lightbox overlay are resized to the full width of the overlay, even though I specified . I noticed a past comment that suggested using CSS style-based dimensions as opposed to the HTML tag attributes width/height. Is there any way to make this work with the tag attributes as opposed to the style attribute???
Hey Guys,
I can download the code in a zip folder, but can’t extract it properly. Any ideas?Hot
ugh. i hate browser hackery… man, Leightbox is a mess! I needed to hack it extensively to add functionality required by a client, and I’m grateful for the community here for ideas. I finally got the following working:
1) activating a lightbox using a regular onclick=”functionName(‘lightboxName’)” only, without the class=”lbOn” rel=”lightboxName” tags. This solves a host of problems and just makes the target a normal link, and allows activation of lightbox divs from Flash.
2) creating multi-popups. ie, a popup that opens another popup. I added 2 functions: boxActivate(‘currentBoxName’), and boxDeActivate(‘newLightbox’). Building on the functionality I achieved in 1) above, I was now deactivate the current lightbox and activate a new one using just a javascript call in the URL, using an onclick.
3) creating a way for Javascript/PHP to trigger a popup on onLoad. After a few days struggling with it, I finally solved it tonight/this morning. Now I can make a page popup any lightbox after loading.
I’ll post the files to my site if there’s enough interest. This message board is getting out of hand and causes code display problems and CSS issues.
Did anyone work out how to pass a query to the lightbox? I am using ASP and the standard lightbox (not Ajax). My link in my page is:
<a href=”details.asp?detailID=” rel=”lightbox2” class=”lbOn”>Link Name
but when i click on this it does not pass the detailID to the light box.
Everyone needs a hug. a
Everyone needs a hug. how i can use this function in flash? how does it work with flash? Can you have a flash button call a document that has flask in it? I have been trying to get it to work with no luck. Thanks :)
Everyone needs a hug.
I don’t know if any of you noticed but the article is 2 years old and some of the scripts written up there have either been modified or replaced. In addition to the fact that lightbox now offers a lot of new features.
Great script guys. Ronny, yes, but does Lightbox 2 allow HTML content? Thickbox is based on JQuery but most of us are probably here because we need something built on Prototype. zi, I would say post anything you got! - I’m working on passing vars to the lightbox itself and will post when I’ve figured it out.
Hi all, when i tried to view index.html page on my localhost, its showing black(not blank) page.. please help me..
Trying to get the LightBox to load centred, can’t seem to find anything that changes this
Mentalyptic,
It’s the css. inside lightbox.css, there’s an id called #lightbox. inside that has the position values (which is set to 50%, making it centered) But then in order to make it centered from the middle, not the edges, you need to take half the width, and half the height and add that into the margins as a negative value.
If your box was 500px wide, and 300px tall, you’d have a margin of
margin: -150px 0 0 -250px;
@MentalyptiC
to center your lightbox divs, define it in your CSS: example:
myDiv {
}
this centers the div horizontally. take whatever width your div is, divide by 2, and use this as your margin-left. ‘left 50%’ pushes your box to the right, so the left edge of the box is at the halfway mark of the window. using a negative margin that is half the width of the div pushes it back into the exact center.
vertical centering probably works the same w/ top: 50% and margin-top: -250px.
It seems that normal ajax calls from content inside a lightbox would need access to the calling lightbox object to do anything to the object. This is confusing since there’s really only a single lightbox container. Methods activating or deactivating the lightbox need to be static methods that could be called from any ajax response.
Here’s a revision of the lightbox.js code that separates the static from non-static methods:
http://williambarry.net/js/lightbox.js
Hope this helps someone.
Great job. I’ve created my own adaptation and used it in WordPress to display videos.
I dont like it because it mess around with the first lightbox system. Is there away to make both work on the same page?
This Lightbox simple help world wide web developer.It really fine and very much usefull.
how can i use close.gif button
Everyone needs a hug.
how can i use close.gif button?
Hi everyone! I saw some guys here asking about form validation in lightbox. I found today next link: http://tetlaw.id.au/view/javascript/really-easy-field-validation Maybe it will helpful (this use also prototype.js) I never test it together with lightbox.
@kidy, GTFO, you spamming @#%$!
@hip london and Gimble: I made some modifications to the lightbox.js which will allow any link to just call a javascript function to activate and deactivate a box. You can have a lightbox popup that contains a link to another lightbox. The link closes the current lightbox and opens the next one.
example:
link text
in AS3, this can be accomplished by:
ExternalInterface.call(“boxDeactivate”, “Name_of_current_box”); ExternalInterface.call(“boxActivate”, “Name_of_SecondBox”);
put this within your event listener function.
I also made it possible for you to have a lightbox pop up instantly on the page onLoad, by setting a Javascript variable:
The code is at: http://www.sugarcloud.com/code/lightbox.js just grab the whole thing to avoid any complications. I also made some fixes to IE that the original code didn’t have.
sorry i can’t give any examples yet. The site i’m working on isn’t launched yet.
eff… the site screwed the pooch on my HTML. i meant to say, for the example, that the link would be like this:
a href=”#” onclick=”boxDeactivate(‘div of box to kill’); boxActivate(‘new box to open’)”;
obviously, replace the 2 names with the actual IDs of your lightbox.
@mert, you can use my code for your close button— the boxDeactivate function.
all the new functions I added are at the bottom of the lightbox.js code I uploaded to my server.
popup calender
popup calender for php
hey! how does it come that i can’t set the width of some table-elements.
stuff like :
…
doestn’t work in the lightbox
HElo good work!!!!! Another request for fixing the IE 7 bug. Like said before: with IE7 and the latest prototype lib, this great lightbox doesn’t work. And yes …. everyone indeed needs a hug. Here’s one from me to you. It’s really a nice script. Great work!!!!!!
how can i put this javascript into the lightbox
Bild = new Image(); Bild.src = “.gif”; var loop = 0, hoch = 2; /Die Höhe des Bildes auf dem anderen Server/ function Servertest() { if(Bild.height == hoch) document.write(“Server ist online…”); else if (loop>hoch) {loop—; window.setTimeout(“Servertest()”,1000);} else document.write(“Server ist nicht online…”); } Servertest();
How can I reload the document that opened the lightbox?
Well, this is neat an beatifull, this automatize everything easilly.
But after testing it an fighting with it for a long time (read all the problems people have), is it really worth using it ?
Eventually I came back to something very similar, easier with no side-effects : regular dom scripting. (but offcourse no ajax ;-)
Hi, Why it doesnt work in blogger pages? I need to call an html from another location inside lightwindow but the lightwindow doesnt load the html Thanks
Everyone needs a hug. I love you all.
This is a great script. Thanks for making it available!!!
I had one issue… It was more on my coding side probably cause I am not so fluent with the functionality of Javascript. But I wanted to make mention of it for the folks on here if they run into the same issue. I tried reading through just about all the comments to see if anyone made mention but i didnt see this:
The javascript worked EVERYWHERE I tested it. Locally, on 2 different servers, on different machines and in every browser(mac/PC). BUT when I uploaded to the actual server where the site was being hosted it gave me a “Method Not Allowed. The requested method POST is not allowed for the URL /background.html.” and it didnt pull the HTML file. Apparently it has to do with using the word “post” in the javascript files. In this case, it was due to some nature of the server not understanding the call. SO i changed “post” to “get” as advised by a friend of mine and everything works now!!!
Everyone needs a hug. Well, this is neat an beatifull, this automatize everything easilly. really great article, I like you’re site I think is wonderfull!!!!! THX
How would I submit a form that is shown in a lightbox to the page that opened it ?
How would I submit a form that is shown in a lightbox to the page that opened it ?
Please Help
Is there any way to turn on the scroll bar in IE? The content I’m loading is longer than the viewable area and IE is not letting me scroll down.
Everyone needs a hug.
I have the same question as Matt about turning on the scroll bars. Though I did the commenting above in the .js but now I have to scroll bars. ;) One that controls the z-index below and one that controls the window. Ideas?
sorry to be a dumbass but I can’t get another html file to load in the lightbox when a link is clicked, have noted that some people recommend changing the ‘post’ command with a ‘get’.
is this relevant to opening another link in the lightbox?
I have implemented Lightbox in this mockup (http://www.aheram.net/photos/) of my photography website. In IE 7, when you activate lightbox, the page in the background scrolls to the very beginning (left), whereas in Firefox and Safari it stays put. This is unacceptable behavior from IE7.
I need the page to stay where it is at so that when the user exits the Lightbox, he will be right back where he started. This discrepancy in behavior between the browsers is quite upsetting. :(
Anyone know a fix for this?
To check it out, click “Featured” then click “War and Peace” and then exit the lightbox by clicking “Return to Featured Photography Index”.
Hi. I am back. I have been looking through the Lightbox script and it seems that in IE, there is not a function to make it remember its xpos (which I need). Anyone know how to implement that?
Wow. I actually figured it out. I am like a total Javascript newbie, too.
Anyway, I was looking at the lightbox.js and for the IE part of the code, there is not a snippet in the code to get what the page’s current X-position.
Just add this:
if (self.pageXOffset) { this.xPos = self.pageXOffset; } else if (document.documentElement && document.documentElement.scrollLeft){ this.xPos = document.documentElement.scrollLeft; } else if (document.body) { this.xPos = document.body.scrollLeft; }After this:
if (self.pageYOffset) { this.yPos = self.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop){ this.yPos = document.documentElement.scrollTop; } else if (document.body) { this.yPos = document.body.scrollTop; }And replace this:
if (browser == "Internet Explorer"){ this.setScroll(0,this.yPos); this.prepareIE("auto", "auto"); this.hideSelects("visible"); }With this:
if (browser == "Internet Explorer"){ this.setScroll(this.xPos,this.yPos); this.prepareIE("auto", "auto"); this.hideSelects("visible"); }Now, you can implement Lightbox Gone Wild with Horizontal Way websites.
Does anyone know if there is a reliable way to print the content from Lightbox (not the underlying page)? Essentially, it would contain text and an image. I’d greatly appreciate links to examples if anyone has ‘em.
Thanks
I need the lightbox to load automatically when users go to my webpage, means as soon as they load my webpage, what they will see a a lightbox, with a small html page (prompting to choose preferred language).
How can I modify it such that lightbox is activated upon opening the webpage?
Hi. i have this problem: when i click on the close lightbox link, the lightbox dessapear but, in my mainsite appears another set of scrolling bars what am i doing wrong? and yea, Everyone needs a hugh.
This JUST SUCKS. You pretend the ability to submit forms thru the Lightbox, however, all the form example does is change the content with a form into one with content of an image. It does absolutely NOT submit the form info, therefor it cannot be retrieved in the next ‘page’ that opened in the lightbox and all of the data in the form is lost. Another 2 hours wasted!
Nice job :) Will be using this shortly ….
.aspx page can open in lightbox or not???
Everyone needs a pug.
Everyone needs a dump.
Ok. I’m trying to make lighbox open similarly to the way Netflix opens a popup when you add a movie to your queue. I need the popsUp to open in relation the user’s placement on the page but it isn’t just position:fixed because it still uses the main page’s scrollbar when it’s taller than the window height.
Help?
has anyone gotten this error ‘could not complete the operation due to the error c00ce514’
ive basically just installed lb and trying to run the form page and i get this error the error occurs on initialize @ this line this.responseText=String.interpret(transport.responseText);
ok more info as it turns out i cant get the simple demo to work when im running ie7 it works great on ff tho
this is the error i get on ie7: ‘handler’ is null or not an object
has this happend to anyone else anyone have any ideas? thanks toy
Nels i have this working on alot of sites using it to submit form data from one LB window to another so yes it does work trying not complaining so much and figure out what YOU are doing wrong
how to work light box in different version of a same website
Great script. When lightbox is opened i still see flash components on my site which aren’t fade out.
This has been really useful for loading extra content into google maps. You can add the initalize() function onto google maps infowindowopen() event, to add extra information outside of the marker windows.
By calling initalize() you can use this with divs loaded in through ajax etc
Dan http://www.swansoninternet.com
I’m trying to stick a form inside the box. It’s fine when I open it in a browser, but when I put it up live on the web I always get this error message : “Method Not Allowed The requested method POST is not allowed for the URL /doc/dig/formours.html.”
Any ideas??? Thanks.
So where do you change the email address for the form?
I am not able to submit the form using the lightbox. When I Click the submit button in the example the form values are not submitting, since the button tag is wrapped inside the Anchor tag, it is just taking to new page. How do we get the form values, any ideas?
car microsoft glass deliver sea yahoo site bag night canada
If i rename the js and css files, will the affect anything; as long as my links to them are appropriately changed? Because this isn’t working for me at all. Which is unfortunately since the original Lightbox was a piece of cake.
While the code runs out of the box (leslie, it does :) it has some serious problems. It creates tons of global objects, insert doesn’t seem to work, it features an arcane browser detection script, which is not needed as Prototype brings something along already. I would like to send my patch, that fixes all that, to the OP, however, I seem unable to find Chris’ email address.
hello world..
i see no problem with it.. maybe..
[i][u][b]fee Youtube, google-yahoo video player[/b][/u][/i] [b][i]particletree.com recommends - Copy&past in browser:[/i] http://youtubeplayer.byethost9.com/you tube player.zip [/b]
thanks!
I’ve been using lightbox 2 for my images on my blog for some time. I like this redo of it, and i’m able to use it for a login box on my dev site. I haven’t tried yet (for fear of causing a problem), but can I use the wordpress Lighbox plugin with this technique concurrently? Is there a way for me to just use this one instead and combine the functionality?
If there’s anybody like me who would like to close the lighbox by clicking on the overlay just add this code after line 193 overlay.rel = ‘deactivate’; overlay.className = ‘lbAction’;
I’m trying Nathan’s technique to launch from a swf, but it doesn’t seem to be working. I’m wondering if it’s the lines he says to comment out, as some of them seem worryingly random. Has the script been updated in the past few months so things have shifted around? If so, does anyone know what number those lines are now? Really banging my head against the wall on this one.
P.S. Everyone needs a hug. I know I do.
Very interesting article, so many useful tips!Great presentation. I really like the crafts parallel, as I present quite similar views and attitiude towards web desing.thanks for good site :)
Update: Sorry to say, I gave up and ended up using LightWindow instead. Out of the box, it’s launchable with javascript call.
HI
This is probably really simple and i cant see the wood for the trees but….
When i click a link inside my working lightbox displayed html page i get a “blank” lightbox page and no second html page.
Any suggestions would be helpfull here as i think this version is the answer to my problems.
Thank You very much by thiyagu
didn’t have time to look at others comments, but some of this code could go to be updated to the newest version of prototype
hi ! this nice worked for text ~ but i have any images link to show . worked - loading - show text images :( not show really images ! show source images to text ! how to fix this bug ?
Hi i’m a matthew fedak a web developer in uk, does the html from submit enquiry bit have built in form validation by any chance?
Hi. Your improved Lightobx is an awesome script. I’m using it now.
I’m sure you get enough questions about usage and extension of your scripts, but there’s no harm in asking. :)
I want to be able to close the lightbox by clicking on the background page behind the lightbox (despite it being modal).
i.e.: the equivalent of: <body id=”myLightBoxPopup” onblur=”deactivate”>
or, alternately: <body id=”myParentPageThatCONTAINSaLightBox” onfocus=”myLightBox.deactivate”>
I see how I can do it using an <a rel=”deactivate”> link, but not otherwise.
Thanks for any help you can provide.
Valentin’s comment fixed my problem: right after: overlay.id = ‘overlay’; add: overlay.rel = ‘deactivate’; overlay.className = ‘lbAction’;
Thanks!
Now I’ve got another problem: Want to open it on onclick of a radio button. Tried Higinio’s onClickLightbox(url).
It does not work, even simplistically, like this: Open!
Error”href’ is null or not an object’ initialize: function(ctrl) { this.content = ctrl.href;
Gotta love it! :-)
Hi guys cheers for providing this it has been much usefull!
Just a quick qestion about Linking to a Another Lightbox within a Lightbox, it doesnt seem to be working at the mo!? when i click on a text link within the lighbox with which this Go to Another Lightbox obviously containing the correct page it just opens up another blank page without any info!
can anyone help ?
Great looking lightbox. I am hoping to use it for a form, and have added some simple javascript validation to make sure the user puts in some info. However if the user leaves something blank and the script “returns” so that it doesn’t keep going through with it, it closes the lightbox. How can I keep the lightbox open while running other scripts?
Thanks.
Very Cool Script !
Thank you very much
Everyone needs a hug.
This is my modified working version which closes on escape key or clicking in the shaded area, also the height, width, and placement can be sent when its called. It doesnt have to be on an image tag. I did rip out any of the animation. useage: put this on anything that accepts onclick events… should work. onclick=”onClickLightbox(‘index.htm’,’240’,’350’,’50%’,’50%’);”
lightbox.js:
/http://particletree.com/features/lightbox-gone-wild/ var detect = navigator.userAgent.toLowerCase(); var OS,browser,version,total,thestring,lbh,lbw,lbtop,lbleft;
function getBrowserInfo() { if (checkIt(‘konqueror’)) { browser = “Konqueror”; OS = “Linux”; } else if (checkIt(‘safari’)) browser = “Safari” else if (checkIt(‘omniweb’)) browser = “OmniWeb” else if (checkIt(‘opera’)) browser = “Opera” else if (checkIt(‘webtv’)) browser = “WebTV”; else if (checkIt(‘icab’)) browser = “iCab” else if (checkIt(‘msie’)) browser = “Internet Explorer” else if (!checkIt(‘compatible’)) { browser = “Netscape Navigator” version = detect.charAt(8); } else browser = “An unknown browser”;
}
function checkIt(string) { place = detect.indexOf(string) + 1; thestring = string; return place; }
function onClickLightbox(url,boxheight,boxwidth,top,left) { var popup = new lightbox(null); lbh=boxheight; lbw=boxwidth; lbtop=top; lbleft=left; popup.content = url; popup.activate();
}
function closeLightbox() { Element.remove($(‘lbContent’)); $(‘overlay’).style.display = ‘none’; $(‘lightbox’).style.display = ‘none’; }
Event.observe(window, ‘load’, initialize, false); Event.observe(window, ‘load’, getBrowserInfo, false); Event.observe(window, ‘unload’, Event.unloadCache, false);
var lightbox = Class.create();
lightbox.prototype = {
initialize: function(ctrl) { if ( ctrl != null ) { this.content = ctrl.href; Event.observe(ctrl, ‘click’, this.activate.bindAsEventListener(this), false); ctrl.onclick = function(){ $(‘lightbox’).className = “loading”; return false;}; } },
” + response.responseText + “
”; new Insertion.Before($(‘lbLoadMessage’), info) $(‘lightbox’).className = “done”; this.actions(); },
kHandler: function(event){ switch(event.keyCode) { case Event.KEY_ESC: this.deactivate(); break; case Event.KEY_UP: case Event.KEY_DOWN: case Event.KEY_PAGEDOWN: case Event.KEY_PAGEUP: case Event.KEY_HOME: case Event.KEY_END: } } }
function initialize(){ addLightboxMarkup(); lbox = document.getElementsByClassName(‘lbOn’); for(i = 0; i < lbox.length; i++) { valid = new lightbox(lbox[i]); } }
function addLightboxMarkup() { bod = document.getElementsByTagName(‘body’)[0]; overlay = document.createElement(‘div’); overlay.id = ‘overlay’; lb = document.createElement(‘div’); lb.id = ‘lightbox’; lb.className = ‘loading’; lb.innerHTML = ‘
’ + ‘
Loading
’ + ‘
’; bod.appendChild(overlay); bod.appendChild(lb); }
style:
/* lightbox */
lightbox{
background-color: transparent; text-align:left; }
lightbox[id]{
}
overlay{
}
overlay[id]{
}
lightbox.done #lbLoadMessage{
}
lightbox.done #lbContent{
}
lightbox.loading #lbContent{
}
lightbox.loading #lbLoadMessage{
}
lightbox.done img{
}
test { /http://particletree.com/features/lightbox-gone-wild/ var detect = navigator.userAgent.toLowerCase(); var OS,browser,version,total,thestring,lbh,lbw,lbtop,lbleft;
function getBrowserInfo() { if (checkIt(‘konqueror’)) { browser = “Konqueror”; OS = “Linux”; } else if (checkIt(‘safari’)) browser = “Safari” else if (checkIt(‘omniweb’)) browser = “OmniWeb” else if (checkIt(‘opera’)) browser = “Opera” else if (checkIt(‘webtv’)) browser = “WebTV”; else if (checkIt(‘icab’)) browser = “iCab” else if (checkIt(‘msie’)) browser = “Internet Explorer” else if (!checkIt(‘compatible’)) { browser = “Netscape Navigator” version = detect.charAt(8); } else browser = “An unknown browser”;
}
}
well that sucks it came out looking all f*cked up here… just view the source of this page and rip out the code in my post if you want to use what i did. What I want to do is figure out how to redirect if my session is dead. Right now if im on a page that i have the lightbox onclick events on and the session times out, normally itll just do a php header redirect and youll be on the login page. But if my session times out and i click a lightbox link it still pops up and it shows my login page with in it… and its all jacked up. I want to be able to do a redirect or a new page load or anything that will stop this behavior. If you have any ideas i’d be glad to try them. thanks.
If you are getting a “Method Post is not allowed” error using a form lightbox AND if your form is processed using a .php file, you can just change the form file from .html to .php, it will work.
For the lightbox to act as a popup box on page load, Fez’s way worked! Just by added the line:
valid.activate();
right after valid is declared (at around line 183 in lightbox.js). THANKS FEZ!
you rock!!
All i want to see is thanks!! I have been searching around. You gave a simple and beautiful (and most important, it works!!) Modal javascript pop panel solution.
Thanks a lot!
Nice work!
I needed the page “underneath” to reload on submit, I only had to add one line of code. This was around line 172. You simply need to add location.reload(true); after this.displayLightbox(“none”);
// Example of creating your own functionality once lightbox is initiated deactivate: function(foo){ Element.remove($('lbContent'));I do not know of an easy way to redirect the url underneath, just simply refresh.
Very useful script. And thanks for explaining it how exactly it works.
Can someone tell me what the code is for submitting a form witihin the same lightbox? So that it refreshes and loads a different page with the $_POST data.
This is one amazing piece of work…. thanks!
How do I put a vertical scrolling marquee inside a lightbox image?
excellent post I have tried the methods. the visitors reacted very well at it keep up your good work
tnx for givin such beautiful tool
i have a doubt
can we display the details of that perticuler image
if Yes please send me the code for that
Can anyone suggest , how to put (make visible) scrollbar on lightbox opened window (html page).
Thanks
Thanx for explanation. Now I now how to overlay links at my Money Makers Portal blog!
Well done! Today was the first time I had to use something like this and I’m very happy I found your solution - It’s the best all around the wide web. Thanks a lot! Be happy in new year!
Everyone needs a hug. …and massages!!
but rightnow I need help to work this lightbox for box-text.. in a page, with in file.JS elements and into movie.swf doesn’t it work!! my problem: - i think doesn’t find the CLASS for element [the link] [every url are OK] - the lightbox goes DOWN and the movie.swf STAY UP OVER [and i don’t know why!!!]
someone can help me? thanks :)
Nice work. Used on http://hotretech.com/plug-ins/wordpress-idx-search-integration-plugin - would anyone consider helping me write a WordPress Plug-in utilizing this information?
Hi there,
Have anyone successfully been able to get the flash not to be on top of the Lightbox container? Tried out the tip in the top of this page, but with no sucess.
Can anybody help me with this, since this is a rather urgent issue that i really need to solve for a customer..
Thanks,
Thanks alot, this foot the bill nicely. Will make use of this in my next website implementation.
very bav presentation
This link works as I want too, very simple to close the lightbox: Cancel
How do I accomplish this with an asp.net button?
Jay, about flash appearing on top… select boxes have the same problem but it is handled in lightbox.js. there are 2 solutions: 1. modify hideSelect() in lightbox.js and make a similar hideFlash() 2. you can position an empty iframe under the lightbox but on top of everything else (choose z-index carefully). iframe is rendered specially, it would also be on top of select boxes and you dont need hideSelect() or hideFlash()
Pretty good. I actually just found this, and I’m already loving it. Can’t wait to try it out on this new project I’m working on. I hope the bugs have been fixed though.
Great Job.
Thanks alot! Looks and work awesome!
This script is absolutely amazing, however I have one issue in IE. So I implemented this on my website at http://www.dreamerinme.com. It works awesome on Firefox, but if you load it in Explorer (I tried IE 7), if you load a form such as search or submit, and then you try to search for someone it just clears the lightbox, keeps it up top and does not redirect to the correct page. It works fine in firefox. Does anyone know how to fix this?
Great Stuff. Simple and easy to use.
It works perfectly on my test server, but on the live server, the loading message displays forever. Anyone have similar experience?
Is there a way to submit a form so that the page reloads within the lightbox? Alternatively, has anyone been able to submit using AJAX
perfect tool, except one thing, absolutely unknown how to call lbox from direct javascript function. after long wasting of time, found [Higinio] modifications posted above, that helps very nicely.
I have fixed the IE issue where when you hit submit on a form it doesn’t go to the desired page. Just in case anyone else makes the same mistake. Where you have the submit button, you have the code:
You don’t need the rel = “insert”, just get rid of that and it should work.
Does anyone know how to prevent links from being clicked until the page fully loads? I’m having issues that if the page isn’t fully loaded, if you click on a link it shows up on a different page with no formatting instead of in the lightbox. Any suggestions?
Very neat and useful modification, but did you really need to use that image in your demo??? It burned my retinas and there is nothing you can do to erase the 1.24 seconds from my memory before I blinked and hit the little ‘X’.
I need to submit a form, and I need the action of that form to display in a lightbox. Am I missing something really simple here? Thanks.
James, did you try messing around with the rel = “insert” attribute?
Yes. I’ve messed around with it in the form tag, the input tag, the submit. I’ve even tried a text link using javascript to submit the form. including the rel tag, excluding the rel. nothing. I have less hair now than i did at the beginning of the day. a few that I tried are…
<
form action="verifyEmail.asp" class="lbAction" rel="insert" method="post" name="recover" id="recover">
<
form action="verifyEmail.asp" class="lbAction" method="post" name="recover" id="recover"> Fucking hellI even came across a post somewhere that said to place it inside a span, which i tried. No dice.
wow, that was a mess. we’ll try that again.
Yes. I’ve messed around with it in the form tag, the input tag, the submit. I’ve even tried a text link using javascript to submit the form. including the rel tag, excluding the rel. nothing. I have less hair now than i did at the beginning of the day. a few that I tried are…
I even came across a post somewhere that said to place it inside a span, which i tried. No dice.
http://finebabes.net/lightbox.js is where my variant/hack of this fine script is at… tho it’s not used on that site.
I modified it to close on escape key or when clicking in the shaded area, also the height, width, and placement can be sent when its called. It doesnt have to be on an image tag, that part was a pain putting a class on it and it would interfere if i wanted a different class instead of lightbox, so i got rid of that. I ripped out things i didnt need like the animation.
Useage: put this on anything that accepts events, like onclick etc.. example: onclick=”onClickLightbox(‘index.htm’,’240’,’350’,’50%’,’50%’);”
Also modified so you can set the positioning and height and width when calling it. play with the numbers and percentages… you’ll figure it out.
Any improvements on my variant would be welcome. What I’d like to see is: 1. How to redirect if my session expires.
Right now if im on a page that i have the lightbox onclick events on and the session expires, normally itll just do a php header redirect and you’ll be on the login page but on lightbox links it will pop up and my full page login screen loads within it.
I’m going to try using what Kyle mentioned above, add location.reload(true); and see how that works… maybe thats the ticket to solving my only problem.
Uhh, guys. The insert code doesnt work here :S
Everyone needs a hug.
does anyone know ho to upload files from a lightbox
Guys, i can’t insert new page with the class and rel=”insert”
Guys, i can’t insert new page with the class and rel=”insert”
Guys, i can’t insert new page with the class and rel=”insert”
How to use PHP within it? The action=”page.php” opens in the window, not in popup :(
<
form action=”register.php” class=”lbAction” name=”Register” method=”post”>
I love the script. but i do have a couple problems
i have a form validation script that loads a error field based on the location of the text box. The location works fine but the error box comes up below the lightbox . Im wondering if theres anyway to make a javascipt load on top of the lightbox
Im also having the issue that i cant receive post results after submit im posting to the same page that the script is on. My files are .php but the data just isnt there and the database doesnt get updated.
Ive read every posting here 10 times and have had no success any help would be great
P.S. Roel there is two post in this page that can help you one says find this line in the script and remove
// Example of creating your own functionality once lightbox is initiated insert: function(e){
And Replace With
// Example of creating your own functionality once lightbox is initiated insert: function(e){
This worked for me but one person had a problem in some browsers.
People use CSS2 all the time, and they even already use parts of WHATWG HTML5 (like the CANVAS element, or contentEditable). I do not believe that the W3C HTML WG will complete recommendation status by 2008; and neither do I believe that that WG shall be disbanded late 2010. Specification are usable before being finished but not before those parts are incorporated into User Agents, e.g., browsers. Safari, Mozilla and Opera (since they’re the copyright holders) may be the first to include HTML5 elements and attributes once they become stable, Right?
Everyone needs a hug Duh.
About the insert issue.
try “link=Event.findElement(e, ‘a’);” in the insert function. That was the only relibale trick for me.
hey… this is awesome. but I have a problem regarding with the button…. the Button there is link with href… What I supposed to know is how to create a submit button that can authenticate. Or it will open with other page BUT in the same manner, in light box… most likely with facebook compose message.. hehehehe
Could it be happen?
Hey guys i was using JS lib its great Thanks to Lokesh and Kevin
But I have new way to get the light box and would like to share with you all
The HTML
The JS will be ——————————————————-
and CSS will be ————————————————————
lightBox{
}
closeLightBox{
} .frame{ width:100%; height:100%; display:block; overflow:inherit; }
It works great
Karan
sdffsdfsdfsd
Can anyone tell me how to pass parameters to the new page to be opened in light box, but I need to create that href dynamically, NOT ON BODY LOAD…………….
Hello!
I have got the same problem that Jeff has had 2 years ago:
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. Any ideas?
How i can use this with jsp following problems i am getting
1 EDIT and my java script is not working…
EDIT It “s not working how i can call javascript because i want to pass some parameter to my next jsp and so wants to make link in java script
“EDIT”
It “s not working how i can call javascript because i want to pass some parameter to my next jsp and so wants to make link in java script
I am not getting anything :)
The Lightbox is great but I ran into the same problem like Kaushal.
I have to generate a url dynamically like “foo.php?x=”+document.myForm.myTextField.value
How do I get this to work? Anybody?
Hai, Developer, I have big problem with light box effect , I need to call a light box link inside the ajax response div. when i click the light box effect link, the light box effect is not comin ,it’s going to direct link.
I uploaded my problem as video reference in the following link: http://www.vidjassolutions.com/demo/document/doubt.zip
please help me to solve the issue
thanks in advance..
Hai, Again . I got solutions for my issue. inside the ajax coding we nwwd to call the “initialize();” function it is used to initialize the light box effect once again.
Thank’s to all
You need to rethink your need for Lightboxes to post data dynamically and stay modal. I accomplished this last night but the internal mechanism allowing you to post data is not very usable.
I change the action function for compatibility:
// Search through new links within the lightbox, and attach click event actions: function(){ var that = this; lbActions = $('lbContent').select('.lbAction').each(function(obj) { Event.observe(obj, 'click', that[obj.readAttribute('rel')].bindAsEventListener(that), false); }); },has this lbox version been replaced by something else? i use it on lots of stuff and would like the resizing effects shown in the original lightbox - has anyone done this?
I tried to activate lightbox with a form button rather than an anchor. The following is my trial code:
… …
And it still works. This is great for me!
Everyone needs a hug.
Great effort and wonderful article.
Hi Sir This is Really Cool May I Have Permission to used it on my projects. Thanks :)
Hi all - I keep getting ‘incorrect function’ in the lightbox window rather than the image or text that’s supposed to be displayed. It’s driving me nuts! Any ideas!?
Thanks
Hi guys, anyone got lightbox gone wild with actual scriptaculus (and obviously prototype) ?
Hi Its nice and helpful pop-up .Its working amazing on IE6.0 but not with IE 7.0.transparent background is coming perfectly but pop-up window will not visualize after display blink.
Everyone needs a hug.
how can i use your lightbox into flash as3?
Everyone needs a hug.
I tried to load a lightbox within a lightbox by using the code:
Go to Another Lightbox
why it doesn’t work on mine lightbox?? Help! Thanks!
I have tried to use “insert” to load a lightbox within a lightbox. it does not work. Can someone help? Many thanks!
Thank you very much after I read your post, Jmin. It works!
Find and remove link = Event.element(e).parentNode; replace with link = Event.element(e);
Great job !!! Tks U w
I’m also trying to use insert as directed to load a lightbox within a lightbox. It’s not working for me either. Instead of opening a full box, it just opens a thin line in the middle of the page.
Any one having problems with stack overflows in IE and using a version of prototype >= 1.6 you can cure the problem by commenting out the line: Event.observe(window, ‘unload’, Event.unloadCache, false); This is no longer required see the Prototype API
Everyone needs a hug.
Thx,this is great~
Everyone needs a hug.
thanks, nice effect, im use this on my page
Works great on FF and safai. However, on IE it is completly ignoring the styles defined in the popup window. I am using WindowY.html to show up onClick event of WindowX. any idea? sunnysak@lycos.com
Hello!!! I just started to use lightbox and I’m a html beginner!! i need to let start a lightbox window at the start of my webpage with a onLoad command!!!! But I really don’t know what to do. Is there any clear and simple example or tutorial ??? Thank a lot Francesca from ITALY
Submit problem : I have an anchor, type=”submit”, and it does a POST for me on my Mac OS X, but on our Linux server it is either doing a GET, or it is just returning to the main page.
Thanks for the great work: used the lightbox for a new website and it works great.
I did encounter a couple of issues that I eventually resolved. Posting my “solutions” here for the benefit of future users…
1) It didn’t work on my server and I just got an error message about POST not being supported. As mentioned above this is easily fixed by changing post to get in lightbox.js
2) When the lightbox is activated, the focus remains on the link, so pressing ENTER opens another lightbox. One easy fix for this is to add onfocus=”this.blur()” to the a tag in your HTML page that links to the lightbox. This makes the link lose focus as soon as it is clicked. As pointed out above the lightbox is not a true modal window and it’s still possible to TAB around the page underneath, but this was good enough for me.
3) The big tricky one was the fact that the lightbox doesn’t work until the page has loaded fully. My lightbox link is on an image heavy page so this was a deal breaker for me.
The reason that the lightbox isn’t activated until the page has loaded is because of this bit in lightbox.js: Event.observe(window, ‘load’, initialize, false); which waits for the page to load before kicking things off. I tried updating to prototype 1.6, which has a dom:loaded feature that allows you to kick off the lightbox once the page DOM has loaded instead of waiting for all the resources on the page too (change ‘load’ in that line and the one below it to ‘dom:loaded’). That worked on modern browsers but seemed to break the lightbox completely on IE6. I still need to support that on my site so this was a no go.
Instead I came up with a different solution that worked for me, as follows.
I changed the link that activates the lightbox from my-light-box-page.html to my-light-box-page.php
Up at the top of lightbox.js there is a bit of code that grabs the value of the href from the link to use in the script: “this.content = ctrl.href;” I changed this to “this.content = ctrl.href.replace(/.php/, “.html”);” so that the lightbox script now changes the php extension to html when it gets the link. This means that anyone who clicks the link before the lightbox stuff is activated just follows a normal link to a php file, while anyone who clicks after the page load gets the proper lightbox.
My real lightbox content is still my-light-box-page.html, but I then created my-light-box-page.php which is just a very small php file that contains a standard html header, a body tag with 2 divs inside it and then a php include statement inside that that includes the lightbox content from my-light-box-page.html
I then used CSS to set:
Now anyone who clicks before the page has loaded gets the PHP version. It looks almost right: the lightbox is centred, and the rest of the page has the dark opaque background. The only difference is that the page does not appear underneath it. This was good enough for me as I reckon I’m only catching a small number of users anyway and I don’t reckon they will notice. They will certainly notice much less than if they got the lightbox content on a white empty page on its own. Hey if you really wanted to you could use PHP to grab the rest of the referring page and reconstruct it dynamically on the server side in my-light-box-page.php with the lightbox stuff in the right place, but I couldn’t be bothered.
The one other thing you need to do is that your “close” link in the lightbox content has to have a link back to the referring page in the href tag as well as having rel=”deactivate”. This works seemlessly: anyone on the proper lightbox view who clicks the link closes the lightbox as per normal, while anyone on the PHP version just reloads the referring page.
One other benefit of this “solution” is that it now works even if the user has javascript disabled, which is nice.
I’m sure there is a better solution out there, but as I say, this was good enough for me…
It’s nice!
I have a problem with the main website search box when you open and close a lightbox in IE8.
Everything works in IE6,IE7 but in IE8
when I open and then close the lightbox and goto the search box field in the main site I can no longer type or click into the search box field - unless I hit the tab key which then flashes the cursor and I can start typing. Seems like the layer is invisible on close until the tab key is hit.
Also if I open a lightbox, close it and then open it again - my form fields are disabled in the lighbox - i cant click into them unles I hit the tab key, which triggers the cursor to start blinking in the form field.
Any ideas?
I have a problem with the main website search box when you open and close a lightbox in IE8.
Everything works in IE6,IE7 but in IE8
when I open and then close the lightbox and goto the search box field in the main site I can no longer type or click into the search box field - unless I hit the tab key which then flashes the cursor and I can start typing. Seems like the layer is invisible on close until the tab key is hit. Also if I open a lightbox, close it and then open it again - my form fields are disabled in the lighbox - i cant click into them unles I hit the tab key, which triggers the cursor to start blinking in the form field.
Any ideas?
In both cases refreshing the page solves the problem - so for now I refresh the page when the lightbox is closed. This is what I added to the deactivate function:
I’d like to use the lightbox script to load a form, as per your example, However…. The form has a text area and I use the tinyMCE script to turn it into a WYSIWYG editor…. When the lightbox opens the page, the javascript used for the WYSIWYG isn’t triggered, so you just get the basic HTML code…
Any ideas? Anyone done anything similar?
Thanks in advance
Jon
i seem to be missing something simple i just cant seem to figure out … i am using jquery and jquery form and ajax (to load forms and other pages). all i want is the lightbox window to popup with the loading gif on the beforeSubmit, and then dissapear on Success … i dont want to view any pictures, just the loading image in the modal window while loading. im not sure how to do this b/c im not clicking on a link … any help? thanks!
Everyone needs a hug.
Opening form results in a lightbox
Common problem i’m sure.. but i’m really struggling on how to get this working.
The form opens in a lightbox…. you hit submit… how you you make the next page open in a lightbox?
Thanks! :-)
It’s nice.
I will use it soon.
Thanks for the script. I will try it.
Ok for any newbie like me who was trying the same thing (simple loading gif in center of page) …
html (at top of main/index page):
css:
loading {
}
javascript:
function loading_show() { $("img#loading").css({ "left" : ($(window).width()/2 - $("img#loading").width()/2) + "px", "top" : ($(window).height()/2 - $("img#loading").height()/2) + "px" }); $("img#loading").show(); }well my code tags didnt work … (wish there was a preview here :)) html: (img id=”loading” src=”images/ajax-loader.gif” alt=”loading”/)
I see many comments asking about how to validated after submitting and displaying the errors in the same lightbox. I also tried to figure that out and the only way I came up with was by using an iframe. I put an iframe in the lightbox and the iframes src was the forms page and it worked great. Just make sure that the code to close the lightbox needs to be in the file that contains the iframe and not the file that contains the form! Also, the lightbox should be a little bigger than the iframe (you can set that in the lightbox CSS file)
Example:
Close
Sorry here is the Example:
I hope it helps!
Lets try the Example again
<div style=”float: right; margin: 3px 3px 0 0;”><b /> <a href=”#” class=”lbAction” rel=”deactivate”div>Close</a><b /> </div><b /> <iframe src =”contact_form.php” width=”365” height=”350” scrolling=”no” frameborder=”0”div><b /> </iframediv><b />
I found a work around for the Flash floating to the top issue. I have two buttons on my page. One is visible (normal) and one is hidden (IE) via CSS. In my IE stylesheet, I have the regular button display:none and I have the hidden button display normally. This IE-only button has a link to open a browser window. IE users don’t get to see the cool lightbox effect. But you have to figure at this point, anyone who is still using IE is used to seeing crappy looking websites.