What is it?
A script (JavaScript) that allows you to focus the users attention on a particular portion of the screen. It creates the equivalent of a modal dialog box - this means that while the user looks at this focused part of the screen, they can’t interact with the rest of the screen.
Inspirations
- Lightbox JS: Fullsize Image Overlays: The original…used to show images, like in a lightbox
- Particletree ยท Lightbox Gone Wild!: Took the concept of the original but loaded non-image content into the page using AJAX
- The Lightbox Effect without Lightbox: A simpler approach than the second, this is what I used as a basis for my code
- amix.dk : GreyBox - a pop up window that doesn’t suck: An iframe approach to creating popups on the screen
What is different about this version?
- This version has 4 different types of data that can be loaded into the lightbox:
- String: you can pass a simple string that will be loaded in the lightbox
- Image: it can pickup the url of an image and load it inline in the lightbox
- Local element: you can pass it the ID of an element on the page to be shown in the lightbox. When the lightbox is closed, the element will be hidden and added as the last element within the body
- AJAX: content can be loaded from a URL with AJAX
- Aside from the image version, you can specify the width and height of the lightbox when invoking it
- If the dimensions of the lightbox are bigger than the user’s window, it will automatically shrink the size of the lightbox (for all except image lightbox)
- The functions have all been put inside of a simple class to avoid function name clashes and encapsulate the functionality
- This doesn’t automatically add the lightbox functionality to links with particular text in them (i.e. rel=”lightbox”)
March 5th, 2006 at 10:41 am
Amazing! If you integrated a couple of effects just like http://www.alwaysbeta.com/2006/02/08/building-ab-customizing-lightbox/ did (especially their smooth overlay transition) , it would make it even better.
Didn’t thoroughly test it but will do this week
March 5th, 2006 at 8:58 pm
first bug: sometimes if i click fast on two pictures, they both open in one window (happens rarely but happens). both in IE and Firefox.
also.. drop-down menus are visible in IE.
March 5th, 2006 at 9:06 pm
second bug: if change innerHTML of a div on my page so that content scrolls down, then click on the link, it opens lightbox window just fine (i can see the picture and at the same time scroll up/down on the main page). if then (i use AJAX to change innerHTML, so the page is not refreshed) content is changed to something that its on one page, and I click on the link, the lightbox window opens up and shows a scroll bar on the main page. as if it remembers the browser window state.
p.s. not being anal, I just worked too long in QA
March 14th, 2006 at 11:33 am
Cool stuff ! I integrated it on http://www.dalethorpe.com and it looks amazing … Thanks Greg.
March 16th, 2006 at 9:09 am
Dear Greg,
I find your Lightbox very helpful. However could you please provide some examples on how to call the lightbox from a form submit? I am trying this and it seems that form parameters are not being passed:
Is there a correct way of doing this?
Sharkie
March 17th, 2006 at 7:45 am
Dear Greg,
I have another question. How would you add “loading image” to your script?
Sharkie