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="http://particletree.com/features/css/lightbox.css" type="text/css" />
<script src="http://particletree.com/features/scripts/prototype.js" type="text/javascript"></script>
<script src="http://particletree.com/features/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="http://particletree.com/features/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="http://particletree.com/features/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 attach activate() 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 1 year ago and was filed under Features .
You can follow comments on this entry by subscribing to the RSS feed .

· 523 Comments! ·

  1. Leszek Swirski · 1 year ago

    I’d hit it.

    (In other words, very nice)

  2. Nathan Smith · 1 year ago

    Oh no, the headlights - I’m blind!

  3. flevour · 1 year ago

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

  4. johnny · 1 year ago

    Very nice work.. this is a huge improvement.

  5. John Nunemaker · 1 year 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 · 1 year 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 · 1 year ago

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

  8. Darren Hoyt · 1 year 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 · 1 year ago

    Works great!

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

  10. Sean McBride · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

    It’s Dashboard for the web!

  21. Sumeet · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

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

  29. Ray · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

    realy nice :)

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

  35. Ryan Campbell · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

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

  53. Minor · 1 year ago

    Flo,

    How would you pass a variable from PHP to SWF?

  54. Scott · 1 year 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 · 1 year 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 · 1 year ago

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

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

  57. Drache · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

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

  62. Andor Olosz · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

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

  74. Mart · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

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

  78. Mart · 1 year ago

    Excellent, works a treat now, thank you!

  79. Christian · 1 year ago

    This looks rather similar to subModal:

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

  80. sull · 1 year ago

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

  81. Sal · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

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

  85. Jared · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

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

  89. Mike · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

    What browsers does this work with?

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

  93. ryan · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

    Works great Chris, thanks.

  103. Bhaal · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

    Hmm got it working by adding:

    wmode=transparent

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

  111. Todd · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

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

  115. enej · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

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

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

  119. shirster · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

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

  124. Martijn · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

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

  136. jeff · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

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

    Thank you so much.

  144. jeff · 1 year 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 · 1 year ago

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

  146. Jimmie · 1 year 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 · 1 year ago

    U need a hug.

  148. Chris FR · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

    I view ur side very useful and nice thankinging u .

  154. river · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

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

  162. SPQR · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

    strange problem here…

    this works fine:
    insert

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

    :-?

  167. Fabu · 1 year ago

    O_o

  168. Fabu · 1 year 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 · 1 year 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 · 1 year ago

    Is there a Lightbox Gone Wild wordpress plugin available?

    Thanks

  171. brad_k · 1 year 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 · 1 year ago

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

  173. GamBit · 1 year ago

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

  174. Greg · 1 year 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 · 1 year ago

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

    Is this possible?

  176. Greg · 1 year 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 · 1 year 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 · 1 year ago

    oh….this is very great script….

    thanks for sharing.

  179. bradleyd · 1 year ago

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

  180. George Gaines · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

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

  193. Joseph Farhat · 1 year ago

    This tool is GREAT!

    Can it be used with Visaul Studio 2005 ASP pages?

    Thanks

  194. David · 1 year ago

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

    Thank you in advance!

  195. Brandon Baunach · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

    Everyone needs a hug.

  207. Travis · 1 year 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 · 1 year 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 · 1 year ago

    everyone definitely needs a hug…

  210. Christoph Tavan · 1 year 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 www.nemata.de (soon) and have fun :)

  211. Christoph Tavan · 1 year 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 · 1 year 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 · 1 year ago

    HTML code was splitted.

          
           &lt;input name="login" type="submit" value="Login" onclick="javascript:post();"&gt;
          
         
  214. Brad · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

    Try href=”javascript:;”.

  219. Curtis · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

    That worked here, Jaime… thanks!

  226. leo · 1 year 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 · 1 year 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 · 1 year ago

    Everyone needs a hug.

  229. Lopo · 1 year ago

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

    It’s late I’m tired :)

  230. Cole · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

    Does this lightbox modification work with the new Lightbox 2.0?

  238. Jaisen Mathai · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

    It wen’t wrong=S

    HERE’S THE SCRIPT!!

  257. Eivind · 1 year ago

    It wen’t wrong=S

    HERE’S THE SCRIPT!!
    PUSH!

  258. eric · 1 year 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 · 1 year ago

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

  260. Scott · 1 year 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 · 1 year ago

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

  262. Madval · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

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

  270. Lazymoon · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year 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 · 1 year ago

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

  279. Deepak · 12 months 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 · 12 months 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 · 11 months 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 · 11 months 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 · 11 months 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 · 11 months 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 · 11 months ago

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

  286. Thorsten · 11 months 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 · 11 months 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 · 11 months ago

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

  289. Joe · 11 months 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 · 11 months 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 · 11 months 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 · 11 months 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 · 11 months ago

    Everyone needs a hug.

  294. Dave Verwer · 11 months 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 · 11 months 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 · 11 months ago

    This is soo sweet!

  297. Deepak · 11 months 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 · 11 months 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 · 11 months 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 · 11 months 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 · 11 months 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 · 11 months 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 · 11 months 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 · 11 months 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 · 11 months ago

    No support for IE7 yet?

  306. Jessica · 11 months 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 · 11 months 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 · 10 months 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 · 10 months 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 · 10 months 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 · 10 months 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 · 10 months ago

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

  313. rich · 10 months 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 · 10 months 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 · 10 months 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 · 10 months 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 · 10 months 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 · 10 months 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 · 10 months 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 · 10 months ago

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

    Thank you!!

  321. Mr. Grumpy · 10 months 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 · 10 months 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 · 10 months 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 · 10 months 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 · 10 months 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 · 10 months 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 · 10 months 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="http://particletree.com/features/getTargetUrl()" rel="nofollow">Lightbox Gone Wild</a>
          
         

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

  328. Alan · 10 months 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 · 10 months 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 · 10 months ago

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

  331. Alan · 10 months 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 · 10 months ago

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

  333. Joe Tansy · 10 months 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 · 10 months 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 · 10 months 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 · 10 months 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. · 10 months 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. · 10 months 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 · 10 months 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 · 9 months 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 · 9 months ago

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

  342. ed · 9 months 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 · 9 months 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 · 9 months 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 · 9 months 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 · 9 months 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 · 9 months 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 · 9 months 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 · 9 months ago

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

  350. Bw · 9 months ago

    Everyone needs a hug.

  351. Alexander Trotter · 9 months ago

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

  352. Eric Hynds · 9 months 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 · 8 months 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 · 8 months 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 · 8 months 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 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 · 8 months ago

    Everyone needs a hug.

  357. Jonathan · 8 months 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 · 8 months 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 · 8 months 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 · 8 months 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 · 8 months ago

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

  362. Sergej · 8 months ago

    Best Tool

  363. TeQ · 8 months 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 · 8 months 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 · 8 months ago

    Great stuff.

    im using it now „ thanks to coded

  366. Carl Youngblood · 8 months 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 · 8 months 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 · 8 months 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 · 8 months 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 · 7 months 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 · 7 months ago

    Everyone needs a hug.

  372. Jared · 7 months 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 · 7 months 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 · 7 months 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 · 7 months 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 · 7 months 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 · 7 months ago

    This message board sucks! It keeps ruining my posts.

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

  378. Amit · 7 months 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 · 7 months 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 · 7 months ago

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

  381. Wei · 7 months 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 · 7 months 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 · 7 months 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 · 7 months 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 · 7 months 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 · 7 months 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 · 7 months 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 · 7 months ago

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

  389. Chris · 7 months 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 · 7 months ago

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

  391. miss miserables... · 7 months 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 · 6 months 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 · 6 months ago

    How can I recativate the auto-resize feature?

  394. Dr. Reimund Blumen · 6 months 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 · 6 months ago

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

  396. stop · 6 months 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 · 6 months 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 · 6 months ago

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

  399. plmxptogro · 6 months ago

    jjodfpwk

  400. mike Lorenz · 6 months ago

    Everyone needs a hug.

  401. justchris · 6 months 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 · 6 months ago

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

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

  403. Devin · 6 months ago

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

  404. sarika kulkarni · 6 months 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 · 6 months ago

    Everyone needs a hug.

  406. Renan · 6 months ago

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

  407. Ben Bueno · 6 months 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 · 6 months 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 · 6 months ago

    Everyone needs a hug.

  410. Will · 6 months 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 · 6 months 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 · 6 months 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 · 6 months 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 · 6 months ago

    thanks,
    very good !

  415. haber, haberler · 6 months ago

    good works..
    thanks…

  416. portal.im · 6 months ago

    thanks..

  417. Brian · 6 months 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 · 5 months 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 · 5 months 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 · 5 months 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 · 5 months 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 · 5 months ago

    good job ! realy like this script :)

  423. Yandex 2.0 · 5 months ago

    Thanks for this script!!!! ;)

  424. PohEe.com · 5 months ago

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

  425. test · 5 months ago

    Everyone needs a hug.

  426. Ben Bueno · 5 months 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 · 5 months 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 · 5 months ago

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

    still want licensing info though

  429. gabs · 5 months ago

    Anyway to contol div’s  ?

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

    Within the lightbox

    Any ideas ?

  430. Sebastian · 5 months ago

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

    Sebastian
    buscouniversidad.com.ar

  431. C · 5 months ago

    has anyone tried slimbox? really nice.

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

  432. Michael · 5 months ago

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

  433. Hassan · 5 months 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 months 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 months ago

    Great tutorial. Tnx a lot to share it!

  436. Dimitris Tselios · 4 months 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 months 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 months 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 months ago

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

  440. Sean · 4 months 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 months ago

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

  442. Kevin Miller · 4 months ago

    As promised:

    http://stickmanlabs.com/lightwindow/

    Hope someone finds it useful.

  443. Foxinni · 4 months ago

    Thanks for the advice… great tips!

    Cheers

  444. Scott · 4 months 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 months 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 months ago

    email = admin at ccgdb dot com

  447. Daniel Ulczyk · 4 months ago

    Great tips!
    Nice…
    ;-)

  448. Michael · 4 months 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 months ago

    With IE 7 don’t works

  450. Michael · 4 months 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 months 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 months 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 · 3 months ago

    Hello

  454. erim · 3 months 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 · 3 months 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 · 3 months ago

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

  457. Constantin Ionescu · 3 months 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 · 3 months ago

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

  459. marc · 3 months 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 · 3 months 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 · 3 months 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 · 3 months ago

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

  463. vitto · 3 months 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 · 3 months 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 · 3 months 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 · 3 months 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 · 3 months ago

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

  468. nabil · 3 months 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 · 3 months ago

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

    Handles a variety of media.

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

  470. hcvitto · 3 months 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 · 3 months ago

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

  472. Steve · 3 months 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 · 3 months 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 · 3 months ago

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

  475. Sam Soffes · 3 months 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 · 3 months ago

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

  477. JAnak · 3 months 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 · 2 months 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 · 2 months ago

    @JAnak

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

  480. htp · 2 months 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 · 2 months 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 · 2 months 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 · 2 months 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 · 2 months 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 · 2 months 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 · 2 months 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 · 2 months 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 · 2 months 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 · 2 months 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 · 2 months 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 · 2 months 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 · 2 months 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 · 2 months 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 · 2 months 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 · 2 months 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 · 2 months 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 · 2 months 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 · 2 months 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 · 2 months 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 · 1 month 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 · 1 month 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 · 1 month ago

    Please could someone solve the flashing cursor issue in firefox ?

  503. Kevin D. · 1 month ago

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

  504. Dave · 1 month ago

    Thanks for you great work, I have a work around for variable window sizes, don t know if it s 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 · 1 month 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 · 1 month 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 · 1 month ago

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

  508. Lyn · 1 month 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 · 1 month 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 · 1 month 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 · 4 weeks 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 weeks 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 weeks ago

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

  514. michael · 2 weeks 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 · 2 weeks 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 · 2 weeks ago

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

  517. Tim · 2 weeks 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 · 1 week ago

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

  519. decimus · 1 week ago

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

  520. Morgan · 1 week 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 · 1 week 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 days 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 · Yesterday

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

Comments for this post will be closed on 30 August 2007.

For spam detection purposes, please copy the number 3679 to the field below: