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.

HTML Form Builder

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

Lightbox Gone Wild Demo

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.

Download the Code

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.

HTML Form Builder
Chris Campbell

Lightbox Gone Wild! by Chris Campbell

This entry was posted 5 years ago and was filed under Features.
Comments are currently closed.

· 905 Comments! ·

  1. Leszek Swirski · 5 years ago

    I’d hit it.

    (In other words, very nice)

  2. Nathan Smith · 5 years ago

    Oh no, the headlights - I’m blind!

  3. flevour · 5 years ago

    Very tasty and lovely, thanks for sharing! I subscribed to your feed yesterday and I am already loving it!

  4. johnny · 5 years ago

    Very nice work.. this is a huge improvement.

  5. John Nunemaker · 5 years ago

    Sweet. The same thing crossed my mind upon viewing lightbox but I haven’t had time to develop it. Thanks for the heavy lifting.

  6. Dave · 5 years ago

    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.

  7. Lokesh Dhakar · 5 years ago

    I love it. Your code is making mine look slopppy. Nice work!

  8. Darren Hoyt · 5 years ago

    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.

  9. Darren Hoyt · 5 years ago

    Works great!

    http://www.darrenhoyt.com/lightbox2/

  10. Sean McBride · 5 years ago

    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!

  11. Conánn · 5 years ago

    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

  12. Alain Ravet · 5 years ago

    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.

  13. David Kaneda · 5 years ago

    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?

  14. alexander sandström · 5 years ago

    This part in your code:

    “Event.observe(window, ‘unload’, Event.unloadCache, false);” (line 56)
    is not necessary. Prototype already does just that automatically (line 1554).
  15. Patrick Haney · 5 years ago

    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?

  16. Ben Brophy · 5 years ago

    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.

  17. Tristan · 5 years ago

    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?

  18. ck · 5 years ago

    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

  19. David Hemphill · 5 years ago

    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.

  20. Dan · 5 years ago

    It’s Dashboard for the web!

  21. Sumeet · 5 years ago

    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.

  22. Mike Rumble · 5 years ago

    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.

  23. Chris Campbell · 5 years ago

    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.

  24. Mark L · 5 years ago

    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.

  25. Steve Nolte · 5 years ago

    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:

    initialize: function(ctrl) {
        if (ctrl.type == 'select-one')
        {
            var self = this;
            Event.observe(ctrl, 'change', function() { self.content = $F(ctrl); self.activate(); });
        }
        else
        {
            this.content = ctrl.href;
            Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
            ctrl.onclick = function(){return false;};
        }
    },
    

    Seems to work, but do you have any thoughts or suggestions?

  26. Sumeet · 5 years ago

    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.

  27. JT · 5 years ago

    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.

  28. David · 5 years ago

    This is lovely code - well done. Great, practical examples are flooding my head already … clients, beware.

  29. Ray · 5 years ago

    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.

  30. Wayne · 5 years ago

    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…

  31. Rob Elkin · 5 years ago

    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!

  32. Greg · 5 years ago

    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?

  33. B0mBjAcK · 5 years ago

    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.

  34. Sérgio · 5 years ago

    realy nice :)

    is it possible to run it from an external page loaded to a iframe?

  35. Ryan Campbell · 5 years ago

    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 :(

  36. Minor · 5 years ago

    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.

  37. Skwid · 5 years ago

    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)

  38. Frato · 5 years ago

    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 :(

  39. austin · 5 years ago

    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?

  40. Greg-J · 5 years ago

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

  41. Shakeeb Rahman · 5 years ago

    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!

  42. austin · 5 years ago

    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

  43. Shakeeb Rahman · 5 years ago

    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

  44. Malcolm Maclean · 5 years ago

    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

  45. Ryan Campbell · 5 years ago

    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.

  46. michael · 5 years ago

    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?

  47. Scott C · 5 years ago

    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?

  48. Alex · 5 years ago

    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

  49. MrGierer · 5 years ago

    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.

  50. Flo · 5 years ago

    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?

  51. Alex · 5 years 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’

  52. Austin · 5 years ago

    you have to change the POST to GET in the lightbox.js file and it i will work fine!

  53. Minor · 5 years ago

    Flo,

    How would you pass a variable from PHP to SWF?

  54. Scott · 5 years ago

    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?

  55. Sean McBride · 5 years ago

    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.

  56. Scott · 5 years ago

    If you want to switch the focus to the lightbox add this to the displayLightBox function

    if ( display == ‘block’ ) { $(‘lightbox’).focus(); }

  57. Drache · 5 years ago

    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

  58. Miguel Benevides · 5 years ago

    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.

  59. Ryan Campbell · 5 years ago

    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.

  60. Flo · 5 years ago

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

  61. Flo · 5 years ago

    Oops, my code didn’t go through. What tags do I have to use, to get it right?

  62. Andor Olosz · 5 years ago

    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

  63. Pete · 5 years ago

    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.

  64. michael · 5 years ago

    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!

  65. Andor Olosz · 5 years ago

    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…

  66. charles · 5 years ago

    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?

  67. sull · 5 years ago

    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

  68. Anathema · 5 years ago

    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

  69. Achaiah · 5 years ago

    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!

  70. Todd · 5 years ago

    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?

  71. Michael · 5 years ago

    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?

  72. sull · 5 years ago

    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

  73. Achaiah · 5 years ago

    Quick question … does this implementation of lightbox eval() the javascript that comes back with the loaded page?

  74. Mart · 5 years ago

    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!

  75. Mart · 5 years ago

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

  76. Scottrageous Web Design · 5 years ago

    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!

  77. Waylon · 5 years ago

    For those having issues, change POST to GET, and that should clear up the problem.

  78. Mart · 5 years ago

    Excellent, works a treat now, thank you!

  79. Christian · 5 years ago

    This looks rather similar to subModal:

    http://www.subimage.com/sublog/subModal

  80. sull · 5 years ago

    submodal… i think i actually knew of that script long time ago now that you mention it.
    its nice too!

  81. Sal · 5 years ago

    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.

  82. Todd · 5 years ago

    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

  83. Kevin · 5 years ago

    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

  84. Josh Adams · 5 years ago

    Has anyone actually gotten this to work submitting a form and replacing the text in the lightbox?

  85. Jared · 5 years ago

    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

  86. Todd · 5 years ago

    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.

  87. Mike · 5 years ago

    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!

  88. Stian · 5 years ago

    Great script! Is there a way to automatically display a light box on page load? Any help is much appreciated!

  89. Mike · 5 years ago

    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.

  90. Austin · 5 years ago

    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!

  91. Wael · 5 years ago

    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 …

  92. martyn · 5 years ago

    What browsers does this work with?

    Also is there a way to make it a scrollable box?

  93. ryan · 5 years ago

    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?

  94. ryan · 5 years ago

    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…

  95. dustin · 5 years ago

    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

  96. vm · 5 years ago

    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.

  97. Joshua Brewer · 5 years ago

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

  98. davide · 5 years ago

    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?

  99. Mark · 5 years ago

    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?

  100. Just Do IT · 5 years ago

    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.

  101. Chris Campbell · 5 years ago

    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.

  102. Just Do IT · 5 years ago

    Works great Chris, thanks.

  103. Bhaal · 5 years ago

    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!

  104. proph3t · 5 years ago

    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.

  105. russ · 5 years ago

    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

  106. Marcel Fahle · 5 years ago

    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!

  107. Ryan Campbell · 5 years ago

    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.

  108. Anathema · 5 years ago

    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.

  109. proph3t · 5 years ago

    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.

  110. proph3t · 5 years ago

    Hmm got it working by adding:

    wmode=transparent

    Check it out on my site, http://www.gamegum.com

  111. Todd · 5 years ago

    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:

    window.parent.handleResponse()
    

    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.

  112. russ · 5 years ago

    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

  113. Ryan Campbell · 5 years ago

    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.

  114. mllebuffalo · 5 years ago

    i would also like to know how to use this with the onload event… any suggestions?

  115. enej · 5 years ago

    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

  116. Karsten · 5 years ago

    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 Lightbox

    Initialize() 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.

  117. leo · 5 years ago

    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 :)

  118. Tom · 5 years ago

    Lightbox sucks, SubModal rules, lightbox can’t do shit…

    http://www.subimage.com/sublog/subModal

  119. shirster · 5 years ago

    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 ! ;)

  120. Martijn · 5 years ago

    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):

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

    2. 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… ;) )

  121. Steve · 5 years ago

    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.

  122. Brandon Baunach · 5 years ago

    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

  123. Brandon Baunach · 5 years ago

    Sorry! um here’s the url to the above example: http://www.bittercyclist.com/maps/accmap.php

  124. Martijn · 5 years ago

    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?

  125. Martijn · 5 years ago

    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?

  126. Adam Crownoble · 5 years ago

    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.

  127. Steven · 5 years ago

    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.

  128. Martijn · 5 years ago

    @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:

        prepareIE: function(height, overflowx,overflowy){
                bod = document.getElementsByTagName('body')[0];
                bod.style.height = height;
                bod.style.overflowX = overflowx;
                bod.style.overflowY = overflowy;            htm = document.getElementsByTagName('html')[0];
                htm.style.height = height;
                htm.style.overflowX = overflowx; 
                htm.style.overflowY = overflowy; 
        },
    

    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)

  129. KongKnabe · 5 years ago

    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 :-)

  130. sebotroniker · 5 years ago

    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? ;)

  131. Jonathan Chum · 5 years ago

    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!

  132. Steven · 5 years ago

    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.

  133. KongKnabe · 5 years ago

    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 :-)

  134. Martijn · 5 years ago

    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”);

  135. Greg · 5 years ago

    Could anyone tell me how I would make a lightbox appear automatically when a page loads? Thanks for your help.

  136. jeff · 5 years ago

    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.

  137. Steffen Christensen · 5 years ago

    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

  138. Scott · 5 years ago

    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!

  139. Milton Hagler · 5 years ago

    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.

  140. Zach Harkey · 5 years ago

    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.

  141. didats · 5 years ago

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

  142. Gary Lund · 5 years ago

    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/

  143. Roncioso · 5 years ago

    Nice one guys! But if i want to call “lightbox” from a flash movie?!

    Thank you so much.

  144. jeff · 5 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. Has this happened to anyone else?

  145. jeff · 5 years ago

    I also need to know how to make this thing appear on a pageload event

  146. Jimmie · 5 years ago

    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

  147. raaman · 5 years ago

    U need a hug.

  148. Chris FR · 5 years ago

    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.

  149. alexx · 5 years ago

    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

  150. Kevin · 5 years ago

    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.

  151. pixeline · 5 years ago

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

  152. river · 5 years ago

    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.

  153. kayathri · 5 years ago

    I view ur side very useful and nice thankinging u .

  154. river · 5 years ago

    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?

  155. Chris Bloom · 5 years ago

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

  156. Chris Bloom · 5 years ago

    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”>

  157. Chris Bloom · 5 years ago

    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 —-

  158. Chris Bloom · 5 years ago

    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.

  159. i · 5 years ago

    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.

  160. mike · 5 years ago

    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?

  161. Lars Olesen · 5 years ago

    A nice improvement would be if the script supported both the html and pictures (without wrapping them on an html-page).

  162. SPQR · 5 years ago

    If you have problems with charset=iso-8859-XX

    Write

    AddDefaultCharset off

    in your .htaccess or in the apache configuration file.

  163. big-d · 5 years ago

    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 :).

  164. cypher · 5 years ago

    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.

  165. James · 5 years ago

    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.

  166. Fabu · 5 years ago

    strange problem here…

    this works fine: insert

    and this doesn’t work: insert (blank screen)

    :-?

  167. Fabu · 5 years ago

    O_o

  168. Fabu · 5 years ago

    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.

    :-?

  169. Richard de Nys · 5 years ago

    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’));

        var myAjax = new Ajax.Request(
              link.href,
              {method: 'post', postBody: parameterString, onComplete: this.processInfo.bindAsEventListener(this)}
        );},
    
  170. brad_k · 5 years ago

    Is there a Lightbox Gone Wild wordpress plugin available?

    Thanks

  171. brad_k · 5 years ago

    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

  172. brad_k · 5 years ago

    sigh code snippets were stripped… I placed them in code tags.

  173. GamBit · 5 years ago

    How to i open/activare the lightbox from a javascript?

  174. Greg · 5 years ago

    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!

  175. cyn · 5 years ago

    I also would like to use a POST form inside a lightbox, which posts to within the lightbox.

    Is this possible?

  176. Greg · 5 years ago

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

  177. Audun Kjelstrup · 5 years ago

    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?

  178. Budi Irawan · 5 years ago

    oh….this is very great script….

    thanks for sharing.

  179. bradleyd · 5 years ago

    embedding Yahoo! maps in Lightbox possible? When we try it shows up blank.

  180. George Gaines · 5 years ago

    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

  181. jeff · 5 years ago

    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

  182. Audun Kjelstrup · 5 years ago

    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!

  183. Tulio Faria · 5 years ago

    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

  184. Matt Langeman · 5 years ago

    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.

  185. Matt Langeman · 5 years ago

    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”

  186. jeff · 5 years ago

    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?

  187. Matt Langeman · 5 years ago

    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”

  188. Carlton Dickson · 5 years ago

    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.

  189. Ap · 5 years ago

    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

  190. Carlton Dickson · 5 years ago

    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 :-)

  191. jeff · 5 years ago

    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)

  192. Pedram · 5 years ago

    Man I had to scroll down a hundred pages just to compliment you.. I’m beat!

  193. Joseph Farhat · 5 years ago

    This tool is GREAT!

    Can it be used with Visaul Studio 2005 ASP pages?

    Thanks

  194. David · 5 years ago

    Could anyone post the code that allows this to work within iframes?

    Thank you in advance!

  195. Brandon Baunach · 5 years ago

    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

  196. Peter Vulgaris · 5 years ago

    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);

  197. Jochen Stenzel · 5 years ago

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

  198. tuxpow3r · 5 years ago

    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?

  199. Stephen · 5 years ago

    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?

  200. Vincent · 5 years ago

    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?

  201. Bill · 5 years ago

    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?

  202. Bert Casier · 5 years ago

    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.

  203. Jeff · 5 years ago

    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.

  204. P · 5 years ago

    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.

  205. Daniele · 5 years ago

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

  206. Dan P · 5 years ago

    Everyone needs a hug.

  207. Travis · 5 years ago

    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.

  208. Tristan · 5 years ago

    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?

  209. nick · 5 years ago

    everyone definitely needs a hug…

  210. Christoph Tavan · 5 years ago

    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

           link = Event.element(e).parentNode;
    

    with

           link = Event.element(e);
           if (link.nodeType != 1) {
                link = Event.element(e).parentNode;
           }
    

    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

    function(){ this.actions(); }
    

    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

    for(i = 0; i http://blog.klimpong.de/archives/2005/06/phps_in_array_f.html
    

    See everything in action at http://www.nemata.de (soon) and have fun :)

  211. Christoph Tavan · 5 years ago

    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:

    // Search through new links within the lightbox, and attach click event
    actions: function(){
    lbActions = document.getElementsByClassName('lbAction');var observerEls = new Array();
    for (var i = 0; i
    

    and the working Array.prototype.find-method:

    Array.prototype.find = function (s)
    {
    for(var i=0;i
    
  212. Marcell Kiss-Toth · 5 years ago

    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

  213. Marcell Kiss-Toth · 5 years ago

    HTML code was splitted.

    &lt;input name="login" type="submit" value="Login" onclick="javascript:post();"&gt;
    
  214. Brad · 5 years ago

    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.

  215. Flavio · 5 years ago

    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

  216. Mystech · 5 years ago

    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?

  217. Mystech · 5 years ago

    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.

  218. Marcell Kiss-Toth · 5 years ago

    Try href=”javascript:;”.

  219. Curtis · 5 years ago

    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.

  220. Mystech · 5 years ago

    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?

  221. Jaisen Mathai · 5 years ago

    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.

  222. Jaisen Mathai · 5 years ago

    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…

    #lightbox.done img{
       width:100%;
       height:100%;
    }
    

    I removed those and it worked great.

  223. Jaime Martinez · 4 years ago

    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…

  224. Jaime Martinez · 4 years ago

    Sorry html messed things up … A possible soluction to the insert action problem

    Just surround the text of the link with a SPAN

  225. ceejayoz · 4 years ago

    That worked here, Jaime… thanks!

  226. leo · 4 years ago

    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?

  227. leo · 4 years ago

    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?

  228. Lopo · 4 years ago

    Everyone needs a hug.

  229. Lopo · 4 years ago

    Of course, I meant everyone deserves a hug, eheh.

    It’s late I’m tired :)

  230. Cole · 4 years ago

    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!

  231. Cole · 4 years ago

    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.

  232. Rene · 4 years ago

    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

  233. Stanford · 4 years ago

    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.

  234. Sebastian Gräßl · 4 years ago

    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?

  235. Francis Theoret · 4 years ago

    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

  236. acedanger · 4 years ago

    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?

  237. Rob · 4 years ago

    Does this lightbox modification work with the new Lightbox 2.0?

  238. Jaisen Mathai · 4 years ago

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

  239. Rob · 4 years ago

    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.

  240. Alper Ozgur · 4 years ago

    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; } },

  241. Francis Theoret · 4 years ago

    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.

  242. Rob H · 4 years ago

    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.

  243. Jon · 4 years ago

    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

  244. Jim Amos · 4 years ago

    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!

  245. Eric Floehr · 4 years ago

    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!

  246. Marcelo Gigirey · 4 years ago

    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.

  247. John M · 4 years ago

    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.

  248. franz · 4 years ago

    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.

  249. jeremy · 4 years ago

    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?

  250. Michael Kovacs · 4 years ago

    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

  251. Fez · 4 years ago

    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.

  252. Benjamin Sterling · 4 years ago

    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.

  253. Felipe Pulido · 4 years ago

    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!

  254. Denis · 4 years ago

    Hello Benjamin,

    The HTTP 405 error occurs because IIS is configured to disallow posting to HTML files. Possible workarounds:

    • ask your ISP to change their IIS configuration;
    • rename your files to .php instead of .html;
    • hack the lightbox.js file to use GET instead of POST ( line 126: change ‘post’ to ‘get’ )

    Cheers!

  255. Eivind · 4 years ago

    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 =)

  256. Eivind · 4 years ago

    It wen’t wrong=S

    HERE’S THE SCRIPT!!

  257. Eivind · 4 years ago

    It wen’t wrong=S

    HERE’S THE SCRIPT!! PUSH!

  258. eric · 4 years ago

    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 }

  259. acedanger · 4 years ago

    Anybody have a forum for this very useful script? The commenting area is a horrible place for ‘technical support’.

  260. Scott · 4 years ago

    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

  261. Nate · 4 years ago

    Everyone needs a hug. You need a hug. :) Thanks for this great application.

  262. Madval · 4 years ago

    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:

    • In IE i want to not be able to scroll down past the lightbox.
    • I want to close the LightBox when I click on the overlay.

    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.

  263. Madval · 4 years ago

    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

  264. James · 4 years ago

    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

  265. leech · 4 years ago

    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?

  266. ding · 4 years ago

    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(); },

  267. PatrickA · 4 years ago

    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:

    initialize: function(ctrl) {
        if (ctrl.rel == '') {
            this.content = ctrl.href;
            Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
            ctrl.onclick = function(){return false;};
        } else {
            this.content = '#';
            this.displayDiv = ctrl.rel;
            Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
            ctrl.onclick = function(){return false;};
        }
    },// Begin Ajax request based off of the href of the clicked linked
    loadInfo: function() {
        if (this.content == '#'){
            divbox = document.getElementById(this.displayDiv);
            info = "" + divbox.innerHTML + "";
            new Insertion.Before($('lbLoadMessage'), info)
            $('lightbox').className = "done";   
            this.actions(); 
        } else {
            var myAjax = new Ajax.Request(
            this.content,
            {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
            );
        }},
    

    In your html file, you can use it like this:

        <a href="#" rel="nofollow">Show Div</a>   Lipsum etc,    <a href="#" rel="nofollow">Close Box</a>
    

    ….

    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.

  268. PatrickA · 4 years ago

    Well, the html examples got screwed up - here is the usage:

      &lt;a href="#" rel="nofollow"&gt;Show Div&lt;/a&gt;&lt;/p&gt;   Lipsum etc,
       &lt;br /&gt;    &lt;a href="#" rel="nofollow"&gt;Close Box&lt;/a&gt;
    
  269. lukasz · 4 years ago

    what I must do too have polish signs in form in lightbox? I have only “?”

  270. Lazymoon · 4 years ago

    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?

  271. ed fladung · 4 years ago

    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?

  272. Kevin · 4 years ago

    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

  273. Crossing · 4 years ago

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

  274. noah · 4 years ago

    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?

  275. ben · 4 years ago

    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?

  276. sean · 4 years ago

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

  277. Rapidfire · 4 years ago

    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,

  278. noah · 4 years ago

    Does anyone know if it’s possible to have the lightbox fade in (like Scriptaculous Effect.Appear)?

  279. Deepak · 4 years ago

    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.

  280. Mark Brown · 4 years ago

    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

  281. Blake Bauman · 4 years ago

    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

  282. Thomas Dolberg · 4 years ago

    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

  283. yotamv · 4 years ago

    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,

  284. lincoln · 4 years ago

    I have put the sample up on my site. It gives me a 405 error, can anyone help?

    http://www.lincolnleung.com/dev/lightbox

  285. Karim · 4 years ago

    Does anyone know how to launch the lightbox using Flash (i.e. getURL)?

  286. Thorsten · 4 years ago

    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

  287. Atif · 4 years ago

    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

  288. HiTech69 · 4 years ago

    I’ve tried and tried, and I can’t get a GET or POST response from my form. Any other examples?

  289. Joe · 4 years ago

    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

  290. Paul Herron · 4 years ago

    @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!

  291. Scott · 4 years ago

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

  292. Helder Meneses · 4 years ago

    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…

  293. Dave Verwer · 4 years ago

    Everyone needs a hug.

  294. Dave Verwer · 4 years ago

    > 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 :)

  295. Chris Campbell · 4 years ago

    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.

  296. Charles · 4 years ago

    This is soo sweet!

  297. Deepak · 4 years ago

    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.

  298. kim · 4 years ago

    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.

  299. Keren · 4 years ago

    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

  300. Matthew Strickland · 4 years ago

    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; }

  301. Matthew Strickland · 4 years ago

    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:

    #lightbox.done img{
       width:100%;
       height:100%;
    }
    

    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.

  302. Bruno · 4 years ago

    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.

  303. hynnot · 4 years ago

    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.

  304. hynnot · 4 years ago

    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

  305. Jessica · 4 years ago

    No support for IE7 yet?

  306. Jessica · 4 years ago

    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…

  307. Jessica · 4 years ago

    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

  308. urlgurl · 4 years ago

    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:

    1. add class=”lbOn” and rel attribute to the radio button, as in:

    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

    1. wrap the input tag inside an anchor tag, like this:

    <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:

    initialize: function(ctrl) {
        this.content = ctrl.rel;  
    

    but my limited js skills aren’t leading to a solution.

    Any help much appreciated!

  309. SoapTray · 4 years ago

    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

  310. Daniel Reckling · 4 years ago

    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?

  311. Daniel Reckling · 4 years ago

    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!

  312. Jessica · 4 years ago

    I am trying to make the lightbox show up on mouseover, rather than clicking a link. How would I do this?

  313. rich · 4 years ago

    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

  314. erim · 4 years ago

    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.

  315. Lucas · 4 years ago

    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.

    Open

    Then 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

  316. Mr. Grumpy · 4 years ago

    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.

  317. Adeola · 4 years ago

    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.

  318. Elijha · 4 years ago

    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.

  319. Elijha · 4 years ago

    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.

  320. Mike · 4 years ago

    Would it be possible to give me an example on how to open lightbox on mouseover?

    Thank you!!

  321. Mr. Grumpy · 4 years ago

    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;};

  322. dyka · 4 years ago

    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?

  323. Lyrad · 4 years ago

    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 ;-)

  324. Lyrad · 4 years ago

    Please ignore my post above, I managed to get Richard’s Response above to work.

    I don’t deserve a hug. :(

  325. Noah Winecoff · 4 years ago

    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?

  326. Ojster · 4 years ago

    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!

  327. John Zhang · 4 years ago

    Sometimes the url is not simple. It may be constructed based on logic. So I have modified it in this way:

    lightbox.prototype.loadInfo = function() {
        var targetUrl = null;
        if ( this.content.substr(0, 4) == "url:" ){
            eval("targetUrl = " + this.content.substr(4));
        }
        else{
            targetUrl = this.content;
        }    var myAjax = new Ajax.Request(
            targetUrl, {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
        );};function getTargetUrl(){
        // construct the url here
        return "some.jsp?param1=" + param1 + "&amp;param2=" + ...;
    }
    

    in the html, we can write this:

    <a href="getTargetUrl()" rel="nofollow">Lightbox Gone Wild</a>
    

    It will be great if that can be integrated into original script.

  328. Alan · 4 years ago

    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

  329. Kelly · 4 years ago

    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?

  330. Kumar Chetan · 4 years ago

    Everyone needs a hug. But you ppl need more than a hug. I am subscribing to feeds.

  331. Alan · 4 years ago

    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

  332. Smilin' Joe Fission · 4 years ago

    @erim 09/26 — thanks for the tip. Works like a charm! Great script, PT, thanks for sharing.

  333. Joe Tansy · 4 years ago

    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.

  334. Jiju Thomas Mathew · 4 years ago

    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

  335. evan · 4 years ago

    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

  336. F. Morgan Whitney · 4 years ago

    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:

       if (Event.element(e).parentNode.innerHTML.substring(0,4) == "
    
  337. Denis R. · 4 years ago

    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?

  338. Denis R. · 4 years ago

    OPS, ok, I found out what to do…

    I just had to remove this from the CSS

    #lightbox.done img{
       width:100%;
       height:100%;
    }
    

    Everyone needs a hug.

  339. Alex · 4 years ago

    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 !!!!!

  340. Roger Riche · 4 years ago

    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.

  341. Roger Riche · 4 years ago

    EDIT: Now you wont have the carret issues. not would. hehe

  342. ed · 4 years ago

    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

  343. Kyle · 4 years ago

    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?

  344. Scott · 4 years ago

    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”;

  345. Paul Tiseo · 4 years ago

    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.

  346. Deepak · 4 years ago

    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.

  347. Alexander Trotter · 4 years ago

    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.

  348. F. Morgan Whitney · 4 years ago

    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:

    var lightbox_list = new Array;
    

    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

  349. Bw · 4 years ago

    hello how can you get this for the new lightbox 2 the one with the cool resising effects…?

  350. Bw · 4 years ago

    Everyone needs a hug.

  351. Alexander Trotter · 4 years ago

    BTW, my e-mail add is trotter[at]medien-haus[dot]de

  352. Eric Hynds · 4 years ago

    <

    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

  353. Amos Elliston · 4 years ago

    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.

  354. Alastair · 4 years ago

    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.

  355. jaap roskam · 4 years ago

    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

  356. bnbn · 4 years ago

    Everyone needs a hug.

  357. Jonathan · 4 years ago

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

  358. John · 4 years ago

    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

  359. John · 4 years ago

    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

  360. John · 4 years ago

    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

    onclick="deactivate()"
    

    but im too js illiterate to figure it out please help me

  361. jaap roskam · 4 years ago

    Everyone needs a hug. and especially John , this advice really saved my day and quite a few more. HUG HUG HUG !!

  362. Sergej · 4 years ago

    Best Tool

  363. TeQ · 4 years ago

    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.

  364. chadmanmn · 4 years ago

    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 :-)

  365. xSultan · 4 years ago

    Great stuff.

    im using it now „ thanks to coded

  366. Carl Youngblood · 4 years ago

    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.

  367. anita · 4 years ago

    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!

  368. haritha · 4 years ago

    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.

  369. Oninski · 4 years ago

    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!

  370. anonymous coward · 4 years ago

    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.

  371. asds · 4 years ago

    Everyone needs a hug.

  372. Jared · 4 years ago

    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?

  373. CStanard · 4 years ago

    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!

  374. Hassan · 4 years ago

    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

  375. Mark · 4 years ago

    <

    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

  376. Mark · 4 years ago

    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

  377. Mark · 4 years ago

    This message board sucks! It keeps ruining my posts.

    BODY ONLOAD! WHO HAS A BODY ONLOAD SOLUTION!!!

  378. Amit · 4 years ago

    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!

  379. Craig · 4 years ago

    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

  380. Thomas Bryan · 4 years ago

    To set scroll, you will need edit lightbox.css file, and insert the “overflow: auto” in #lightbox section.

  381. Wei · 4 years ago

    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! ;-)

  382. Tobias · 4 years ago

    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 ?

  383. jk · 4 years ago

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

  384. Carlos · 4 years ago

    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.

  385. Sachin Kumar · 4 years ago

    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.

  386. Erik Sjölander · 4 years ago

    I just activated overlay click -> close lightbox. Here are my edit.

    displayLightbox: function(display){
        $('overlay').style.display = display;    $('overlay').onclick =  this.deactivate.bindAsEventListener(this);    $('lightbox').style.display = display;
        if(display != 'none') this.loadInfo();},
    

    I have a problem with my site, I want a scroll on lightbox when its overflow, else i just see half lightbox… :(

  387. Jessica · 4 years ago

    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!

  388. Eric Hill · 4 years ago

    Erik Sjölander, you are my hero. Cheers!

  389. Chris · 4 years ago

    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.

  390. IsBmizDuJZ · 4 years ago

    Hi! Very nice site! Thanks you very much! g1aehB1Nh6dt

  391. miss miserables... · 4 years ago

    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!!!

  392. rtheodorow · 4 years ago

    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

  393. Lars · 4 years ago

    How can I recativate the auto-resize feature?

  394. Dr. Reimund Blumen · 4 years ago

    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 text

    This 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'));

       var myAjax = new Ajax.Request(
              link.href,
              {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
       );},
    

    But what if you use a simple link with nothing nested inside? Like this one:

    Some link text

    Ooopsie: 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'));

       var myAjax = new Ajax.Request(
              link.href,
              {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
       );},
    

    To find out took me an hour! ;)

    But anyway, big hug, nice script!

  395. Brian · 4 years ago

    Great script, have added a link to it in ajaxshack directory http://www.ajaxshack.com

  396. stop · 4 years ago

    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.

  397. jonben · 4 years ago

    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{

    display:none;
    position: absolute;
    top:50%;
    left:50%;
    z-index:9999;
    width:500px;
    height:auto;
    margin:-220px 0 0 -250px;
    }
    

    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?

  398. mario · 4 years ago

    if i want to show my div on body on load how I setup this? thanks

  399. plmxptogro · 4 years ago

    jjodfpwk

  400. mike Lorenz · 4 years ago

    Everyone needs a hug.

  401. justchris · 4 years ago

    To add the ability to pass $_POST and $_GET variables add the line,

    var pars = Form.serialize('form_id');

    after the line

    insert: function(e){

    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:

    
    insert: function(e){
        var pars = Form.serialize('form_id');
        link = Event.element(e).parentNode;
        Element.remove($('lbContent'));
        var myAjax = new Ajax.Request(
        link.href,
        {method: 'post', parameters: pars, onComplete: this.processInfo.bindAsEventListener(this)}
           );
         
        },
    

    In the form.html file, I am sending the variables to upload.php via

    Submit 

    Hope this helps! -Chris

  402. justchris · 4 years ago

    The submit code didn’t show, but this is what the “a” tag includes.

    href=”upload.php” class=”lbAction” rel=”insert”

  403. Devin · 4 years ago

    This is great, thanks for all of your hard work you have saved me a bunch of time in development.

  404. sarika kulkarni · 4 years ago

    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.

  405. Html · 4 years ago

    Everyone needs a hug.

  406. Renan · 4 years ago

    Flash…i have a flash menu, i need it work in this, how i made?

  407. Ben Bueno · 4 years ago

    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.

  408. layne · 4 years ago

    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?

  409. ljlhnj · 4 years ago

    Everyone needs a hug.

  410. Will · 4 years ago

    doesnt seem to work when using along side the SIFR js for headline text, it ends up just linking the page as normal.

  411. Jan · 4 years ago

    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.

  412. Peter · 4 years ago

    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.

  413. Project Responder · 4 years ago

    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.

  414. gazete, gazeteler · 4 years ago

    thanks, very good !

  415. haber, haberler · 4 years ago

    good works.. thanks…

  416. portal.im · 4 years ago

    thanks..

  417. Brian · 4 years ago

    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

  418. niels · 4 years ago

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

  419. Jasmina · 4 years ago

    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:

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

    2. This leads me to another issue. If I remove lightbox width and height, horizontal centering doesn’t work.

    3. Can we use your scripts for our commercial projects? If we can, how does your licencing work?

    Thanks

  420. Stutzer · 4 years ago

    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.

  421. Eric · 4 years ago

    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!

  422. nedu · 4 years ago

    good job ! realy like this script :)

  423. Yandex 2.0 · 4 years ago

    Thanks for this script!!!! ;)

  424. PohEe.com · 4 years ago

    Great job. Nice tutorial. I will implement it in my website

  425. test · 4 years ago

    Everyone needs a hug.

  426. Ben Bueno · 4 years ago

    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

  427. Kevin Miller · 4 years ago

    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

  428. Ben Bueno · 4 years ago

    nevermind… I definitely got that problem solved… excuse my idiocy :D

    still want licensing info though

  429. gabs · 4 years ago

    Anyway to contol div’s  ?

    Trying to get this to work document.getElementById(“area2”).innerHTML =”hello”;

    Within the lightbox

    Any ideas ?

  430. Sebastian · 4 years ago

    I used it in my site and works great!!! Thanks dude!

    Sebastian buscouniversidad.com.ar

  431. C · 4 years ago

    has anyone tried slimbox? really nice.

    http://homepage.mac.com/yukikun/software/slimbox_ex/

  432. Michael · 4 years ago

    Has anyone been able to utilize lightbox for the purposes of playing video?

  433. Hassan · 4 years ago

    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

  434. Luke · 4 years ago

    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.

  435. andrea serravezza · 4 years ago

    Great tutorial. Tnx a lot to share it!

  436. Dimitris Tselios · 4 years ago

    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.

  437. Kevin Miller · 4 years ago

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

  438. Stephen · 4 years ago

    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

  439. angelsoft · 4 years ago

    this is great. expect to see this at angelsoft solutions. thanks!

  440. Sean · 4 years ago

    For people having a problem with innerHTML elements, after you create the elements, call the javascript function initLightbox(); That should solve your problem :)

  441. vain · 4 years ago

    what about callbacks? is it possible to reload the underlying page content without destruction of the displayed lightbox?

  442. Kevin Miller · 4 years ago

    As promised:

    http://stickmanlabs.com/lightwindow/

    Hope someone finds it useful.

  443. Foxinni · 4 years ago

    Thanks for the advice… great tips!

    Cheers

  444. Scott · 4 years ago

    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?

  445. Michael · 4 years ago

    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.

  446. Michael · 4 years ago

    email = admin at ccgdb dot com

  447. Daniel Ulczyk · 4 years ago

    Great tips! Nice… ;-)

  448. Michael · 4 years ago

    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?

  449. maurizio · 4 years ago

    With IE 7 don’t works

  450. Michael · 4 years ago

    nevermind…I found a lightbox at a 100% javascript-driven modal (Control.Modal) @ LivePipe.net (it can also do Event driven, like LBGW).

  451. Heinz · 4 years ago

    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?

  452. Adi · 4 years ago

    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?

  453. Tue · 4 years ago

    Hello

  454. erim · 4 years ago

    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.

  455. Jenn · 4 years ago

    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

  456. dungpt · 4 years ago

    this script’s error with flash embed on Firefox . CAN”T CLICK ON THE COVER LAYER

  457. Constantin Ionescu · 4 years ago

    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

  458. vitto · 4 years ago

    is it possible to load dynamic content in the lightbox window, ie a product details from a mysql db?

  459. marc · 4 years ago

    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

  460. Rob · 4 years ago

    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 :)

  461. vitto · 4 years ago

    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

  462. vitto · 4 years ago

    here’s a donwloadable file with flashlghtbox.. http://juliusdesign.wordpress.com/2007/02/09/flash-e-lightbox/

  463. vitto · 4 years ago

    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

  464. Mann · 4 years ago

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

  465. hcvitto · 4 years ago

    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

  466. hcvitto · 4 years ago

    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

  467. MyDoing · 4 years ago

    Everyone needs a hug. wawoo it’s very cool ~~

  468. nabil · 4 years ago

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

  469. Dale · 4 years ago

    You should also check out this one by Kevin Miller: lightWindow

    Handles a variety of media.

    http://stickmanlabs.com/lightwindow/#download

  470. hcvitto · 4 years ago

    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

  471. nabil · 4 years ago

    anyone with a solution on how to make this work all the time in firefox when flash is used ??

  472. Steve · 4 years ago

    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

  473. Max Buriak · 4 years ago

    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

  474. hcvitto · 4 years ago

    any advice on why the function setScroll doesn’t work in ie6 (in the standalone version) on the deactivate action?

  475. Sam Soffes · 4 years ago

    I spent so long looking for how to deactivate lightbox with javascript. I finally figured it out.

    lightbox.prototype.deactivate();

    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

    initialize();

    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.

  476. Neurone00 · 4 years ago

    It’s very nice but i can’t use it :’( HELP!

  477. JAnak · 4 years ago

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

  478. Philipp · 3 years ago

    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.

  479. Sam Soffes · 3 years ago

    @JAnak

    sure, just do a AJAX request and have it update a div inside the lightbox.

  480. htp · 3 years ago

    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’)); }

        if (browser == "Internet Explorer"){
            this.setScroll(0,this.yPos);
            this.prepareIE("auto", "auto");
            this.hideSelects("visible");
        }    this.displayLightbox("none");
    }
    

    }

    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!

  481. htp · 3 years ago

    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

  482. htp2 · 3 years ago

    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]); } }

  483. John · 3 years ago

    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?

  484. knarz · 3 years ago

    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!

  485. bluehousegroup · 3 years ago

    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.

  486. Mizz · 3 years ago

    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.

  487. Bradyn Knable · 3 years ago

    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

  488. lightbox problem · 3 years ago

    whats the solution for this

    I’m having problems in IE where the flash movie is displayed on top of the lightbox.

  489. lightboxsizeprb · 3 years ago

    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?

  490. Toby · 3 years ago

    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

    deactivate: function(){
        Element.remove($('lbContent'));    (...)    this.displayLightbox("none");    //added to show the activity indicator at the next activation
        addLightboxMarkup();
    }
    

    Hope it might help someone ;-) Greetz, toby

  491. Seb · 3 years ago

    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.

  492. Michelle · 3 years ago

    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

  493. oldmateluke · 3 years ago

    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

  494. steven · 3 years ago

    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!

  495. steven · 3 years ago

    michelle — position the links in your css using position:absolute; then you can put them anywhere on your page (using top, left, margin, etc.)

  496. bluehousegroup · 3 years ago

    Sprites // IE 6… When one closes a lightbox window, it disrupts any links using Sprites. Anyone know of a work-around?

  497. Ferry Meidianto · 3 years ago

    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.

  498. Brett · 3 years ago

    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.

  499. Rich · 3 years ago

    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?

  500. allan1956 · 3 years ago

    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.

  501. allan1956 · 3 years ago

    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.

  502. Odonnize · 3 years ago

    Please could someone solve the flashing cursor issue in firefox ?

  503. Kevin D. · 3 years ago

    Really simple question. How would I display the form in the example on page load?

  504. Dave · 3 years ago

    Thanks for you great work, I have a work around for variable window sizes, dont know if its posted yet.

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

    2. add “this.size = ctrl.rel;” to initialize: function(ctrl) to capture the rel tag.

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

  505. Mr Bill · 3 years ago

    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?

  506. Jonas Boman · 3 years ago

    I’m trying to implement a onKey event; when Escape-button is pressed then disable lightbox.

    Inserted this above the ajax response function:

    enableKeyboardNav: function() {
        document.onkeydown = this.keyboardAction; 
    },//
    //  disableKeyboardNav()
    //
    disableKeyboardNav: function() {
        document.onkeydown = '';
    },//
    //  keyboardAction()
    //
    keyboardAction: function(e) {
        if (e == null) { // ie
            keycode = event.keyCode;
            escapeKey = 27;
        } else { // mozilla
            keycode = e.keyCode;
            escapeKey = e.DOM_VK_ESCAPE;
        }    key = String.fromCharCode(keycode).toLowerCase();    if(keycode == escapeKey){   // close lightbox
            Element.remove($('lbContent'));       
            if (browser == "Internet Explorer"){
                this.setScroll(0,this.yPos);
                this.prepareIE("auto", "auto");
                this.hideSelects("visible");
            }       
            this.displayLightbox("none");
         }},
    

    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.

  507. Andrew · 3 years ago

    I like this, going to spice up some websites with this.. thanks

  508. Lyn · 3 years ago

    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?

  509. jamie · 3 years ago

    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.

  510. heiko · 3 years ago

    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

  511. michael · 3 years ago

    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

  512. Yusheng · 3 years ago

    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?

  513. Ron · 3 years ago

    To get your flash to display under the lightbox; add the following to your flash object.

  514. michael · 3 years ago

    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?

  515. Steffie · 3 years ago

    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—

  516. shpyo · 3 years ago

    It’s soooooooooooooooo COOOOOOL. I tried make sth similar… Good JOB!

  517. Tim · 3 years ago

    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!

  518. coolka · 3 years ago

    Michael: Try add to select style “visibility: visible !important;”. Should help in IE

  519. decimus · 3 years ago

    Is there any possibility to translate this article? Let me know.

  520. Morgan · 3 years ago

    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

  521. Exinrex · 3 years ago

    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

  522. Andrew Smith · 3 years ago

    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!

  523. Tim · 3 years ago

    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 … ;)

  524. Mase · 3 years ago

    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. ;-)

  525. Ken Gaspar · 3 years ago

    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

  526. roundcrisis · 3 years ago

    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

  527. jebediah spongefeld · 3 years ago

    No FT. No comment.

  528. Karlsson · 3 years ago

    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 ;)

  529. glenn · 3 years ago

    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! :)

  530. Marty · 3 years ago

    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.

  531. shawn · 3 years ago

    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?

  532. shawn · 3 years ago

    Got it working after some fuss, amazing script by the way

  533. Andre · 3 years ago

    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.

  534. Mike · 3 years ago

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

  535. Lyn · 3 years ago

    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.

  536. developer_in_trouble · 3 years ago

    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 ?

  537. Nick · 3 years ago

    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

  538. cheez · 3 years ago

    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!

  539. Gavian · 3 years ago

    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?

  540. sandra · 3 years ago

    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?

  541. Ryan · 3 years ago

    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?

  542. Amol Bhavsar · 3 years ago

    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.

  543. logoman · 3 years ago

    can I display a .swf within Lightbox Gone Wild?

  544. John · 3 years ago

    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

  545. Shanif · 3 years ago

    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.

  546. Klaus Mogensen · 3 years ago

    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

  547. Darko Romanov · 3 years ago

    (Everyone needs a hug)

    Hi there.. this stuff is really freaking me out :-) good work!

    d

  548. Brian Evans · 3 years ago

    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

  549. joshua Klingenberg · 3 years ago

    please tell me if it would be possible to call an asp file as the content in the lightbox

  550. Ruben B · 3 years ago

    Thank you. It is working really good.

  551. rakusuira · 3 years ago

    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!

  552. david gunnells · 3 years ago

    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/

  553. Mon Magallanes · 3 years ago

    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

  554. Meander · 3 years ago

    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?

  555. Mike · 3 years ago

    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?

  556. Gangadhar.Dorla · 3 years ago

    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

  557. Gangadhar.Dorla · 3 years ago

    Everyone needs a hug.

  558. Meander · 3 years ago

    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

  559. kannan · 3 years ago

    i have two problems when using this lightbox.

    1. The close button is not work [in some pages it works fine]
    2. i have a form [id, name] and a submit button. if clicking the submit button the lightbox goes disappeared.. bcz i make the php codings within the lightbox related to that page.. plz help me
  560. Andy · 3 years ago

    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 :(

  561. Chris H · 3 years ago

    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 :)

  562. dfsafdsa · 3 years ago

    ddddd

  563. Rich · 3 years ago

    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);

    #

  564. hey · 3 years ago

    fuck

  565. ququhu · 3 years ago

    Everyone needs a hug.

  566. ququhu · 3 years ago

    Is very good, everyone come here : http://www.ququhu.com

  567. miCRoSCoPiC^eaRthLinG · 3 years ago

    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

  568. Rajesh · 3 years ago

    we used this

  569. Ajay · 3 years ago

    Hi,

    Great Work, It will save time of all of us. Thank You.

  570. ColdFusion Developer · 3 years ago

    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?

  571. gao · 3 years ago

    thank you

  572. ctraos · 3 years ago

    muchas gracias , esto esta muy bueno :D

  573. Walter · 3 years ago

    great, thank you :P Best Regards

  574. RRasco · 3 years ago

    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.

  575. Kristin · 3 years ago

    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.

  576. Matt Baily · 3 years ago

    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.

  577. Rafael · 3 years ago

    I can’t use it on IE, cause a blank screen comes…

    Anyboy help?

    rafaelcg at gmail dot com

  578. Norik · 3 years ago

    Lightbox is cool. it is easy to adopt it into your design. Much thanks for free stuff

  579. joe · 3 years ago

    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

  580. ina · 3 years ago

    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?

  581. Aleksey Korzun · 3 years ago

    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 :)

  582. Gianni · 3 years ago

    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:

    * Contact the Web site administrator if you believe that this request should be allowed.
    * Make sure that the Web site address displayed in the address bar of your browser is spelled and formatted correctly.
    

    HTTP Error 405 - The HTTP verb used to access this page is not allowed. Internet Information Services (IIS)

    Technical Information (for support personnel)

    * Go to Microsoft Product Support Services and perform a title search for the words HTTP and 405.
    * Open IIS Help, which is accessible in IIS Manager (inetmgr), and search for topics titled Setting Application Mappings, Securing Your Site with Web Site Permissions, and About Custom Error Messages.
    
  583. Tino Wittig · 3 years ago

    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

  584. Al Mamun · 3 years ago

    Very nice I will try it out on my site. :D Thank You

  585. Win · 3 years ago

    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.

  586. Bob · 3 years ago

    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?

  587. Ionut · 3 years ago

    very nice stuff! thx a lot for this!

  588. Rodrigo · 3 years ago

    I may use HTML you say?

    What about style=”“?

  589. John Williams · 3 years ago

    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?

  590. Kevin · 3 years ago

    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:

    * Contact the Web site administrator if you believe that this request should be allowed.
    * Make sure that the Web site address displayed in the address bar of your browser is spelled and formatted correctly.
    

    HTTP Error 405 - The HTTP verb used to access this page is not allowed. Internet Information Services (IIS)

    Technical Information (for support personnel)

    * Go to Microsoft Product Support Services and perform a title search for the words HTTP and 405.
    * Open IIS Help, which is accessible in IIS Manager (inetmgr), and search for topics titled Setting Application Mappings, Securing Your Site with Web Site Permissions, and About Custom Error Messages.
    
  591. Kevin · 3 years ago

    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

  592. Steven · 3 years ago

    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.

  593. Steven · 3 years ago

    Just figured it out. Use this: chdir (‘../’); then include your variable php file and your all set.

  594. António José Silva · 3 years ago

    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?

  595. Steven · 3 years ago

    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?

  596. Rajesh Shetty · 3 years ago

    Here is my solution for onload. Works well .

    Add following in your lightbox.js->initialize() method ; right after current for loop

    lboxAutoLoad = document.getElementsByClassName('lbOnAutoLoad');
    if (lboxAutoLoad!=null)
    {
       valid_auto_load = new lightbox(lboxAutoLoad[0]);
       valid_auto_load.activate();
    }
    

    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

  597. Nick · 3 years ago

    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

    this.query = ctrl.search.substr(1);

    In your loadInfo() method set the parameters for the AJAX request to the query string value

         var myAjax = new Ajax.Request(
            this.content,
            {method: 'post', parameters: this.query, onComplete: this.processInfo.bindAsEventListener(this)}
        );

    HTH

  598. bincom ict solutions · 3 years ago

    Nice work , it works perfectly for our Needs. cheers

  599. Mudassir Azeemi · 3 years ago

    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

  600. Bernhard · 3 years ago

    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:

      
    function initLightbox() { myLightbox = new Lightbox();
    var firstLight;
    if(firstLight=document.getElementById('the_first'))
    firstLight.onclick.apply(firstLight);
     }
    Event.observe(window, 'load', initLightbox, false);
    

    I found this on the Dynamic Drive forums. Happy X-Mas Bernhard

  601. tonnyown · 3 years ago

    Everyone HELLO~~~ TAIWAN NO.1~~~

  602. GG · 3 years ago

    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?

  603. Jemes · 3 years ago

    Everyone needs a hug. Yeah weres my hug then?

  604. Danny Campbell · 3 years ago

    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.

  605. Chen Bo · 3 years ago

    Thank you!

  606. Gulivers · 3 years ago

    Nice tool, but I couldn’t use it for my needs :(

  607. Gulivers · 3 years ago

    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.

  608. Lawrence the Photographer · 3 years ago

    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!

  609. HB · 3 years ago

    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

  610. WW · 3 years ago

    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.

  611. Fred · 3 years ago

    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

  612. Prasad · 3 years ago

    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

  613. Prasad · 3 years ago

    Hi, I have a problem, How can I make this is MOVABLE!

    Can anybody help me out pleaseeeeeeeeeeeeeeeee!

    Cheers, Reddy

  614. Reddy · 3 years ago

    Hi, I have a problem, How can I make this is MOVABLE!

    Can anybody help me out pleaseeeeeeeeeeeeeeeee!

    Cheers, Reddy

  615. hagi · 3 years ago

    hey guys

    very nice work! thx for the great documentation.

    cheers

  616. HB · 3 years ago

    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

  617. bob · 3 years ago

    YL8ztg hi nice site thx http://peace.com

  618. ankraj · 3 years ago

    very nice work

  619. drew · 3 years ago

    this is a test

  620. DS · 3 years ago

    Why in the world do you load the lightbox with a POST request? It doesn’t make any sense.

  621. Erika Danis · 3 years ago

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

  622. Mike Stocks · 3 years ago

    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?

  623. Live Footy · 3 years ago

    really nice explanation and good demos

  624. DeadPixel · 3 years ago

    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.

  625. Aaron · 3 years ago

    Am I crazy, or does this script not work in prototype 1.8? At least, it’s not working for me =(

  626. airtight · 3 years ago

    how do i add a tooltip on a lightbox and the tooltip has links.

  627. Solutions Master · 3 years ago

    126 POST to GET

  628. Beeble · 3 years ago

    This is a really nice script. Love how it works so easily.

  629. Habeeb · 3 years ago

    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?

  630. jj · 3 years ago

    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!

  631. Abogado · 3 years ago

    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

  632. nomina · 3 years ago

    NICE!! Thank You

  633. abogados valencia · 3 years ago

    Everyone needs a hug.!!

  634. Abogado Valencia · 3 years ago

    A hug for everybody! nice work!! thanks

  635. Shaun Taylor · 3 years ago

    Nice script! We’re using it to display device support information for a mobile software product - http://www.iswirl.com. Thanks for your efforts!

  636. letrado · 3 years ago

    hugs for everybody!

  637. terapia genica · 3 years ago

    great plugin!! I cant live without it

  638. baremo · 3 years ago

    congratulations! nice work

  639. Kristopher · 3 years ago

    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

  640. Markus · 3 years ago

    Can someone tell me what i have to do, if i want to use a direct Javascript call via onClick=”…” instead of class=”lbOn”?

  641. Joe · 3 years ago

    Nice work

  642. Hakan · 3 years ago

    Thank you

  643. Chrissy · 3 years ago

    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?

  644. john · 3 years ago

    Everyone needs a hug.

  645. Adam · 3 years ago

    Any plans on making the “lightbox” close when pressing escape? or adding an image at the bottom right, top left etc with a X ?

  646. Josh · 3 years ago

    How do you make the light box open with a button using javascript instead of a href link?

  647. honza · 3 years ago

    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?

  648. honza · 3 years ago

    [detail]”;

    ”;

  649. honza · 3 years ago

    [detail]

  650. Chris Wilson · 3 years ago

    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?

  651. ronen · 3 years ago

    The inset doesn’t work for me any suggestion.When I perfform the insert I got a black screen.

  652. Silvestre · 3 years ago

    Buenisimo voy a intentar implementarlo en el blog

  653. adul · 3 years ago

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

  654. adul · 3 years ago

    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?

  655. Arlan · 3 years ago

    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.

  656. Josh Byington · 3 years ago

    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.

  657. Tim Almond · 3 years ago

    Thanks very much. Nice and simple.

  658. vin · 3 years ago

    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(); }

  659. Doug · 3 years ago

    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?

  660. Mike M · 3 years ago

    [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!

  661. xav · 3 years ago

    Thank you !

    http://www.simpletroc.com/

    .

  662. lupu slobodu · 3 years ago

    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)

  663. Cornices · 3 years ago

    Everyone needs a hug. That’s really good tutorial! Many thanks for this prototype!

  664. African Boy · 3 years ago

    Your comment listing is confusing. Good design gone bad.

  665. China Landscape · 3 years ago

    Lon to display with all theses comments

  666. Panoramy Sferyczne · 3 years ago

    Good article, thank You

  667. Royal Blood · 3 years ago

    How Did You Made This Really Cool Comment Design?

  668. John · 3 years ago

    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.

  669. natasha · 3 years ago

    I want to see which colour my comment will be

  670. Keith · 3 years ago

    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

  671. Keith · 3 years ago

    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>

  672. Office clearance london · 3 years ago

    Everyone needs a hug. How to pass variable to SWF - using lightbox script you can easily add variables to swf~!

  673. Mark · 3 years ago

    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! :)

  674. Asesoria Valencia · 3 years ago

    Everyone needs a hug.

  675. ere · 3 years ago

    Everyone needs a hug.

  676. Eric Stout · 3 years ago

    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?

  677. ooo · 3 years ago

    Everyone needs a hug.

  678. yaip · 3 years ago

    Check this out for lightbox implementation:

    http://www.justthinkart.com/General/Portfolio_AwardWinners.aspx

  679. g · 3 years ago

    Everyone needs a hug.

  680. timmie · 3 years ago

    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…

  681. Gerry McFarlane · 3 years ago

    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?

  682. John · 2 years ago

    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.

  683. bartom · 2 years ago

    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.

  684. Nathan · 2 years ago

    Are there any fixes for IE7 yet? Nathan… PinkCherry.com http://www.PinkCherry.com

  685. Dan · 2 years ago

    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.

  686. Dan · 2 years ago

    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;

  687. Go Media · 2 years ago

    POST is not allowed how do i fix?

  688. Junaid Shabbir · 2 years ago

    Using the tab key, one can go back to the main windows following links, scroll etc

  689. Chris · 2 years ago

    “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. ;-)

  690. Chris · 2 years ago

    Is there somebody who has a implemented the possibility to close the lightbox with the ESC-key?

  691. Chris · 2 years ago

    Cool

  692. Miguel Bernardo · 2 years ago

    Everyone needs a hug. No one needs a bug!

  693. Phil · 2 years ago

    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.

  694. Scott · 2 years ago

    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.

  695. War Kitten · 2 years ago

    Awesome script. Worked perfectly for a portion of my company intranet! can make it work with anything really… good job and thanks!

  696. Angel · 2 years ago

    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!

  697. NERY · 2 years ago

    Very good, very cool. This page links to provide a convenient and continue to improve. Thank you!

  698. Alison · 2 years ago

    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?

  699. Isaac Bonilla · 2 years ago

    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.

  700. Designer · 2 years ago

    how i can use this function in flash?

  701. preaxz · 2 years ago

    // 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')); (...) }

  702. Manimaran · 2 years ago

    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

  703. ???? ???????? ????? · 2 years ago

    Thanks for you work, you make good job.

  704. Lucas · 2 years ago

    vey good the modifications! congratulations

  705. Higinio · 2 years ago

    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:

    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;}; }
    },
    

    2) Next I added two functions right below the checkit function in lightbox.js:

    function onClickLightbox(url) {
        var popup = new lightbox(null); 
        popup.content = url; 
        popup.activate(); 
    }function closeLightbox() {
            Element.remove($('lbContent'));
            $('overlay').style.display = 'none';
            $('lightbox').style.display = 'none';
    }
    

    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.

  706. Carl · 2 years ago

    Cheers for the modifications!

  707. Chris · 2 years ago

    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?

  708. btwong · 2 years ago

    Thanks Higinio.

    That helped BIG TIME!!!

    Muchos Gracias

  709. Shuchi Sethi · 2 years ago

    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

  710. Shuchi Sethi · 2 years ago

    Everyone needs a hug.

  711. Patrick · 2 years ago

    Dude… Higinio… I’ve come at the right time. It seems like everyone has asking for this feature for like 2 years.

  712. Chris · 2 years ago

    What is the deal with the terrible support?

  713. huh? · 2 years ago

    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.

  714. Viraj Pateliya · 2 years ago

    its really a nice script. Great work!!!!!!

  715. Nathan · 2 years ago

    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

  716. Ashwin · 2 years ago

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

  717. George · 2 years ago

    Hey Guys,

    I can download the code in a zip folder, but can’t extract it properly. Any ideas?Hot

  718. zi · 2 years ago

    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.

  719. andy · 2 years ago

    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.

  720. asdf · 2 years ago

    Everyone needs a hug. a

  721. hip london · 2 years ago

    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 :)

  722. Diesel Vin Pham · 2 years ago

    Everyone needs a hug.

  723. Ronny Karam · 2 years ago

    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.

  724. Gimble · 2 years ago

    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.

  725. Vinay · 2 years ago

    Hi all, when i tried to view index.html page on my localhost, its showing black(not blank) page.. please help me..

  726. MentalyptiC · 2 years ago

    Trying to get the LightBox to load centred, can’t seem to find anything that changes this

  727. unr · 2 years ago

    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;

  728. zi · 2 years ago

    @MentalyptiC

    to center your lightbox divs, define it in your CSS: example:

    myDiv {

    width: 500px;
    height: 500px;
    display: none;
    position: absolute;
    left: 50%;
    margin-left: -250px;
    z-index:1001;
    

    }

    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.

  729. William Barry · 2 years ago

    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.

  730. Velvet Blues · 2 years ago

    Great job. I’ve created my own adaptation and used it in WordPress to display videos.

  731. paul · 2 years ago

    I dont like it because it mess around with the first lightbox system. Is there away to make both work on the same page?

  732. Ashish · 2 years ago

    This Lightbox simple help world wide web developer.It really fine and very much usefull.

  733. mert · 2 years ago

    how can i use close.gif button

  734. mert · 2 years ago

    Everyone needs a hug.

  735. mert · 2 years ago

    how can i use close.gif button?

  736. Ros · 2 years ago

    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.

  737. zi · 2 years ago

    @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:

    var autoLoadbox='ID_of_div_you_want_to_popup'";
    

    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.

  738. zi · 2 years ago

    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.

  739. vinod · 2 years ago

    popup calender

  740. vinod · 2 years ago

    popup calender for php

  741. pipa · 2 years ago

    hey! how does it come that i can’t set the width of some table-elements.

    stuff like :

    doestn’t work in the lightbox

  742. strony internetowe wroc?aw · 2 years ago

    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!!!!!!

  743. Maxxe · 2 years ago

    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();

  744. Justin · 2 years ago

    How can I reload the document that opened the lightbox?

  745. andr386 · 2 years ago

    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 ;-)

  746. jose leite · 2 years ago

    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

  747. Rob · 2 years ago

    Everyone needs a hug. I love you all.

  748. Cliff · 2 years ago

    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!!!

  749. K-fuel saver tablets · 2 years ago

    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

  750. Mike · 2 years ago

    How would I submit a form that is shown in a lightbox to the page that opened it ?

  751. Mike · 2 years ago

    How would I submit a form that is shown in a lightbox to the page that opened it ?

    Please Help

  752. Matt · 2 years ago

    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.

  753. kingfive · 2 years ago

    Everyone needs a hug.

  754. Wes · 2 years ago

    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?

  755. Ed · 2 years ago

    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?

  756. Jayel Aheram · 2 years ago

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

  757. Jayel Aheram · 2 years ago

    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?

  758. Jayel Aheram · 2 years ago

    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.

  759. robert · 2 years ago

    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

  760. Lukman · 2 years ago

    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?

  761. Djin · 2 years ago

    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.

  762. Niels · 2 years ago

    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!

  763. Ross · 2 years ago

    Nice job :) Will be using this shortly ….

  764. Raman · 2 years ago

    .aspx page can open in lightbox or not???

  765. Edward Windsor · 2 years ago

    Everyone needs a pug.

  766. Micheal Morrison · 2 years ago

    Everyone needs a dump.

  767. Alison · 2 years ago

    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?

  768. toy · 2 years ago

    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);

  769. toy · 2 years ago

    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

  770. Dan · 2 years ago

    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

  771. ratheesh · 2 years ago

    how to work light box in different version of a same website

  772. Verzekering · 2 years ago

    Great script. When lightbox is opened i still see flash components on my site which aren’t fade out.

  773. Daniel Brown · 2 years ago

    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

  774. Ben · 2 years ago

    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.

  775. scissorpie · 2 years ago

    So where do you change the email address for the form?

  776. Rajesh · 2 years ago

    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?

  777. staytrustred · 2 years ago

    car microsoft glass deliver sea yahoo site bag night canada

  778. leslie · 2 years ago

    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.

  779. eno · 2 years ago

    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.

  780. icetoice · 2 years ago

    hello world..

  781. icetoice · 2 years ago

    i see no problem with it.. maybe..

  782. sauddence · 2 years ago

    [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]

  783. ,k · 2 years ago

    thanks!

  784. Brian · 2 years ago

    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?

  785. Valentin · 2 years ago

    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’;

  786. Shannon · 2 years ago

    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.

  787. sklepy internetowe wroclaw · 2 years ago

    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 :)

  788. Shannon · 2 years ago

    Update: Sorry to say, I gave up and ended up using LightWindow instead. Out of the box, it’s launchable with javascript call.

  789. Jeremy · 2 years ago

    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.

  790. thiyagarajan · 2 years ago

    Thank You very much by thiyagu

  791. Kris S · 2 years ago

    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

  792. Why not · 2 years ago

    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 ?

  793. matthew fedak · 2 years ago

    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?

  794. Dave C · 2 years ago

    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.

  795. Dave C · 2 years ago

    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;

  796. Jonas Cronfeld · 2 years ago

    Gotta love it! :-)

  797. Giedrius Kudzinskas · 2 years ago

    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 ?

  798. Brandon · 2 years ago

    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.

  799. Christian · 2 years ago

    Very Cool Script !

    Thank you very much

  800. PHP · 2 years ago
  801. PHP · 2 years ago

    Everyone needs a hug.

  802. Robert · 2 years ago

    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”;

    if (!version) version = detect.charAt(place + thestring.length);if (!OS) {
        if (checkIt('linux')) OS      = "Linux";
        else if (checkIt('x11')) OS   = "Unix";
        else if (checkIt('mac')) OS   = "Mac"
        else if (checkIt('win')) OS   = "Windows"
        else OS                                 = "an unknown operating system";
    }
    

    }

    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 = {

    yPos : 0,
    xPos : 0,
    

    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;}; } },

    activate: function(){
        if (browser == 'Internet Explorer'){
            this.getScroll();
            this.prepareIE('100%', 'hidden');
            this.setScroll(0,0);
            this.hideSelects('hidden');
        }
        this.displayLightbox("block");
    },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; 
    },hideSelects: function(visibility){
        selects = document.getElementsByTagName('select');
        for(i = 0; i < selects.length; i++) {
            selects[i].style.visibility = visibility;
        }
    },getScroll: function(){
        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;
        }
    },setScroll: function(x, y){
        window.scrollTo(x, y); 
    },displayLightbox: function(display){
        $('overlay').style.display = display;
        $('lightbox').style.display = display;
        $('lightbox').style.width = lbw;
        $('lightbox').style.height = lbh;
        $('lightbox').style.top = lbtop;
        $('lightbox').style.left = lbleft;
        $('overlay').onclick = this.deactivate.bindAsEventListener(this);
        if(display != 'none') this.loadInfo();
        if (browser == 'Internet Explorer') Event.observe(document, 'keydown', this.kHandler.bindAsEventListener(this), false);
    else Event.observe(document, 'keypress', this.kHandler.bindAsEventListener(this), false);
    },loadInfo: function() {
        var myAjax = new Ajax.Request(
        this.content,
        {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
        );},processInfo: function(response){
        info = "
    

    ” + response.responseText + “

    ”; new Insertion.Before($(‘lbLoadMessage’), info) $(‘lightbox’).className = “done”; this.actions(); },

    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;};
        }},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)}
       );},deactivate: function(){
        if ($('lbContent')) Element.remove($('lbContent'));    if (browser == "Internet Explorer"){
            this.setScroll(0,this.yPos);
        //  this.prepareIE("auto", "auto");
            this.hideSelects("visible");
        }    this.displayLightbox("none");
    },
    

    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{

    display:none;
    position: absolute;
    z-index:9999;
    margin:-10% 0 0 -15%;
    

    background-color: transparent; text-align:left; }

    lightbox[id]{

    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:.60;
    filter: alpha(opacity=60);
    

    }

    overlay[id]{

    position:fixed;
    

    }

    lightbox.done #lbLoadMessage{

    display:none;
    

    }

    lightbox.done #lbContent{

    display:block;
    

    }

    lightbox.loading #lbContent{

    display:none;
    

    }

    lightbox.loading #lbLoadMessage{

    display:block;
    background-image:url(../images/loading.gif)
    

    }

    lightbox.done img{

    width:100%;
    height:100%;
    

    }

  803. Robert · 2 years ago

    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”;

    if (!version) version = detect.charAt(place + thestring.length);if (!OS) {
        if (checkIt('linux')) OS      = "Linux";
        else if (checkIt('x11')) OS   = "Unix";
        else if (checkIt('mac')) OS   = "Mac"
        else if (checkIt('win')) OS   = "Windows"
        else OS                                 = "an unknown operating system";
    }
    

    }

    }

  804. Robert · 2 years ago

    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.

  805. reney · 2 years ago

    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.

  806. reney · 2 years ago

    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!

  807. wwli · 2 years ago

    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!

  808. Van Hien · 2 years ago

    Nice work!

  809. Kyle · 2 years ago

    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'));

        if (browser == "Internet Explorer"){
            this.setScroll(0,this.yPos);
            this.prepareIE("auto", "auto");
            this.hideSelects("visible");
        }    this.displayLightbox("none");
        location.reload(true); // custom add to force page reload on close
    

    I do not know of an easy way to redirect the url underneath, just simply refresh.

  810. Job · 2 years ago

    Very useful script. And thanks for explaining it how exactly it works.

  811. Blalien · 2 years ago

    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.

  812. Jesse · 2 years ago

    This is one amazing piece of work…. thanks!

  813. BARBARA CONFINO · 2 years ago

    How do I put a vertical scrolling marquee inside a lightbox image?

  814. Thailand · 2 years ago

    excellent post I have tried the methods. the visitors reacted very well at it keep up your good work

  815. sanjeev · 2 years ago

    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

  816. Anum · 2 years ago

    Can anyone suggest , how to put (make visible) scrollbar on lightbox opened window (html page).

    Thanks

  817. Vitaliy Syromyatnikov · 2 years ago

    Thanx for explanation. Now I now how to overlay links at my Money Makers Portal blog!

  818. aaviya · 2 years ago

    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!

  819. Faber · 2 years ago

    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 :)

  820. Russell · 2 years ago

    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?

  821. Jay · 2 years ago

    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,

  822. Free Games · 2 years ago

    Thanks alot, this foot the bill nicely. Will make use of this in my next website implementation.

  823. fahim · 2 years ago

    very bav presentation

  824. Claysson · 2 years ago

    This link works as I want too, very simple to close the lightbox: Cancel

    How do I accomplish this with an asp.net button?

  825. Vick · 2 years ago

    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()

  826. Web Developer · 2 years ago

    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.

  827. Hypotheekrente · 2 years ago

    Thanks alot! Looks and work awesome!

  828. Irina · 2 years ago

    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?

  829. Ghana Technology Blogger · 2 years ago

    Great Stuff. Simple and easy to use.

  830. Ghana Technology Blogger · 2 years ago

    It works perfectly on my test server, but on the live server, the loading message displays forever. Anyone have similar experience?

  831. Web Developer · 2 years ago

    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

  832. sbomberis · 2 years ago

    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.

  833. Irina · 2 years ago

    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.

  834. Irina · 2 years ago

    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?

  835. julie · 2 years ago

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

  836. James · 2 years ago

    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.

  837. Irina · 2 years ago

    James, did you try messing around with the rel = “insert” attribute?

  838. James · 2 years ago

    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.

  839. James · 2 years ago

    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…

    
    <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">
        <a href="javascript:;" onClick="document.recover.submit(); " class="lbaction" rel="insert">Fucking hell</a>
        <input name="button" type="submit" class="btn lbAction" rel="insert" id="button" value="Submit">

    I even came across a post somewhere that said to place it inside a span, which i tried. No dice.

  840. Robert · 2 years ago

    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.

    1. Getting the loading gif animation to work correctly again.
  841. roel · 2 years ago

    Uhh, guys. The insert code doesnt work here :S

  842. roel · 2 years ago

    Everyone needs a hug.

  843. gisho · 2 years ago

    does anyone know ho to upload files from a lightbox

  844. Roel · 2 years ago

    Guys, i can’t insert new page with the class and rel=”insert”

  845. Roel · 2 years ago

    Guys, i can’t insert new page with the class and rel=”insert”

  846. Roel · 2 years ago

    Guys, i can’t insert new page with the class and rel=”insert”

  847. Roel · 2 years ago

    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”>

  848. Jmin · 2 years ago

    I love the script. but i do have a couple problems

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

    2. 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){

       link = Event.element(e).parentNode;
    

    And Replace With

    // Example of creating your own functionality once lightbox is initiated insert: function(e){

       link = Event.element(e);
    

    This worked for me but one person had a problem in some browsers.

  849. re-nature · 2 years ago

    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?

  850. woot · 2 years ago

    Everyone needs a hug Duh.

  851. Alias Knagg · 2 years ago

    About the insert issue.

    try “link=Event.findElement(e, ‘a’);” in the insert function. That was the only relibale trick for me.

  852. gianski · 2 years ago

    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?

  853. Karan Bhonsale · 2 years ago

    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

            <a href="#" rel="nofollow">About Us </a>
            <a href="#" rel="nofollow">Gallery </a>
            <a href="#" rel="nofollow">Contact </a>
            </ul>            If you don't see the Page, then click <a href="about.html" rel="nofollow">here.</a>
                close
    

    The JS will be ——————————————————-

    function init(){
        new Control.Tabs('eventTab');
        $('abtlink').observe('click', function (event) {
            $('lightBox').appear();
            $('f1').src='about.html';
        });
        $('cntlink').observe('click', function (event) {
            $('lightBox').appear();
            $('f1').src='contact.html';
        });
    }
    

    and CSS will be ————————————————————

    lightBox{

    position: absolute;
    top:50%;
    left:50%;
    z-index:1999;
    width:760px;
    height:500px;
    margin:-250px 0 0 -381px;
    border:1px solid #fff;
    background:White;
    text-align:justify;
    

    }

    closeLightBox{

    position: absolute;
    top:50%;
    left:50%;
    z-index:2999;
    width:50px;
    height:50px;
    margin:-250px 0 0 330px;
    cursor:pointer;
    color:darkred;
    

    } .frame{ width:100%; height:100%; display:block; overflow:inherit; }

    It works great

    Karan

  854. dfsdfsd · 2 years ago

    sdffsdfsdfsd

  855. Anish Sneh · 2 years ago

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

  856. Joonas · 2 years ago

    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?

  857. Kaushal Pandya · 2 years ago

    How i can use this with jsp following problems i am getting

    1 EDIT and my java script is not working…

  858. Kaushal Pandya · 2 years ago

    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

  859. Kaushal Pandya · 2 years ago

    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

  860. jack · 2 years ago

    I am not getting anything :)

  861. Nat · 2 years ago

    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?

  862. thiyagarajan · 2 years ago

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

  863. Thiyagarajan · 2 years ago

    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

  864. Sean · 2 years ago

    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.

  865. zaenal · 2 years ago

    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);
            });
        },
    
  866. zima · 2 years ago

    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?

  867. Michael Wu · 2 years ago

    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!

  868. zima · 2 years ago

    Everyone needs a hug.

  869. Vijaycanaan · 2 years ago

    Great effort and wonderful article.

  870. chad tulio · 2 years ago

    Hi Sir This is Really Cool May I Have Permission to used it on my projects. Thanks :)

  871. EC · 2 years ago

    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

  872. deag · 2 years ago

    Hi guys, anyone got lightbox gone wild with actual scriptaculus (and obviously prototype) ?

  873. Chirag Suthar · 2 years ago

    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.

  874. Chirag Suthar · 2 years ago

    Everyone needs a hug.

  875. david · 2 years ago

    how can i use your lightbox into flash as3?

  876. ??? · 2 years ago

    Everyone needs a hug.

  877. annie · 2 years ago

    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!

  878. annie · 2 years ago

    I have tried to use “insert” to load a lightbox within a lightbox. it does not work. Can someone help? Many thanks!

  879. annie · 2 years ago

    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);

  880. wize · 2 years ago

    Great job !!! Tks U w

  881. JackDeth · 2 years ago

    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.

  882. Tom Rawcliffe · 1 year ago

    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

  883. nishizhen · 1 year ago

    Everyone needs a hug.

    Thx,this is great~

  884. vbnmghn · 1 year ago

    Everyone needs a hug.

  885. Alex · 1 year ago

    thanks, nice effect, im use this on my page

  886. sunny · 1 year ago

    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

  887. francesca · 1 year ago

    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

  888. Greg Kindig · 1 year ago

    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.

  889. Matt · 1 year ago

    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:

    • the body tag to have 0 padding and margin
    • the first div to have all the CSS styles defined for #overlay in lightbox.css except for display:none
    • the second div to have all the CSS styles defined for #lightbox in lightbox.css except for display:none.

    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…

  890. ppskin · 1 year ago

    It’s nice!

  891. Gurj · 1 year ago

    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?

  892. Gurj · 1 year ago

    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:

                          deactivate: function(){
        Element.remove($('lbContent'));    if (browser == "Internet Explorer"){
            this.setScroll(0,this.yPos);
            this.prepareIE("auto", "auto");
            this.hideSelects("visible");
        }    this.displayLightbox("none");
        location.reload(true);
    }
    
  893. Jon M · 1 year ago

    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

  894. David · 1 year ago

    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!

  895. Jeffer · 1 year ago

    Everyone needs a hug.

  896. Dan Price · 1 year ago

    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! :-)

  897. Mangal · 1 year ago

    It’s nice.

  898. Mangal · 1 year ago

    I will use it soon.

  899. bogdan · 1 year ago

    Thanks for the script. I will try it.

  900. David · 1 year ago

    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 {

    background:#FFFFFF;
    display:none;
    position:absolute;
    z-index:1000;
    

    }

    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(); }

    function loading_hide() { $("img#loading").hide(); }
    

  901. David · 1 year ago

    well my code tags didnt work … (wish there was a preview here :)) html: (img id=”loading” src=”images/ajax-loader.gif” alt=”loading”/)

  902. Joe · 1 year ago

    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

  903. Joe · 1 year ago

    Sorry here is the Example:

     Close
    
    

    I hope it helps!

  904. Joe · 1 year ago

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

  905. Jim · 1 year ago

    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.