alwaysBETA » Building aB: Customizing Lightbox

Wednesday Feb 8 2006 - 9:10pm

Building aB: Customizing Lightbox

About Sean:
I'm a UX Designer at Google. I work in Mountain View and live in San Francisco. I don't like IE6, but I DO like cookies. The baked kind. That you eat.

Sean's Latest Posts:

View All »

So, there’s been a HUGE buzz lately over Lightbox JS (and semi-modal Javascript overlays in general, as Particletree has recently discussed) as a way to deliver content to the user without a popup or reloading the page. This technique can be successfully used for many types of interactions, but it seems ideally suited for (and Lightbox JS is specifically made for) showing larger versions of images.

You know the standard problem: you want to post an image in a blog or forum post. An image big enough to see enough detail will probably be too big to fit into the flow of the page. A thumbnail is much better, but clicking and opening a popup or just the image with empty white space around it is, well, ugly.

Enter Lokesh Dhakar and his amazing Lightbox JS. Try out the demos on the site. It’s pretty nifty right? There are no popups, and a faded version of the original page remains behind the full-size image. It’s a very immersive experience.

When we built alwaysBETA, we knew that we wanted to include Lightbox for our image thumbnails. Behind the scenes, we use a slightly customized version of the slick ImageManager Wordpress plugin to upload, resize, and automatically generate thumbnails of our images. We wanted something equally slick to present our thumbnails and full-size versions to the public, and Lightbox fits that bill. Well, almost.

We decided to customize Lightbox to our specific application, and there were a few things that we wanted to accomplish. I won’t go over all of my code changes line-by-line, because I don’t want this post to be any longer than it already is. If you’d like to follow along, you can do so with our customized code here. Also, I customized a slightly older version of Lightbox than is currently available. However, most of the general principles should still be the same.

WARNING: If you could care less about Javascript or how we modified the original Lightbox and you just came to get our version and implement it on your site, skip to the bottom section right now! Close your eyes and scroll! Everybody else, carry on…

Integrating an Effects Library

While Lightbox is really excellent, the sudden transition from page to image is a little bit jolting. I decided that integrating a Javascript effects library (in this case, my preferred option, the super-lightweight Moo.FX) into Lightbox would provide a more gentle transition from page to image and back again. (EDIT: The newest version of Moo.FX has a bug which breaks this lightbox modification. Scroll to the bottom of this post for details.)

What I changed:

In the initLightbox function, eliminate any style.display = ‘none’; statements. Instead, create an effect for the element, and use the effect’s hide function. Using display = none will break the effects. For example, the code for adding the effect to the image div looks like this:
```
objLightbox.anim = new fx.Height(objLightbox, {duration: 400});
objLightbox.anim.hide();
```
In the showLightbox function, comment out any style.display = ‘block’; statements. Instead, the animations are triggered to show the appropriate elements. Also, we’ll get rid of the pause function code for IE and use a setTimeout instead. The pause function isn’t threaded, so the browser will hang while it executes. The relevant code looks like this (not necessarily all together in the actual code):
```
objOverlay.anim.custom(0,.8);

//if (navigator.appVersion.indexOf("MSIE")!=-1){
//    pause(250);
//}

setTimeout(objLightbox.anim.toggle.bind(objLightbox.anim),500);
```
Oh yeah, bind is a function provided by Prototype, which Moo.FX uses but Lightbox does not (originally). Don’t try to use that handy method unless you have Prototype included.

Finally, in the hideLightbox function, use the animations to hide the overlay and lightbox instead of the style.display statements. The code looks like this:

//objOverlay.style.display = 'none';
//objLightbox.style.display = 'none';
objOverlay.anim.custom(.8,0);
setTimeout(objLightbox.anim.toggle.bind(objLightbox.anim),200);

Adding a Close Link

In order to close an open Lightbox image, you just click the image. This should be obvious right? The cursor changes to a little pointer and the alt text says so! Well… it turns out that some internet users don’t even know what alt text is, so we figured we should add in a text link that actually says “Close”, just to eliminate the chance for getting trapped inside a Lightbox.

The relevant code should be added in the initLightbox function (where the lightbox is created), right before the piece of code that is commented “create link”:

// create text close link
var objCloseLinkDiv = document.createElement("div");
objCloseLinkDiv.setAttribute('id','lightboxClose');
var objCloseLink = document.createElement("a");
objCloseLink.setAttribute('href','#');
objCloseLink.setAttribute('title','Click to close');
objCloseLink.onclick = function () {hideLightbox(); return false;}
objCloseLink.innerHTML = 'Close Lightbox';
objCloseLinkDiv.appendChild(objCloseLink);
objLightbox.appendChild(objCloseLinkDiv);

Elements at the Bottom Instead of the Top

Another small problem with the original Lightbox JS is that, when you strip off the CSS styles (using something like Firefox’s Developer Toolbar plugin), you’re left with the nasty-looking inserted elements for the Lightbox at the very top of the page. I changed the script to append the additional elements at the end of the page. It would probably never be an issue, but I’ve always been a stickler for sensical page order.

In the initLightbox function, just comment out and add these lines in the appropriate places:

//objBody.insertBefore(objOverlay, objBody.firstChild);
objBody.appendChild(objOverlay);

//objBody.insertBefore(objLightbox, objOverlay.nextSibling);
objBody.appendChild(objLightbox);

Cleaning Up the CSS

The default styles for Lightbox are a little bit messy. A PNG image with opacity is used for the transparent overlay effect, which requires a filter property for Internet Explorer to display it properly. Now that we are going to use Moo.FX, we can just use an opacity animation on the overlay that goes from 0%-80% and back. No transparent PNGs necessary.

Here’s what the new CSS code looks like:

#lightbox{
    background-color:#eee;
    padding: 0 10px;
    }
#lightboxCaption, #lightboxClose{
    font-size: 0.8em;
    padding-bottom: 10px;
    color: #666666;
    text-align: center;
    }
#lightboxClose {
    padding: 10px 0 0 0;
    text-align: right;
}
#lightboxPhoto {
    display: block;
    padding: 10px 0;
}
#lightboxClose a {
    color: #666666;
}
#lightboxClose a:hover {
    color: #333333;
}
#lightbox img{ border: none; }
#overlay img{ border: none; }
#overlay{ background-color: #333; }

Pretty!

Finally, I didn’t like the default loading animation, so I created an Apple-like spinner graphic in Fireworks. I don’t even own a Mac, but I really like the spinner as a visual loading metaphor.

Here’s an example of our customized Lightbox in action:

Shut Up With the Code! I Want to Use Yours!

And now, if your eyes have been glazing over from all this Javascript, and you just want to know how to do this on your own site, it’s quite simple. Just head over to the original Lightbox JS site and follow his easy implementation instructions there. Only one difference, you need to get and include Prototype, Moo.FX base library, and our customized Lightbox to use instead of the original files. That’s all there is to it! Add rel=”lightbox” to your links and away you go!

UPDATE: (10 Feb 2006, 8:12pm EST) Whoops! It appears that the new version of Moo.FX (1.2) causes a bug in our lightbox modification which makes the link inactive after the first time it is clicked. This is (obviously) bad. Thanks to reader Hüseyin for pointing this out to me. I’m currently working on a fix. It shouldn’t be that hard, I just have to figure out what changed in the newest Moo.FX version. I’ll post an update once I (or somebody else) figures it out. Until then, I recommend just using the older version of Moo.FX base library if you want compatibility.

UPDATE: (10 Feb 2006, 9:20pm EST) Ok, I finally figured out what’s going on. There is (what I think is) a bug in the newest version of the Moo.FX base library. Elements with opacity effects no longer have their style.visibility set to hidden once the opacity reaches 0. Normally, this might not have any appreciable consequences, but since the lightbox overlay div covers the whole screen, and the visibility isn’t set to hidden, there is a giant transparent layer blocking the screen! This is why using the new version of Moo.FX with our lightbox causes everything onscreen to become unclickable once a single lightbox link has been opened! Oh no! I’ve sent a bug report to the Moo.FX guys, but in the meantime I would recommend using version 1.0.2 (which you can get here) for the customized lightbox. I’ll let you know once they fix the problem.

UPDATE: (11 Feb 2006, 3:25pm EST) Moo.FX has been updated to v1.2.1 and the visibility issue has been fixed. Our lightbox now works just fine with the newest version, as will any other effects that depended on opacity effects making their elements hidden. Sweet.

UPDATE: (14 Feb 2006) There’s still a slight issue with Moo.FX v1.2.1 and our script. In IE, the overlay won’t show up. This is due to a strange issue with the order of applying opacity and visibility effects in IE, and is detailed below in the comments.

UPDATE: (16 Feb 2006) There has been a slight update to Lightbox. The official version now contains code to add an actual graphical closing button to the top right of the window. I like this change, so I implemented it in our version as well. There is only one change necessary. Remove the code that I added to append a text close link (listed above in the post) and insert this code in initLightbox right before the comment “//create image”:

// preload and create close button image
var imgPreloadCloseButton = new Image();

// if close button image found, 
imgPreloadCloseButton.onload=function(){

	var objCloseButton = document.createElement("img");
	objCloseButton.src = closeButton;
	objCloseButton.setAttribute('id','closeButton');
	objCloseButton.style.position = 'absolute';
	objCloseButton.style.top = 0;
	objCloseButton.style.right = 0;
	objCloseButton.style.zIndex = '200';
	objLink.appendChild(objCloseButton);

	return false;
}

imgPreloadCloseButton.src = closeButton;

You’ll also need to add this bit of code to define the path to the close image at the beginning of the file:

var closeButton = '/path/to/the/image/close.gif';

Finally, and I forgot to mention this before, you’ll also need the loading and close images. You can get this updated version of our customized lightbox in the same place as the old one.

Make a Comment | Trackback |

Comments

So far, 218 people have commented. Will you be next?

1

Thu 9 Feb 2006 - 4:09am by Alex

@Sean: many thanks for documenting this!

I stayed up to the wee early morning hours trying to fix it myself and basically what I did wrong was:
1.) put the loading image in the javascript file (at the end where the “now loading” text appears) - it made the animation play but not in a “delayed” fashion.
2.) I tried to use moo.fx and didn’t realize that I had accidentially put some syntax errors in it.

With your tutorial I got a working example up and running in less than five minutes.

Greetings from Uni Regensburg, Germany

Alex
2

Thu 9 Feb 2006 - 10:44am by Sean

(Post Author)

Hey Alex, great! I’m glad that I could help. Sorry that I kept you up before.
3

Thu 9 Feb 2006 - 11:00am by sull

nice.
have you considered applying moo fx to Lightbox Gone Wild! version?
i’ll take a look.
4

Thu 9 Feb 2006 - 11:17am by drazin

good article. keep up the good work with this stuff. may i suggest, linking to the loading graphic you use?

also i would really like a how-to and implimentation of some cool Moo.fx stuff.
5

Thu 9 Feb 2006 - 11:36am by Sean

(Post Author)

Hey drazin. The loading image is located right here. (Actually, it’s in a couple places, but that’s one of them.)
6

Fri 10 Feb 2006 - 6:33pm by Hüseyin

Hello,

Thanks for the great tutorial but I have a problem. I have applied what is said in here, it works for the first time but when I close the large image, I don’t have a chance to click the thumbnail image again. Did I miss something? Thanks in advance.
7

Fri 10 Feb 2006 - 6:46pm by Hüseyin

UPDATE!!!

I have figured out the problem: It’s the different versions of moo.fx.js. I had first used the version “Sunday, February 05, 2006 v 1.2″ of moo.fx.js and had that problem. Bu then I have noticed that you were using this: “10/24/2005 v(1.0.2)”. So when I used that older moo.fx.js, it worked like a charm.
8

Fri 10 Feb 2006 - 8:01pm by Sean

(Post Author)

Ummmm, I’m confused? Using the new version of Moo.FX *shouldn’t* break anything because he only added a little bit of new functionality. None of the existing functionality in the base library was changed AFAIK.

Yeah, I just updated aB’s version of Moo.FX to the newest and everything is still working like a charm. The version wasn’t the issue.

I DO know that the new version of Moo.FX depends on the newest version of prototype (1.4)… Did you also have that?

UPDATE: No, you do have the newest Prototype. The newest version of Moo.FX does break our Lightbox modification. For now, use the old version of Moo.FX and I’ll work on figuring out what is going wrong. If you figure it out first, let us know! Thanks for the heads up!
9

Fri 10 Feb 2006 - 9:27pm by Sean

(Post Author)

Ok, I figured out what is going on. There’s a bug (I think it’s a bug) in the latest version of Moo.FX. Check out the updates at the bottom of the post to see what’s going on.
10

Sat 11 Feb 2006 - 1:14am by Valerio

Thatnk you guys, you helped me find a nasty bug. Working on it, will publish as soon as possible!
11

Sat 11 Feb 2006 - 6:58am by Hüseyin

Wow, very fast responses from both of you, we are waiting the update then…

And here is my Music Lyrics site which I have integrated the Lightbox for album cover thumbnails, it has fit so well. Thanks again!
12

Sat 11 Feb 2006 - 3:24pm by Sean

(Post Author)

Valerio has fixed the bug and Moo.FX has been updated to v1.2.1. I’ve updated the aB version and everything works fine again with no changes needed. Woohoo!
13

Sat 11 Feb 2006 - 5:27pm by Ridgeback

Hey, great work!!
I have just one problem though - I had the same with the original lightbox but not with lightbox gone wild.
The edges of the page are not covered by the overlay. My site’s in CSS but I’m new to web coding. Please help!
14

Sat 11 Feb 2006 - 5:46pm by Hüseyin

Yeah, that issue is fixed now. But this time the shadow and loading images didn’t work for me in IE 6.0 SP2 for Windows. In Firefox everything seems to be ok.
15

Sat 11 Feb 2006 - 5:55pm by Brian

(aβ Member)

Hüseyin - Love your implementation on the lyrics site - you’re right, it really does fit incredibly well. Thanks for visiting us
16

Sat 11 Feb 2006 - 6:01pm by Sean

(Post Author)

Uh oh. It appears that now there’s an issue with IE compatibility in the new version of Moo.FX … I’ve reverted back to the old version (1.0.2) until I have time to figure out what’s going on again. Darn! I thought we had everything figured out…
17

Sat 11 Feb 2006 - 6:16pm by Ridgeback

Here’s the page with the problem I mentioned:
http://wildatheart.50webs.com/abstract.html
18

Sat 11 Feb 2006 - 7:35pm by Sean

(Post Author)

Hey Ridgeback,

The problem is in your CSS styles. You have defined the body to be 700px wide. The lightbox sizes itself to be as big as the document body, and that means that it only goes as big as your center column, since you are essentially using body like a column. You should wrap everything within body in a div called “wrapper” or something and put the body’s styles on that instead.
19

Sat 11 Feb 2006 - 10:14pm by Rob

Ah uh… It seams, that now with the new Moo.FX V1.2.1, there’s an issue with IE compatibility. I checked the code an found an solution:

Original:
setOpacity: function(opacity) {
if (window.ActiveXObject) this.el.style.filter = “alpha(opacity=” + opacity*100 + “)”;
this.el.style.opacity = opacity;
if (opacity == 0) this.el.style.visibility = “hidden”;
else this.el.style.visibility = “visible”;

My solution:
setOpacity: function(opacity) {
if (opacity == 0) this.el.style.visibility = “hidden”; //ROB
else this.el.style.visibility = “visible”; //ROB
if (window.ActiveXObject) this.el.style.filter = “alpha(opacity=” + opacity*100 + “)”;
this.el.style.opacity = opacity;
//ROB if (opacity == 0) this.el.style.visibility = “hidden”;
//ROB else this.el.style.visibility = “visible”;

I let the “ROB” comment into the code to not forget, what I’ve changed.

After this change, it works fine with the IE6.

Cheerio,
–
Rob
20

Sun 12 Feb 2006 - 1:15am by Sean

(Post Author)

Hey Rob,

Thanks, I’ve actually discovered the same thing and sent an email off to Valerio already with the findings. The thing I still can’t figure out though: WHY does setting the opacity first break the effect in IE? I think it might have something to do with the fact that setting the ActiveX opacity filter first causes a slight bit of delay which essentially skips the visibility code for slower effects (i.e., on larger elements, like the full screen overlay div). It’s a really strange error, but then again, many of IE’s errors are far from “boring”.
21

Sun 12 Feb 2006 - 9:17am by Ridgeback

Hi Sean, thanks a lot - got it sorted
22

Sun 12 Feb 2006 - 12:46pm by Rob

Hi Sean,

Yeah, thats the point I don’t understand exactly why it happen too. The only thing I can imagine is that the setting of opacity over the activeXObject takes to long, maybe asynchron or it affects in a special way the internal structures for opacity an visibility…
But like you said, IE’s errors are far from “boring”

Lets hope the IE7 can suprise us in a positive way!
23

Sun 12 Feb 2006 - 11:15pm by Mark

Hi Guys:

Wonderful efforts! I’m afraid that I that although I can get code to work in firefox I cannot achieve the same results in IE 6.0.2 -
I am opening the image from a text link and although the image opens, it does so without the opacity effect and will not close. I have a gallery that I’d really like to use this on but thought I’d experiment here first:
http://www.3854beethoven.com
24

Sun 12 Feb 2006 - 11:50pm by Mark

For clarity I have setup an example here: http://www.3854beethoven.com/lightbox_test.html

Any advice would be appreciated.
25

Mon 13 Feb 2006 - 1:52am by Sean

(Post Author)

Hey Mark,

See Rob’s comment above (#19) for a fix for the IE bug. It turns out that setting the opacity via ActiveX in IE can cause the visibility setting below to skip (or conflict) in such a way that the overlay does not appear. Just changing the order of the lines in the Moo.FX library or using the older version (the one that we are using, 1.0.2) will fix the problem.
26

Mon 13 Feb 2006 - 8:31am by Charles Roper

I’ve just implemented your customised version of LBJS (many thanks!) on a site I’m working on. I’m using the thumb.php script from Photostack to pull the images directly from a Photostack gallery complete with auto-resizing. Example here:

http://www.wildrye.info/reserve/explore/ternery_pool.php

Try clicking on some of the links with the little image icons next to them.

One problem: the close box in Firefox doesn’t align right (but it does in IE and Opera). I’ve mucked about with the CSS a bit but to no avail. Looks like the hard-coded style attribute that gets applied to the caption to make it stretch the width of the image might make it work?
27

Tue 14 Feb 2006 - 12:40am by Sean Foushee

I’m new to the Prototype and Moo.fx libraries so perhaps my comment will be out of place and appear basic, please pardon me if it is… while working on getting this script to work properly, after making the changes to the original lightbox.js file, I found that linking to the JS libraries in the following order is important for its overall functionality:

prototype.js
moo.fx.js
lightbox.js

I had two of those fields out of order and while I got to see a short flash of the opacity filter kicking in the page automatically reloaded with the image, just as it would with the anchor tag without rel=”lightbox”. Hopefully that helps the newbies… like me.
28

Tue 14 Feb 2006 - 12:47am

(Trackback)
The Web Design Blog

[…] Last week I blogged about LightBox JS. This technique can be successfully used for many types of interactions, but it seems ideally suited for (and Lightbox JS is specifically made for) showing larger versions of images. Be sure to check out the examples. « Seven accessibility mistakes (part 1 and 2) […]
29

Tue 14 Feb 2006 - 12:52am by Cheyne

You have been blogged about on www.thewebdesignblog.com
30

Tue 14 Feb 2006 - 3:27am by Todd

I don’t know what I’m doing wrong. I got the original lightbox to work perfect, but when I added the moo.fx.js, prototype.js, and your modified version of lightbox.js and the modified css for lightbox it doesn’t work. It just simply goes to another page with the larger picture displayed.
The page i’m having trouble with is http://www.wakeboardhead.com/lbt/lightboxtest.htm

I’m probably just overlooking something simple.. or maybe not.
Please help. Thank you.
31

Tue 14 Feb 2006 - 1:35pm by Sean

(Post Author)

@Sean: Yes, thanks for the clarification. It is important that you include the Javascript files in this order, becuase Moo.FX is built on top of Prototype, and our customized lightbox uses both.

@Cheyne: Thanks for the heads up!

@Todd: Actually Todd, you have fallen victim to the error noted by Sean above. You are including the JS files in the wrong order. The script tag for Prototype must come first, then Moo.FX, and finally the customized Lightbox. Changing this should fix your issue. Please let me know.
32

Wed 15 Feb 2006 - 2:22am by Todd

That was it! Works like a charm now. Thanks a ton!
33

Wed 15 Feb 2006 - 3:38am by Charles Roper

It’s worth pointing out (I don’t think it’s been mentioned yet?) that you can actually use the moo.fx prototype.lite library (it’s in the moo.fx package) instead of the full-blown prototype. The lite version only weighs in at 4KB as opposed to Prototype’s whopping 49KB.

I’d also like to echo sull’s comment (#3): integrating these effect with Particle Tree’s ‘gone wild’ lightbox would be awesome. LBJS seems to going off in so many (exciting) directions at present - I hope it all get co-ordinated into one place eventually.
34

Thu 16 Feb 2006 - 8:08am by Rob

Hey Sean

I have a little problem and hope, you can help me…
I’m using the lightbox for a gallery project. Now I have sometimes 70 images on one page. Now is one thing disturbs the flow off the page:

preloading of all 70 images through lightbox takes to long.

Now my question, is it possible to prevent lightbox not to load the images onload, but on click. I’ve tried to change it, but had no luck…

That would be speed up our site enormely!

Thanks a lot!
Cheers.
35

Thu 16 Feb 2006 - 8:13am by Rob

Hey Charles

For your problem with your close box alignement. Its a CSS style problem. If you want to align right, you have to change the “lightboxClose” class definition in lightbox.css:

#lightboxClose {
width:440px;
padding: 10px 0 0 0;
text-align: left;
}

Where width gives the width of your *gallery-image.

I know, its not perfect, because you have to now the width of the image, but its a fast change for your purpose.

So if somebody knows, how to change this without giving the width of the image, nor needed to know, I would be happy to hear from you

Cheerio!
36

Thu 16 Feb 2006 - 11:46am by Sean

(Post Author)

Hey Rob,

Actually, I think that your problem is already solved. Lightbox JS doesn’t preload all the images on the page. It only preloads the animated loading image (in our case, the spinner gif) on page load. This is the “var imagePreloader” that you see in the initLightbox function. It only preloads the loading image.

Each individual full-sized image is loaded once the user clicks on the link, and displayed as soon as it loads. This is the “var imgPreload” in the showLightbox function, which is called from each link’s onclick.

So, if you’re having speed problems with your site, it’s not because Lightbox is preloading all of the images. Part of the beauty of Lightbox is that it loads images in only as needed. It must be something else that is causing the slowdown. Possibly just loading 70+ images onto the page in the first place is slow?

It might also be setting all of the onclick functions on the page, as I’ve heard that setting lots of events can have an effect on speed. However, I’m not sure how many you need to set to notice a difference. Anybody have any theories?
37

Thu 16 Feb 2006 - 12:52pm by Rob

Hey Sean,

Thanks for your fast comment.
Hmmm, it must have to do something with the lightbox, because when I deactivate / remove lightbox, the loading of the site is noticable much faster. So it looks like, that your thought, that the setting of onclick-events creates this lag looks very realistic.

I’ve done just some tests with/without onclick-events and you’re right. With the events the loading of our page took double the time as without events.

Hmmm… Has somebody any solution for that or any ideas?

Cheerio!
38

Thu 16 Feb 2006 - 2:54pm by Sean

(Post Author)

In principle, the click events could be handled by a single event handler on the body instead of an event handler on each of the photos. If an event isn’t handled by an element, then it can be handled by a parent as well. I know that some friends of mine have had major speed improvements in a project that they’re working on thanks to using a generic event handler on the body.

I’m considering writing a new version of Lightbox that is built on top of Prototype, has built-in animations, and has some of the other improvements that have been discussed here. You also might consider suggesting this issue and possible change to the original creator of Lightbox, Lokesh Dhakar.
39

Thu 16 Feb 2006 - 3:22pm by Sean Foushee

@ Rob: thanks for the patch to moo.fx.js, that little bug was killing me.

At this point I’ve only seen two issues with the modified Lightbox:

1. In Firefox the close window link appears on the left not the right (CSS issue) , and…
2. When using Lightbaox in conjunction with sIFR Safari sometimes allows the replaced text to bleed through and Firefox (Mac) completely looses the rendered flash upon initiating a light box leaving the reader without the replaced text upon closing the lightbox window. (Issue with browser’s Flash rendering)

@ Sean: Thanks again for this wonderful modified Lightbox
40

Fri 17 Feb 2006 - 5:27pm by Charles Roper

Right, I’ve worked out a simple fix for the close box refusing to align-right in FF. In the //prep objects variable declarations at a start of the showLightbox() function, add this to the var declarations:

var objCloseLinkDiv = document.getElementById(’lightboxClose’);

Then add the following within the imgPreload.onload function:

objCloseLinkDiv.style.display = ‘block’;
objCloseLinkDiv.style.width = imgPreload.width + ‘px’;

This should force the width of the div which contains the close box to the same width as the image, thus enabling it be be aligned right. See the result at the link I posted before. View or grab the updated js here: http://www.wildrye.info/_js/lightbox/lightbox2.js
41

Sat 18 Feb 2006 - 10:01pm by kshipp

Hi,
I’ve spent most of the day on trying to get this to work. It would be great if you could just provide a zip file that has everything in it, including a simple test page.
My current problem is that I want to use the circling apple animation (as the loading image). ……but when I use it, the image is compressed into a tiny square (about the size of the bar loading image). How do I fix this bug?
42

Sat 18 Feb 2006 - 11:19pm

(Trackback)
diatribe » Blog Archive » Of Interest v20060218.2

[…] Another Lightobx modification at awaysBeta, this one uses moo.fx. […]
43

Sat 18 Feb 2006 - 11:55pm by Sean

(Post Author)

@Kelly:

Well, in the bottommost update there are links to the modified lightbox.js as well as the two images. Redistributing the two associated libraries would just be redundant, since they are already available and linked from this post.

The one thing you may need to change is the paths to the loading and close images right at the top of the lightbox.js file. They need to be correct paths for the place you put them on your server. That might be your issue right now, I’m not sure. If you’re using the same lightbox.js as we are, have the paths to the images right, and have included all the js files in the right order, then everything should work. If not, then please let me know and I might be able to give you some more help.
44

Sun 19 Feb 2006 - 12:41am by kshipp

Thanks for the reply. I copied everything as it is here and made the changes for the right image, but like I mentioned, the correct loading image is there, but it’s “flattened” as if it’s dimensions are fixed - seems to be similar to the rectangular loading gif used on these sites.
Here’s the test I was doing:
http://www.kellyshipp.com/_new_images/test.htm
45

Sun 19 Feb 2006 - 1:03am by Mike

Would like to say thanks to all involved in creating this. It seems to be exactly what I need to redo a friends gallery with. Took me a short while to get it running, and it’s working quite nice.

I noticed a few minor issues that I haven’t seen mentioned yet. I’m using FF 1.0.7 with XP SP2. Clicking the first two pics on the right of the page will activate the lightbox.
http://www.flyonthewallphoto.ca/main.html

When clicking the Close Lightbox link, the bottom-border of the link seems to remain on the screen even after the lightbox has disappeared. Clicking the image itself to close does not cause this effect. Scrolling it off the page and returning seems to remove the line.

Second, after closing the lightbox, it seems to retain focus from the mouse. If I close it and then attempt to scroll down on the page, it will seem as if nothing has happened. Opening up another lightbox, the contents will be scrolled, possibly totally out of view. This can make it almost impossible (at least to many) to close the lightbox without refreshing the page.
To really notice what is happening do the following:
-open lightbox
-close lightbox
-scroll down just a few clicks with the mouse wheel
-open lightbox (it should now be partially scrolled out of view)
-close lightbox
-scroll up just a few clicks like before
-open lightbox (should now be corrected)

Not sure if anything can be done to remedy, just thought I’d let you know. Thanks again!
46

Sun 19 Feb 2006 - 2:41am by Kae Verens

Looks fantastic. I’m already thinking how to merge some of that code with my CMS’s library.

There is an issue with Konqueror, though - Konqueror does not support Opacity.

However, there is also a workaround. Here is something similar which I built a while back - not as sophisticated as yours, but the opacity works in all browsers that I have tested: http://verens.com/archives/2006/01/19/shading-the-background-of-a-document/

Kae
47

Sun 19 Feb 2006 - 4:53am by Gonzalo

There’s something I’ve noticed in all demos of these modifications of Lightbox. The spinner image is clickable and closes the dark semitransparent layer. This, I imagine, is so that if there’s any problem loading the image, the user can go back and is not stuck there.

That’s ok, but… If the user clicks the spinner and the image does load, the dark semitransparent layer closes but the image shows.

Wouldn’t it be more logical that if the user clicks the spinner the whole process be discarded?
48

Sun 19 Feb 2006 - 7:57am

(Trackback)
Project :: penkiblog » 本日書籤 (偷懶版)

[…] http://www.alwaysbeta.com/2006/02/08/building-ab-customizing-lightbox/ […]
49

Sun 19 Feb 2006 - 12:52pm

(Trackback)
Ajaxian » Lightbox.js with moo.fx

[…] Sean McBride at alwasybeta has a detailed entry describing their modification of the lightbox.js tool we covered earlier. For use at alwaysbeta, Sean integrated moo.fx, added a close button, did some general code cleanup, and added an attractive Apple-like spinner graphic for the loading image. […]
50

Sun 19 Feb 2006 - 2:01pm by Sean

(Post Author)

@Kelly: When I go to your test page, I see the loading image as the right size. It doesn’t look squished or anything. Have you fixed it already?

@Mike: Sorry, but I can’t seem to replicate either of these error. I’m using Firefox 1.5.0.1 though, so it could be different between browsers. At any rate, tests for both of the things that you mentioned (using the link that you provided) turned up zilch. One thing to keep in mind is that the lightbox div can’t have any top/bottom padding or border. If it does, then the height effect won’t totally hide the div.

@Gonzalo: That’s a very good point. It would make a lot more sense to discard the whole loading process once the loading image is clicked. This behavior is a part of the original Lightbox JS, not my modification. It would be a good change to suggest to Lokesh over at the original Lightbox JS page…
51

Sun 19 Feb 2006 - 2:19pm

(Trackback)
SIXFACE » Blog Archive » links for 2006-02-19

[…] alwaysBETA » Building aB: Customizing Lightbox (tags: javascript howto) […]
52

Sun 19 Feb 2006 - 3:33pm

(Trackback)
aNieto2K » Y seguimos aqui

[…] ¿Os acordais de LightBox? ¿y de Moo.fx? Pues ahora lo han fusionado para darle un aspecto más dinámico a las imagenes. […]
53

Sun 19 Feb 2006 - 3:42pm by drazin

question:
Ok, ive added the 3 js files to my header and i know they work becuase they show up in the source, and ive added rel=”lightbox” to the link from my thumbnail, the problem is when i click on the link to the image, for a split second, i see the overlay, then the target image shows up in its own page!? what am i missing? the page im testing it on is not work safe, so i wont paste a link to it, but any help would be great!
54

Sun 19 Feb 2006 - 9:33pm by Jan Brašna

Great overhaul of a great lightbox. I really like the implementation.

I’ve come across two issues:

1) Opera has a black overlay (doesn’t know opacity, PNG eliminated from CSS)

2) In my case the lightbox was weirdly flickering in IE and after scrolling out the image appeared back and it wasn’t able to close it. I was playing about three hours with it but nothing helped. So i had to disable it for IE and let only the fallback link to the image.
55

Sun 19 Feb 2006 - 10:25pm by kshipp

No, I didn’t make any changes. Since then, I just decided not to use it at this time - main reason - it needs a Prev/Next button so you can traverse through the gallery images instead of going back to the thumbnails again.
56

Sun 19 Feb 2006 - 10:59pm by Sean

(Post Author)

@drazin: I talked to you via email. The problem was not including the js files in the proper order.

@jan: Yes, I’m aware that the opacity effect doesn’t work in opera. You can use the png background from the original version instead and change the opacity effect to go from 0 to 1 instead of 0 to 0.8. However, this was running much slower, so I decided to go with CSS opacity instead of a PNG. Opera people just get slightly less pretty.

The weird flickering in IE is probably caused by the fact that the newest version of Moo.FX does some weird things with full-screen opacity settings (some sort of lag issue.) See comment #19 on this post where Rob describes a change to Moo.FX that will make IE behave…

@Kelly: I wasn’t talking about your real site. I was talking about the test link that you posted earlier. I went to the test page, my version of lightbox was there, and everything appeared to be working perfectly (except for some missing styles.) The loading image was showing up at the proper size. So, if you were seeing something different on that test page, it might be your browser. I’d be curious to know which one you are using…
57

Sun 19 Feb 2006 - 11:24pm

(Trackback)
The Exile » links for 2006-02-20

[…] alwaysBETA » Building aB: Customizing Lightbox (tags: lightbox moo.fx) […]
58

Mon 20 Feb 2006 - 1:15am by Jan Brašna

When I really need it, I’ll add it specifically for Opera

The IE issue I came across is not the one from #19 - I tried MooFX 1.0.2, 1.2, 1.2.1 etc. and still the same. The fix is for opacity changes but my problem is with sliding in and out - the overlay and fading is fine, but the image behaves weirdly and keeps up displaying. I played for a while with it and it looks like an interferention with other JS and some CSS cascade/z-index/positioning stuff. I ruled IE out so it’s fine. I just wanted you to know that it may happen.
59

Mon 20 Feb 2006 - 1:21am by Sean

(Post Author)

@Jan: Oh, I bet I know what it was! Did you add any top-bottom padding or borders to the lightbox div? The height effect doesn’t like padding or borders on the axis that it’s changing. That may have been it…
60

Mon 20 Feb 2006 - 3:23am by Gijs

Hello,

Could somebody tell me how to activate a litebox from the body onload=”" action, i tryed and tryed but i don’t know jack **** about javascript classes.

it could be pretty handy for error notifications, or wrong browser notifcations.

Thanks In advance
G
61

Mon 20 Feb 2006 - 3:32am by Sean

(Post Author)

@Gijs: Well, it’s pretty simple in theory. Just put a showLightbox(linkElt) function call for the onload (passing it a ref to the link you want it to show the photo of). In practice, I’m not sure if the lightbox will have loaded in time to display properly at onload. You might want to check out Particletree’s Lightbox Gone Wild.

On another note, I’m not sure if lightbox is best way to show wrong browser notifications, since it’s likely that if they have a “wrong browser” then lightbox probably isn’t compatible either.
62

Mon 20 Feb 2006 - 5:34am

(Trackback)
Santhosh Dot Net » Blog Archive » Links for 2006-02-19

[…] 9 - alwaysBETA » Building aB: Customizing Lightbox (tags: howto javascript) […]
63

Mon 20 Feb 2006 - 10:25am

(Trackback)
Ajax Info » Lightbox JS Weiterentwicklung: Integration mit Moo.FX

[…] Link: http://www.alwaysbeta.com/2006/02/08/building-ab-customizing-lightbox/ […]
64

Mon 20 Feb 2006 - 11:38am

(Trackback)
Musounderings » Blog Archive » Customized Lightbox for Larger Image

[…] http://www.alwaysbeta.com/2006/02/08/building-ab-customizing-lightbox/ […]
65

Mon 20 Feb 2006 - 1:09pm by Andy Nguyen

Can you make the “Enter” and “Esc” keys close the image as well? I know clicking on the image to close it is good enough but I’m just thinking from a “trying not to use the mouse” perspective. It’d be great if you can add that.
66

Mon 20 Feb 2006 - 1:46pm by Jan Brašna

Definitely, it’s most likely an effect of the inheritance. Styles for the lightbox are not explicitly redefined, but may be a subject of some unintended cascade. Thanks for confirming. Will elaborate.
67

Mon 20 Feb 2006 - 2:05pm by Sean

(Post Author)

@Andy: That would be a cool idea. However, I don’t really want to “fork” development of Lightbox JS off into different versions. Basically all I’ve done is take the original and add some animations and clean a few things up. If you have suggestions on basic lightbox functionality, I would suggest them to Lokesh over on his site so that they can be considered for inclusion in the official version.

@Jan: Yes, that’s probably it. If you just explicitly define no top/bottom padding or borders for the lightbox div, it might fix the problem.
68

Tue 21 Feb 2006 - 7:15am by Philip

I am having trouble with the images not folding out. And after I close them, the lightbox image still resides on the website.

I’ve been trying to figure it out for over 2 hours now and I haven’t gotten anywhere. Help!

http://republicum.se
69

Tue 21 Feb 2006 - 11:27am by Sean

(Post Author)

@Philip: When I follow that link, your lightbox appears to be working fine to me. The images are popping up and going away just like they should be. Did you fix this already?
70

Tue 21 Feb 2006 - 7:17pm by Tonny

I have similar problem on my site. Try to click galleri visning in the menu and click one of the thumnails..

The strange behaviour only ocours in internet explorer
71

Wed 22 Feb 2006 - 8:01am by leo

hello there,
i like your modification pretty much - but i do also like particletrees 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
72

Thu 23 Feb 2006 - 10:20pm by Mike

Hi guys, nice extension of Lokesh’s script here. I am the lead developer for Plogger (http://www.plogger.org) and I am attemping to use your modifications to update the Lightbox theme we have planned for our next release.

However, I noticed that you have removed some pretty important code from Lokesh’s original implementation. There are a couple of lines of Javascript that hide all of the SELECT boxes on the page before loading the Lightbox. Well, the reason that SELECT boxes are hidden is because they “peek through” the lightbox in Internet Explorer, and the result is pretty ugly.

We have a lot of drop-down boxes in our themes, so I noticed it right away. However, this is probably something you guys simply missed in your testing. Is there a reason you omitted this code, or was it a mistake?
73

Thu 23 Feb 2006 - 10:34pm by Sean

(Post Author)

Hey Mike,

I don’t REMEMBER getting rid of that code, which isn’t to say that I didn’t actually get rid of it. I tried not to modify too much that I didn’t have to, but I did change a few things (like eliminating the use of the pause function in favor of a settimeout). Is it possible that we modified a version of Lightbox that didn’t have that code in it yet?

At any rate, it shouldn’t be that hard to add that code back in, or alternatively, add our animation code into the most recent version of Lightbox instead.

The popularity of this has really blown up. I should probably come back to it at some point and recustomize the newest version of Lightbox and package everything together with an example page…

Please shoot me an email if you have any specific questions. I bet you guys won’t have many problems figuring it out. It will work great with Plogger!

By the way, when is the Wordpress integration coming for Plogger? I really want to integrate it with my personal blog, but I’m lazy!
74

Fri 24 Feb 2006 - 11:59am by Mike

Coming soon my friend =)

We had a Wordpress Plugin pretty much 90% done. Then they threw 2.0 at us so we have a few more things to do. Hopefully we can release it with the next version of our product, which should be coming soon!

In terms of the integration with Plogger, it went pretty smoothly except for a few things. For the closing/loading/overlay images, is it required that you specify the absolute path to the image files? I thought just using var close=’close.gif’ would work (or even a relative path?), thinking that it would find the file since the graphic and the javascript file were in the same directory (like CSS), but no dice. We want this to be an ‘Easy Activate’ theme, where the user doesn’t have to manually edit the pathnames in the javascript to get it to fully work. We have template functions to determine the variable installation path in PHP, but we currently don’t have a way to get that information inside a Javascript file. Let me know if you have any thoughts on this.

Also, the overlay wasn’t appearing in IE, but I have a feeling the answer to that is somewhere in the sea of comments above =)
75

Fri 24 Feb 2006 - 12:49pm by Sean

(Post Author)

@Mike:

Great! I can’t wait for the Wordpress integration!

I believe that the paths do actually have to be absolute, because it’s not relative to the script path, but to the page’s path. One way to get around this would be to add an action when installing the plugin that does a dynamic write to the JS files with the absolute paths. Another (easier but less clean) option would be to define those variables in a script tag in the header before you include the lightbox.js.

Finally, the answer to your IE overlay not appearing problem is (probably) in comment 19 above. Take a look and hopefully that will fix things. (It’s a small issue with Moo.FX and full-screen opacity effects in IE.)
76

Fri 24 Feb 2006 - 3:15pm by leo

hey,
there has been an update to moo.fx
to quote valerio:
“I’ve fixed some bugs in moo.fx.pack (thanx for the comments), and Switched the opacity/visibility order in moo.fx (for a better compatibility with Customizing lightbox). Get the new version!”
-> http://mad4milk.net/entry/moo.fx-forums–and–1.2.2/

did anybody try to combine particletrees’ and this solution?
leo
77

Sat 25 Feb 2006 - 5:02pm by Ha

It will not works nice as expect if your page have a flash movie :-). Do you have any suggestion to this kind of exception?
78

Sat 25 Feb 2006 - 8:36pm

(Trackback)
fadtastic - a multi-author web design trends journal » Blog Archive » The Best Design Resources you can Clear in One Sitting

[…] Ajax/New school javascript - Ajaxed’s Keyword Suggest - Moo.fx is so nice. and tiny. - Rico: javascript for rich internet apps. - Alex Bosworth’s 10 places you must use ajax - Edit in Place with javascript and CSS - Mastering AJAX part one, and Part Two, by IBM. - Ajax Matters’s list of sites using ajax - Lightbox, which I’ve found entirely too useful in a few projects now. Also make sure to check out Customizing Lightbox - 30-second AJAX tutorial - AJAX tutorial with Prototype - javascript live search is something I’ve been meaning to implement for awhile now […]
79

Sat 25 Feb 2006 - 9:11pm by Mark L.

Great addition and everything’s working fine EXCEPT!

I am feeding dynamic content to my page and display it by changing .innerHTML of a

after that, I immediately run initLightbox() since lightbox cannot obviously recognize rel= that were not on the page when it ran.

this worked with Lokesh’s original script, however, with your addition this does not work.

could someone PLEASE look into this?
80

Sun 26 Feb 2006 - 12:36am by 6ixty

one problem peoples. looks excellent, but…what happens when you try to print the graphic? so much for css and usability…
81

Sun 26 Feb 2006 - 12:50am by Sean

(Post Author)

Right click, view image, file, print. Problem solved.
82

Sun 26 Feb 2006 - 4:03am by Jeff

I am having a problem within IE. Everything works fine except when you attempt to close the image, it does not go away. The overlay fades away, and the image rolls up, but then popups back down. It is like it isn’t getting hidden for whatever reason.

I don’t have a link to the problem at the moment, as I am suppressing the functionality in IE (since this is a production site), but I will get a test site setup to demonstrate the problem if no one knows a solution off hand.
83

Mon 27 Feb 2006 - 5:17am by wendy

Well, I tried the fix at #19 but no luck. Works sweet in FF but in IE6 I only get the overlay and the loading image though I notice it does not animate so maybe that is part of my problem? Anyway, no larger image appears for me in IE.

Take a look here if you like:
http://www34.brinkster.com/zubird2/CSS/nav_06/assignment.asp
84

Mon 27 Feb 2006 - 12:57pm by wendy

I guess I should add that I tried the modifications posted here by Sean (thanks Sean!). I later tried the fix in #19 but that actually broke it in FF and IE6 (no overlay, just an image at top left of browser).

I have the prototype, moo.fx (latest version) and lightbox script files, in that order on my page. I have read all the posts here and at m4m but have not found the answer. I thought I saw a post about reverting back to the previous version of moo.fx but I could not find that version anywhere on their site.

BTW, Sean, this was some really great stuff, but I get the same result with your alwaysBeta image above with IE6 on XP pro - SP2. Please let us know if you figure out a solution. Again, the overlay shows up and the loading image appears but does not animate so I guess it just gets stuck there cuz no larger images appear.

Awesome job guys!

Wendy
85

Mon 27 Feb 2006 - 1:52pm by wendy

Problem solved!

Hi Sean! I think if you apply moo.fx.pack.js, isses with IE6 will go away. I did not see this pack being used in any of the code I was trying to “emlulate” and so did not think it was necessary. After noting the build dates, decided to drop it in and voila!

HTH

Wendy
86

Mon 27 Feb 2006 - 2:08pm by wendy

I lied…I was no longer using your modifications. Noticed that the swipe effect was gone and realized I had put the original moo.fx in there.

Sorry for the previous, inaccurate post. I guess I might have to settle for no transition, at least in IE6.

I will keep coming back to see if it gets resolved. Your version, btw, validates in both xhtml strict and CSS 2.1, which is what I am after.

Thanks again!
87

Tue 28 Feb 2006 - 2:16am

(Trackback)
alwaysBETA » Best Comment Threads Ever

[…] You know, there is nothing quite like a good comment thread. Sean’s Customizing Lightbox post is at 86 comments and counting - but our comment threads are nothing compared to the one’s you’re about to see. […]
88

Tue 28 Feb 2006 - 7:49am by todd serpa

hey man,
excellent work and thanks for being so active and helpul to all of us asking questions. speaking of questions…i got it running and am mostly pleased but i would like to figure out how to make one minor mod. on the initial click which shows the overlay and the image they happen in that order; overlay fades in, image expands after a nice little pause. when the user closes the image the overlay fades out first then the image collapses. no surprises there. i would like to see the image collapse first, slight pause, overlay fades out. i have a sort of working version posted here : http://taggphoto.com/zp/blurp/

i got it to *work* by using setTimeout on the overlay animation, but i had to use the toggle method and there is a flicker where the overlay becomes 100% opaque then fades out. what am i doing wrong? i am using moo.fx 1.2.2, prototype-lite and my ham-handed attempts to mod your code can be found here : http://taggphoto.com/zp/themes/coldMilk/js/lightbox4.js

thanks.
89

Tue 28 Feb 2006 - 11:34am by Jaik

There is a bug in IE5 (yeah, I know, IE5) that causes the image to constantly be present in the middle of the page once it has been shown for the first time. This doesn’t happen with the standard Lightbox script, just this moo.fx based version.

Anyone else encountered this problem? If so any fixes or ideas of why it happens?
90

Tue 28 Feb 2006 - 11:37am by Jaik

Sorry, I meant IE5.5

I’m using Prototype 1.4 and moo.fx 1.2.2
91

Tue 28 Feb 2006 - 1:41pm by Sean

(Post Author)

@todd: You just need to use .custom(.8,0) or something like that on the opacity effect instead of toggle. Toggle takes the effect from 1 to 0, but the opacity is achieved by not bringing the value fully up to one using a custom method call. It must be brought down in the opposite way. The reason that I didn’t animate things in that order was becuase I thought it looked really bad to show the loading image at that point as well.

@Jaik: I hadn’t seen this, mostly because I have no access to IE5. I really don’t plan on debugging for it either (6 is hard enough), but if you or anyone else finds out anything, please let the rest of us know!
92

Thu 2 Mar 2006 - 11:59am by Usayd

That is a great use of moo.fx, nice one
93

Thu 2 Mar 2006 - 11:56pm by Lenny

can someone please explain why I get a strip down the right side of my screen (about 60px wide) that the overlay does not cover?

body{ margin: 0; } does not help

happens only in Explorer.
94

Fri 3 Mar 2006 - 12:09am by Lenny

nevermind.. found the problem - padding has to be 0 as well
95

Sat 4 Mar 2006 - 12:07pm by Lenny

This was already mentioned in one of the posts but dosn’t seem to be fixed: drop-down menus are not disabled or covered by the overlay image in Internet Explorer (works ok in Firefox). not only do they show through the displayed image but they also can interfere with the whole operation of the script.

for instance, i use a drop-down menu to select the number of photos to show on the page. the gallery uses AJAX to get the content and since drop-down menus are not disabled, I can load the content in the background while the Lightbox image is active. what if the content does not fit on one page? well, the overlay image will obviously not cover that area. looks ugly.

i can change the script manually to disable the unwanted element. but perhaps you guys can come up with a better solution. the original LB overlays all drop-down menus to the best of my knowledge.

thanks ::)
96

Mon 6 Mar 2006 - 8:40pm by NickyD

This is not working for me. I am a newbie, and tried following your directions to the tee. I have the original lightbox working on my site, but want to use this version. Are there any simpler directions for me to follow. I know I screwed up somewhere. Thanks.
97

Mon 6 Mar 2006 - 9:34pm

(Trackback)
Snaps! Gallery » Blog Archive » 2.0 Progress Update

[…] Other updates include the addition of a modified version of Lightbox (by Lokesh Dhakar) by Sean McBride for the full-size views of images (rather than a direct link to the image file - which, by the way, is still available if JS is disabled). Other theme/layout updates include the nice mouseover tooltips on images in addition to the albums. […]
98

Tue 7 Mar 2006 - 10:27pm by Sean Foushee

@ NickyD - Can you post a link so we can look at what isn’t working?
99

Wed 8 Mar 2006 - 4:06am by Ben Garmisa

Very nifty code, but I can’t seem to get it to work on my end…

http://bengarmisa.com/test.php

Clicking one of the thumbnails (currently unformatted or styled) just loads the image… I’ve tried reordering the javascript like you said above, but it doesn’t seem to do anything to stop it…

I’d really appreciate any help you can provide, but also understand if you’re busy

-Ben Garmisa
100

Wed 8 Mar 2006 - 11:47am by Sean

(Post Author)

Hey Ben,

The problem is that you are creating the image links via DHTML/DOM operations with Javascript. I’m not sure if you’re putting the rel property on the links or not (I didn’t have time to sift through the JS.) However, the JS that sets up the lightbox action on all links with rel=”lightbox” property happens right after the page loads, but BEFORE your gallery images are inserted into the page. That is why they don’t have lightbox behavior. You need to make sure that the DOM links you are inserting have the rel property and then rerun the initLightbox function once all images have been added. This *should* work, although I think I remember that someone may have been having an issue with this earlier.
101

Wed 8 Mar 2006 - 1:09pm by Ben Garmisa

Wow, I really should have thought of that

The links did have the rel=’lightbox’ in there, but initLightbox was running to early… Anyway, adding the function again to the JS after the AJAX fixed everything… Thanks again!
102

Wed 8 Mar 2006 - 2:57pm by NickyD

In response to my post (#96), to Sean (#98), or anyone else that can help. Here is a link to the page in question:

http://www.montville.net/valleyview/test/pr.html

I am trying to help out a friend. Be gentle, I am new to this, and probably need simple instructions on how to fix so it works. Thanks to anyone that can help.
103

Wed 8 Mar 2006 - 3:59pm by dan

Has anyone figured out a cure for internet explorer? The script works great in firefox but not in ie, not that I care because I am a firefox user but from a user standpoint it would be nice.
104

Wed 8 Mar 2006 - 7:56pm by Ben Garmisa

I just noticed the IE error on http://www.bengarmisa.com/test.php/ where it keeps appearing after I click close. I tried the suggestion in #19 to no avail… Any ideas here?
105

Wed 8 Mar 2006 - 10:00pm by Sean Foushee

@ NickyD - after looking at your page it appears you did not include Prototype and Moo.fx in your page. The order of JavaScript libraries to include is:

prototype.js
moo.fx.js
lightbox.js

All I saw was the lightbox.js. Try downloading and including those files in the order above and see if that helps.
106

Thu 9 Mar 2006 - 8:37am by NickyD

Sean:
I think I did what you suggested but it does not work. I downloaded all the files, and put the js files in the head section of the page. Did I miss something? Thanks for your help.
107

Thu 9 Mar 2006 - 9:21am by dan

Can anyone look at my test page in IE and see what I am doing anything wrong.

www.danvega.org/lightbox/
108

Thu 9 Mar 2006 - 10:52am by Sean

(Post Author)

@NickyD: I think I see your problem. You have statements to include all 3 javascript files in the page, but you haven’t actually uploaded prototype.js. When I follow the address to that file, I get a “file not found” error. That’s probably the problem.

@Ben: Your test page appears to be messed up. I see two copies of the same logo and no thumbnails…

@dan: Your problem is the same as many others’. You have included the JS files in the wrong order. You must include them in the order listed in comment #105 (it’s in other comments as well.)
109

Thu 9 Mar 2006 - 1:18pm by dan

Thanks for the help, I have them in the correct order now but it is still not working correctly, just in IE, it has always worked fine in firefox.
110

Thu 9 Mar 2006 - 2:09pm by Sean

(Post Author)

@dan: Wow, this had me stupmed for a little while, but I finally figured out what the problem is. You don’t have a doctype declaration on your page. In Firefox, this is fine because FF doesn’t have a quirks mode, but IE does. Since your page doesn’t have a doctype, IE assumes it should render in quirks mode (the old broken rendering mode), so all CSS goes to hell.

You should go to this page to read up about quirks mode vs strict mode and how to fix it with a proper doctype declaration. As soon as i added a doctype to your page, everything was peachy in IE.
111

Thu 9 Mar 2006 - 3:07pm by Ben Garmisa

@Sean: Sorry, for some reason I haven’t really cared to figure out, the page doesn’t work if you add a trailing slash… Go to http://www.bengarmisa.com/test.php and the page loads as it should
112

Thu 9 Mar 2006 - 3:14pm by Sean

(Post Author)

@Ben: Hey, it looks like it’s working now! Awesome.
113

Thu 9 Mar 2006 - 3:53pm by dan

Sean, wow it works as it should now in both browsers. I totally forgot about quirks mode (im so use to using ff) Thanks for the help again
114

Thu 9 Mar 2006 - 4:27pm by NickyD

Sean:
First, thank you for your assistance. I have the file at work. I am pretty sure I put those file in my folder for that page. I will double check again and post here. Thanks.
NickyD
115

Thu 9 Mar 2006 - 5:59pm

(Trackback)
1% » Blog Archive » Customizing Lightbox

[…] alwaysBETA » Building aB: Customizing Lightbox […]
116

Thu 9 Mar 2006 - 6:04pm by Ben Garmisa

Sean, as far as I can tell, the IE issue is still there :-/ I know you shouldn’t have to provide any support as youre not really selling a product here, but I’d appreciate any help you can give
117

Thu 9 Mar 2006 - 6:30pm by Sean

(Post Author)

@dan: Yay, a problem solved!

@NickyD: Yeah, when I look in the source for the included prototype url and then type that into the browser, I get nothing. Maybe it has a different name or got put in the wrong folder?

@Ben: Whoops, I forgot that yours was an IE only issue. Too many simultaneous threads. Luckily, I think it’s an easy problem to fix. I believe that you have the same problem as dan. No doctype declaration means that IE is rendering in quirks mode. Go here to read about it. That should fix your IE problem.

@everybody: I’m going to be publishing another post soon (linked from this post) with a cleaned up and nicely packaged version of my Lightbox mod in one easy zip file with example ready for downloading. I’m also going to be covering the top errors made based on this comments thread and what the solutions are. That way, we can reduce the amount of debugging through comments that needs to happen. Unfortunately, people who come to this thread can no longer read through all of these comments very quickly to find all the fixes…
118

Thu 9 Mar 2006 - 10:10pm by NickyD

Sean:
Okay, I was able to access the page from home…..don’t tell my boss. One problem I discovered was the prototype downloaded with the version number after it. I just changed the name to prototype.js from prototype-1.04.js. That definately improved something. I wonder if my pictures are too big for this script. What happens is they start to open, then freeze. Once again, the URL is:
http://www.montville.net/valleyview/test/pr.html
119

Fri 10 Mar 2006 - 1:36am by Sean

(Post Author)

@NickyD: It might be that the math doesn’t work right for images that are larger than the viewport? (I thought it did but maybe not.) Do this: try sizing one of the images down to a smaller size, don’t change anything else, and then see if that image works.
120

Fri 10 Mar 2006 - 5:04pm by NickyD

Thanks Sean:
I will give it a try on Monday when I return back to work. Thanks for your help.
121

Fri 10 Mar 2006 - 5:20pm by Vlad

@NickyD: you page works with the following header:

Project ACES, All Children Exercise Simultaneously, Len Saunders, Children’s Fitness
122

Fri 10 Mar 2006 - 5:46pm by Sean

(Post Author)

Whoops it looks like most of Vlad’s comment was eaten up by the unallowed HTML monster. Try putting the HTML code within some braces like this: {code} some HTML {/code}, except with the curly braces replaced with square braces. I’m adding a list of allowed tags XHTML tags in comments right now.
123

Fri 10 Mar 2006 - 6:00pm by Vlad

True

Basically, the problem is with your lightbox.css

if you remove

from your section, the script will run without a problem. copy&paste the CSS that Sean has on the page. it looks like you’re using Lokesh’s CSS.
124

Fri 10 Mar 2006 - 6:01pm by Vlad

darn. if you remove any reference to lightbox . css , the script will run
125

Fri 10 Mar 2006 - 6:09pm by Ben

Hi there everyone, I too am having some problems with the scripts.

Now although I think I followed the instructions correctly, using all the updated scripts, nothing worked. The image just kept being loaded in its own page. I’ve tried replacing the default lightbox.js with the AlwaysBeta version, in case I did something wrong and that prouces the same result; nothing. Now this is the same problem as Todd noticed near the beginning, apparently solved by rearranging the order of the Javascript files, I tried this, and that still didn’t change anything.

I’m stumped.
126

Fri 10 Mar 2006 - 6:14pm by Ben

I forgot to give the address.
I’m installing it at http://www.silverlodetheband.net/.
The names of the band members are meant to launch Lightbox.
127

Fri 10 Mar 2006 - 11:36pm by Ben Garmisa

@Ben,

Your site works for me, although you might have some errors in your lightbox.js, as the lightbox loads but only shows the top 40px or so of the picture…
128

Sat 11 Mar 2006 - 6:53am by Muhammet Sevim

@Ben,

i think you have to replace the old css file with this one;

#lightbox{ background-color:#eee; padding: 0 10px; } #lightboxCaption, #lightboxClose{ font-size: 0.8em; padding-bottom: 10px; color: #666666; text-align: center; } #lightboxClose { padding: 10px 0 0 0; text-align: right; } #lightboxPhoto { display: block; padding: 10px 0; } #lightboxClose a { color: #666666; } #lightboxClose a:hover { color: #333333; } #lightbox img{ border: none; } #overlay img{ border: none; } #overlay{ background-color: #333; }
129

Sat 11 Mar 2006 - 12:46pm by Sean

(Post Author)

@Ben: If you use the alwaysBETA version of lightbox, you also need to change the included CSS to be our version. I think this is the problem that NickyD was having as well.
130

Sun 12 Mar 2006 - 5:25am by Ben

Ah yes, that works perfectly now, thankyou.
131

Mon 13 Mar 2006 - 1:53pm by NickyD

Okay….it’s working now. Crap, if I only know what I did to get it to work…LOL Thanks everyone.
132

Tue 14 Mar 2006 - 7:58pm by Artie

I seem to have found a Netscape (v8.1) bug (yes, crummy old NS). If you click on a lightbox image then close it, the focus doesn’t seem to go back to the main document, so if you try and use the mouse scroll wheel it doesnt work until you click back on the page. Not a terribly big deal until you click on another lightbox image when it looks like the scrolling you did actually scrolled up or down within the lightbox while it was hidden, making any picture you click now either not visible or only partially visible in the box. If it’s not visible at all then there’s no way to get rid of the blank box unless you reload the page (the close button is also not visible in NS).
Example:
First click
Then close the image, scroll down a couple notches with the mouse wheel.
Next click
133

Fri 17 Mar 2006 - 12:07pm by Skwid

Hey Sean !
Thanks a lot for your contribution, it really renders great
Just giving out a tip on a problem I spent the whole night on…
I tried using Lightbox in a Google Maps info bubble, the problem however is that the html code in the bubble is generated after the js script parses the code, therefore the image link is handled as a normal link.
Once I figured that out (after 6 or 7 hours :)), I inserted a call to the ::HLIGHT_BLOCK_1:: function when displaying my info bubble… and it works great ! (Looks pretty nifty too … explore the map, click on a location, then popup a picture in a lightbox !)
I know it’s not very clean … but I thought I’d help out and save everyone else the hassle !
134

Fri 17 Mar 2006 - 12:09pm by Skwid

Woops … I don’t know what happened here, I meant the initLightbox() function.
135

Sat 18 Mar 2006 - 3:47pm by Michael

Thank you for the great work. I’ve already implemented it in two sites. While working on a third site I ran into a problem where the lightbox code was getting triggered. It took me a while but I finally figured out that I was squashing on the window.onload code the lightbox.js was injecting into the page. Just in case anyone else has this problem, be sure your own window.onload code (i.e. setting focus to a control) gets added by using the addLoadEvent function in the lighbox.js. By the way that’s a cool little piece of code.

Thanks again.
136

Mon 20 Mar 2006 - 4:39am

(Trackback)
ihao blog » Blog Archive » links for 2006-03-18

[…] alwaysBETA » Building aB: Customizing Lightbox 教学：为BLOG建立一个自主的LIGHTBOX。 (tags: webdesign ajax lightbox tech javascript) […]
137

Mon 20 Mar 2006 - 5:49pm

(Trackback)
Typo3 Templates | Typo3 Blog | Typo3 Templates als Extensions | Typo3 Hosting | Webdesign | valide XHTML/CSS Layouts mit Typo3

[…] … zur Seite […]
138

Mon 20 Mar 2006 - 7:51pm by Steff

First and foremost, can I just say - lovely.

Right, now that has been said why the heck won’t it work for me?
My problem is that with Firefox the loading image and the close
button don’t actually show up. It works lovely in Safari, though.

I just don’t understand why Firefox refuses to work properly. I am
using the exact things from this page, too.

One more note - the example above, with the alwaysBeta logo,
works perfectly in my Firefox (with close buttons and so forth)
so I don’t understand why my own one doesn’t work (currently
not online).

Anyway! I’d really appreciate any notes/help on it!

Thank you!
139

Tue 21 Mar 2006 - 1:35am by SokViChet

Have you checked out the signup / login for http://www.on10.net ? Similar idea, but they use it for exactly the same reasons I want to use this –> A modal signup page that does not require a postback or a popup.

Their implementation is sharp, but I think they built theirs themselves (we are talking about the channel9.msdn.com team).
140

Fri 24 Mar 2006 - 3:49pm by Emmanuel

just wondering, how easy will it be to display a flash swf file in lightbox?

cheers
141

Sun 26 Mar 2006 - 3:33pm by r3dsc0rpi0n

Nicely done ppl.

If u are using any other .js be sure that it comes before
.js used for lightbox becouse then u will have to add ::HLIGHT_BLOCK_1:: what works in IE and Firefox but not in opera.
142

Sun 26 Mar 2006 - 6:24pm

(Trackback)
Music Project » Blog Archive » Ajax

[…] Cool image viewing effect: http://www.alwaysbeta.com/2006/02/08/building-ab-customizing-lightbox/ […]
143

Mon 27 Mar 2006 - 2:52am by r3dsc0rpi0n

I ment to write ::HLIGHT_BLOCK_1::.

And btw please make input boxes longer
144

Mon 27 Mar 2006 - 11:31pm by Giancarlo

Hello,
I tried to use the modified version of Lightbox, here is an example:

http://www.maretur.it/scheda_barca_ocean_star.htm

I previously had problems because my DTD was different from what script expected, then changed it as the same as on this site and it’s working almost fine.
One more thing… (thank you Steve Jobs!) I’ve got problems because my centering CSS hack is probably interferring with the script’s sizing and centering calculations. What do you think is best to do? Add some styles to the object created in javascript, or changing for best the centering CSS and divs?
145

Mon 27 Mar 2006 - 11:41pm by Giancarlo

Ok, I copied as much as possible from this site’s CSS and divs and it worked perfectly. This is what I suggest for anyone having problems:

- make sure your DTD is the same as this site
- make sure you’re not using text-align for element aligning other than text
- do not implement the effect directly on your pages, try it first on a blank page and then just add water.
146

Tue 28 Mar 2006 - 4:00pm

(Trackback)
Descargas de Galerías Ajaxs, Slideshows y Effectos » Celi Online

[…] Building aB: Customizing LightboxHay un excedente ENORME desde Lightbox JS, sin una manera de entregar el contenido al usuario un popup o recarga de la página. Esta técnica se puede utilizar con éxito para muchos tipos de interacciones, pero parece satisfecha para mostrar versiones más grandes de las imágenes. […]
147

Tue 28 Mar 2006 - 7:43pm by John

You might also intrested in checking out the latest release of LightBox i.e. LightBox2.0.

http://www.ajaximpact.com/detail_news.php?id=29
148

Fri 31 Mar 2006 - 4:29pm by Brian

Works great for me, but I did encounter an interesting feature. I’m using a small final image (the image that is opened after you click the thumbnail) 119 px tall and I can see the loading image behind my image still annimating. This occurs in both Firefox 1.5 and IE 6. I can even click on the annimated image under my image and it closes the image.

Any ideas on how to close or hide the anninmated image once the resulting image has been fully displayed?
149

Sun 2 Apr 2006 - 12:00am by Ap

Hi there,

So… has anyone figured out how to add the “fade” to Lightbox Gone Wild”? I’d love to add that, since I too agree that the default transition (which is none) is too harsh.

Thanks!
150

Tue 4 Apr 2006 - 11:22am by Matt H

Hiya,

great addition to to lightbox really appreciate all your work. Working fine for me at the moment. Just a slight question, i want to add arrow buttons either side of the box so you can click to go to the previous and next image.

I have managed to integrate the images, i’m just having a problem with the javascript. I thought it would be a good first project for javascript but i think it’s a little to much.

I tried creating an array of images and then creating a function to increment through the objImage.src = objLink.href; line, but it doesn’t seem to be working. Any pointers would be much appreciated.

Matt
151

Tue 4 Apr 2006 - 11:38am by Matt H

Hi Again,

I could do this with Lightbox gone wild i guess, could get a little long winded for a large image gallery though.

Matt
152

Tue 4 Apr 2006 - 1:56pm by Matt H

Ok, so i’ve now had the most unproductive day, hours trying to add navigation buttons only to find there is a version of lightbox that already does it

Here

Ho hum, just hope somebody finds the above link useful and doesn’t make the same mistake

Matt
153

Thu 6 Apr 2006 - 7:03pm by Brett

I’m having some CSS issues that I can’t figure out. I initially tried the Lightbox on my homepage here:

http://www.brettdewoody.com/index_new.php

Click the “Emmons Glacier” link and you’ll see that the image loads to the right of the screen. Thinking that this was caused by my site’s stylesheet, I created a new page with only the Lightbox stylesheet. The result was the same:

http://www.brettdewoody.com/test.php

Any ideas on why the images are aligning to the right?

Thanks in advance,
-Brett
154

Thu 6 Apr 2006 - 7:10pm by Brett

Nevermind, I was apparently not using the correct lightbox.css file.

Everything works great, nice work guys!
155

Fri 7 Apr 2006 - 3:47am by Jaik

I have made a quick in a workaround for the Internet Explorer select box display bug. It’s not the cleanest thing ever coded but it works fine. It has no browser checking and so will hide the select boxes in all browsers, but that should be easy to sort should you want to.

Add this to end of the configuration section
::HLIGHT_BLOCK_1::

Add this to start of the hideLightbox function
::HLIGHT_BLOCK_2::

Add this to start of the initLightbox function
::HLIGHT_BLOCK_3::

In the initLightbox function, replace this line
::HLIGHT_BLOCK_4::
with this
::HLIGHT_BLOCK_5::

And finally add this function
::HLIGHT_BLOCK_6::
156

Mon 10 Apr 2006 - 4:25am

(Trackback)
[[ the sirens of titan ]] » Blog Archive » links for 2006-04-10

[…] alwaysBETA » Building aB: Customizing Lightbox (tags: webdesign lightbox code howto javascript development) […]
157

Sun 16 Apr 2006 - 12:49am by Sumeet Wadhwa

great stuff…thanks
158

Sun 16 Apr 2006 - 1:45pm

(Trackback)
Anonymous

Customizing Lightbox…

So, theres been a HUGE buzz lately over Lightbox JS (and semi-modal Javascript overlays in general, as Particletree has recently discussed) as a way to deliver content to the user without a popup or reloading the page. This technique can be successfull…
159

Wed 19 Apr 2006 - 4:00pm by Leandro Ardissone

Exists any way to positionate the lightbox to X and Y on the screen?
160

Mon 1 May 2006 - 9:38pm

(Trackback)
my webbie. my webbie. wherever i go, he goes. at mono.log@o(d)c

[…] i was reading threw some documentation on how to get lightbox to work with wordpress, when i found a plugin for wordpress that does it all for me. it doesn’t really work for me, as i’m too quick to click back/ctrl f4 when i’m done looking at an image being talked about. since its implementation, i’ve made various people go to my website and told them to look at an article, get the big view, and go back to reading the article. a few of them, whom i’ve forced to trouble shoot for me many times, talked through the steps so i got to hear what they’re thinking process was. it actually works for everyone but me, which is interesting. this website is really here to serve me, yet it works for everyone but me. *squints eyes* the bastard. i need to edit its bits and make it look more like the original lightbox’s bits. like say click [x] to close and all. perhaps i should animate (read: cycle colors) the X in the top corner too, so i’d be more apt to notice it. […]
161

Sun 7 May 2006 - 3:03pm

(Trackback)
gaarf.info » Blog Archive » LightBox integrated

[…] Thanks to Sean McBride’s article I have been able to integrate Lightbox JS into my Hemingweb 2.0 theme quite easily. To try it out, just click on a thumbnail like the one on the right, and watch the magic. […]
162

Wed 17 May 2006 - 7:43pm by Xevor

Any chance you can update this to work with the new versions of moo.fx, prototype etc.. ? I can’t seem to get it to work and don’t want to downgrade.

Thanks!
163

Thu 18 May 2006 - 2:19am by Sean

(Post Author)

Hey Xevor,

I was thinking of doing a new version, but haven’t had time due to end of the year craziness. I may get one done at some point in the near future. Another option might be to start with the newest lightbox, pull out the scriptaculous effects, and replace them with the newest moo.fx effects yourself. If you could get it to work, I’d love to hear about it!
164

Sun 21 May 2006 - 11:46pm

(Trackback)
slidr.net » Blog Archive » Prototyping “Lightbox”

[…] I slowly started to work on it, meanwhile some more productive guys out there released some enhanced and/or inspired versions including lightbox plus, lightbox gone wild and customizing lightbox. Not to mention that a few days ago, “Mr. Lightbox” himself released lightbox v2! Is there any need again for my small contribution? I still believe yes, simply because there are a few different things that I like and because, as I mentioned, I want to do it to learn more, not to mention that the beauty of “open source” is also the multiplicity of choice! Indeed, lightbox v2 (like some others) is based on Prototype and script.aculo.us for the effect side but I believe it is not going far enough for my very personal taste. What are the differences […]
165

Sun 28 May 2006 - 10:31pm

(Trackback)
Thoughts and Code » Blog Archive » Prototyping “Lightbox”

[…] I slowly started to work on it, meanwhile some more productive guys out there released some enhanced and/or inspired versions including lightbox plus, lightbox gone wild and customizing lightbox. Not to mention that a few days ago, “Mr. Lightbox” himself released lightbox v2! Is there any need again for my small contribution? I still believe yes, simply because there are a few different things that I like and because, as I mentioned, I want to do it to learn more, not to mention that the beauty of “open source” is also the multiplicity of choice! Indeed, lightbox v2 (like some others) is based on Prototype and script.aculo.us for the effect side but I believe it is not going far enough for my very personal taste. What are the differences […]
166

Fri 16 Jun 2006 - 6:28am by Rasmus

Please continue your great work! I’m a big fan of moo.fx and prototype.lite because of the small footprint and I hope you’ll have the time and energy to update it to work with the latest version. I definitely think that there is a need for your efforts!

Cheers

Raz
167

Wed 5 Jul 2006 - 4:19pm

(Trackback)
Top 126 Ajax Tutorials : Ultimate Web Developer Lists : eConsultant

[…] Building aB: Customizing Lightbox : at AlwaysBeta […]
168

Tue 11 Jul 2006 - 5:11am

(Trackback)
Foobr » Blog Archive Lightbox clones

[…] Customising Lightbox a nice article by alwaysBeta showing how they customised the first lightbox […]
169

Wed 12 Jul 2006 - 10:33am

(Trackback)
MondoBlog » Blog » Top 21 Lightbox clones - La lista dei migliori script basati su Lightbox

[…] Customising Lightbox […]
170

Sat 15 Jul 2006 - 10:26am

(Trackback)
Web Burning Blog » La lista dei migliori script basati su Lightbox

[…] Lightbox JS v2.0 Lightbox gone wild Lightbox effect without lightbox Lightbox plus Lightbox for modal dialogs Lightbox Plugin for WordPress Customising Lightbox Greased Lightbox Multi-faceted Lightbox Leightbox Thickbox Slightly ThickerBox GreyBox GreyBox Redux GreyBox Plugin for WordPress Suckerfish Hover Lighbox iBox LITBox Slidebox 0.4.1 Say goodbye to pop-ups with DOMinclude Cross browser multi-page photo gallery Tags:ajax cross browser dialogs ibox lightbox photo gallery suckerfish webmaster […]
171

Mon 4 Sep 2006 - 6:37am by Kim

hello! this a great modification with a really light script!

i’m using lighbox 2.0 in the page i have submitted in this form and was wondering how do i use this modified version while keeping the next/previous functions of the original LB 2.0? i particularly like simplicity of grouping photos in LB 2.0 by rel=”lighbox[groupName]” and hope it can be used with this lighter version.
172

Mon 4 Sep 2006 - 11:02am by Sean

(Post Author)

Well, using the moo.fx scripts with the Lightbox 2.0 would require someone to go through and change all of the effects out (essentially they would have to do what I did to 1.0 again to 2.0). Unfortunately, I don’t have the time to do it (plus I’m pretty happy just using 1.0. If you know any Javascript, you could try it yourself and let us know about the results!
173

Sat 9 Sep 2006 - 3:00am by Kim

it would? aw damn… sorry, i dont know any JS. wonder how long it would take me to learn to do that….

well, i was thinking about what i liked so much about 2.0 and i think the only thing is the prev. and next even without the resizing effects. what if like in lightbox 2.0, you could designate groups liks so: rel=”lightbox[group]”, then when you click on the thumbs, there is a “image x of n” and a next/prev link. and clicking on those would return to the loading image and then the next/prev image appears the same way it does now?

would that require a whole new script? or a loop kinda thing? maybe i can try it myself.

thanks!
174

Mon 2 Oct 2006 - 9:51am

(Trackback)
All Cusco | Blog » Blog Archive » Top - 126 tutoriales Ajax

[…] Building aB: Customizing Lightbox : at AlwaysBeta […]
175

Tue 3 Oct 2006 - 7:39am by Michiel van der Blonk

Hi

I always run any js file through jslint. Here is the result, you might want to make the slight fixes. Semi-colons are important (yes, they are), esp. if you want to compress the scripts (which is usually my second step).
==========
JavaScript Lint 0.2.4 (JavaScript-C 1.5 2004-09-24)

lightbox.js
lightbox.js(66): lint warning: missing semicolon
return arrayPageScroll;
..^

lightbox.js(120): lint warning: missing semicolon
return arrayPageSize;
..^

lightbox.js(167): lint warning: leading decimal point may indicate a number or an object member
objOverlay.anim.custom(0,.8);
………………………^

lightbox.js(206): lint warning: missing semicolon
imgPreload.src = objLink.href;
..^

lightbox.js(226): lint warning: leading decimal point may indicate a number or an object member
objOverlay.anim.custom(.8,0);
…………………….^

lightbox.js(252): lint warning: missing semicolon
}
….^

lightbox.js(296): lint warning: missing semicolon
objOverlay.appendChild(objLoadingImageLink);
….^

lightbox.js(305): lint warning: empty statement or extra semicolon
imgPreloader.onload=function(){}; // clear onLoad, as IE will flip out w/animated gifs
……………………………..^

lightbox.js(310): lint warning: missing semicolon
imgPreloader.src = loadingImage;
..^

lightbox.js(342): lint warning: missing semicolon
objLightbox.appendChild(objLink);
..^

lightbox.js(362): lint warning: missing semicolon
imgPreloadCloseButton.src = closeButton;
..^

lightbox.js(395): lint warning: missing semicolon
}
..^

0 error(s), 12 warning(s)
========
176

Sat 7 Oct 2006 - 3:47pm

(Trackback)
TechnoRepublic » Blog Archive » Top 126 AJAX Tutorial

[…] Building aB: Customizing Lightbox : at AlwaysBeta […]
177

Tue 31 Oct 2006 - 5:30pm

(Trackback)
links for 2006-10-03 at willkoca

[…] alwaysBETA » Building aB: Customizing Lightbox (tags: javascript lightbox) […]
178

Thu 9 Nov 2006 - 11:28am by David

HELP!!!!!!!!!!

does anyone know how i can use the lb with a flash movie (swf)?????

thanks.
179

Thu 14 Dec 2006 - 6:07am

(Trackback)
i-fekt Blog » Verschiedene Lightboxen im Überblick

[…] Lightbox mit moo.fx - für moo.fx aufbereitet, ebenfalls Prototype-basierend und nur Darstellung von Bildern möglich. […]
180

Mon 18 Dec 2006 - 1:22pm

(Trackback)
Cavewalker dot com » Blog Archive » lightboxtest

[…] lightboxtest Thanks to Sean McBride’s article I have been able to integrate Lightbox JS into my Hemingweb 2.0 theme quite easily. To try it out, just click on a thumbnail like the one on the right, and watch the magic. […]
181

Wed 20 Dec 2006 - 12:16pm by Passagem de Ano

Being a Newbie with absolutely no experience in JavaScript I’m totaly amazed with the work that you guys are able to accomplish.

I’ve been used mootols.js and the original lightbox.js separetly but wasd never able to combine them at the same page… well seams that i’ve came to the right place… i will skim arround your website and try learn from you guys to implement this script in my website By the way the best private NYE in Portugal “passagem de ano” is the portuguese expression for New Year Eve.

Tanks in advance for the time you dedicated to this project
and keep the good work
182

Sun 7 Jan 2007 - 1:40am

(Trackback)
Recursos en Ajax: Ventanas Modales. | Confusion is next

[…] LightBox (moo.fx). Esta version usa moo.fx en lugar de prototype. lo cual lo hace mucho mas liviano. […]
183

Wed 17 Jan 2007 - 1:08pm

(Trackback)
Lightbox + Moo.fx = slickness » Clientside

[…] Check out this post on this crafty lightbox + moo.fx combination. While Lightbox is really excellent, the sudden transition from page to image is a little bit jolting. I decided that integrating a Javascript effects library (in this case, my preferred option, the super-lightweight Moo.FX) into Lightbox would provide a more gentle transition from page to image and back again. […]
184

Fri 19 Jan 2007 - 6:44am by Brian

Nice resource, I have added your link on www.ajaxshack.com
185

Mon 19 Feb 2007 - 2:42am

(Trackback)
Wordpress 2.0 & Typo themes - Desiloper » Customizing Lightbox moo fx

[…] http://www.alwaysbeta.com/2006/02/08/building-ab-customizing-lightbox/ […]
186

Tue 6 Mar 2007 - 8:26pm by Kovo

Im trying to implement this into my website. Although it works amazing in FF, in IE the background does not show at all..any ideas?
187

Wed 21 Mar 2007 - 10:32pm by Dustin Diaz

Looks neat. But after including prototype.js, there shouldn’t be a need for addLoadEvent() if you already have Event.observe. There is also quite a bit of other cruft in the logic that isn’t necessary if you’re going to include a library that pretty much does it all for you. Eg: getting page width, setting styles, binding event handlers… appending elements…. what was the point of even including Prototype?
188

Sat 31 Mar 2007 - 1:56am by Shihao

Can I use MooTools instead of using Moo.fx with Prototype? It gives out these error:

[Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://mysite.com/blog/wp-content/mootools.js :: anonymous :: line 2″ data: no] http://mysite.com/blog/wp-content/mootools.js Line 2
[Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://mysite.com/blog/wp-content/mootools.js :: anonymous :: line 2″ data: no] http://mysite.com/blog/wp-content/mootools.js Line 2
fx is not defined http://mysite.com/blog/wp-content/plugins/lightbox/lightbox/lightbox.js Line 284
189

Mon 16 Apr 2007 - 5:20pm by Leland

Hey, I found an error. I’m using Safari on a G5 running Mac OSX 10.4.8.
When I run the demo, the scroll bars on the scrolling content above the demo appear perfectly, not fading or anything. You can view a screen shot here: http://i159.photobucket.com/albums/t123/lelandrb/Picture1.png
190

Sat 21 Apr 2007 - 9:47am

(Trackback)
RedBulk » Blog Archive » Lightbox

[…] Lightbox JS | Lightbox JS v2.0 | iBox | ThickBox Multifaceted | Lightbox | LightWindow v1.1 | Greybox | HoverLightbox Redux | Slightly ThickerBox 1.7 | Lightbox with moo.fx | Leightbox | Prototype | Lightbox Plus | Lightbox Plugin for WordPress | GreyBox Plugin for WordPress | Litebox | LITBox | Slimbox | Highslide JS | subModal | Greybox Redux | Suckerfish HoverLightbox | JonDesigns SmoothGallery […]
191

Wed 30 May 2007 - 3:35pm

(Trackback)
Verschiedene Lightboxen im Überblick | i-fekt

[…] Lightbox mit moo.fx Für Die JavaScript-Bibliothek moo.fx aufbereitet, ebenfalls Prototype-basierend und nur Darstellung von Bildern möglich. […]
192

Sun 3 Jun 2007 - 4:03am

(Trackback)
Persian Developer » Scripts For Galleries, Slideshows and Lightboxes

[…] Building aB: Customizing Lightbox […]
193

Mon 11 Jun 2007 - 3:45pm

(Trackback)
Tutorials » Blog Archive » 146 Ajax Tutorials

[…] Building aB: Customizing Lightbox : at AlwaysBeta […]
194

Thu 14 Jun 2007 - 1:52am by Nathan

Hey Sean,

This is probably a big edit - but can you make it work with video? We’ve had SOME success on this site ajrevolution.com but having a few issues with positioning and trying to close the layer once the movie finishes.

If anyone has seen any solutions that work well i’d love to hear from you!

Cheers
Nathan
195

Fri 22 Jun 2007 - 2:50pm

(Trackback)
Bleebot | Christophe Lefevre » + de 140 tutos Ajax

[…] Building aB: Customizing Lightbox : at AlwaysBeta […]
196

Sat 14 Jul 2007 - 11:05am

(Trackback)
Il blog sul php » Tutorials su ajax

[…] Building aB: Customizing Lightbox : at AlwaysBeta […]
197

Mon 30 Jul 2007 - 5:22am

(Trackback)
Thema: Light- & Greybox « mon petit web - chindogu

[…] Lightbox with moo.fx - souped up with moo.fx transitions etc, still prototype based and only for images, however. […]
198

Thu 2 Aug 2007 - 1:16am by decimus

I`ve started using lightbox and Im very gladd of this library. dont have any problems with integration with my site. nice tutorial! thx!
199

Sat 18 Aug 2007 - 11:43pm

(Trackback)
Web Hosting Providers Directory

Web Hosting Providers Directory…

Sorry, it just sounds like a crazy idea for me :)…
200

Fri 7 Sep 2007 - 12:44pm

(Trackback)
Lightbox JS - Image Viewer « Embracing Technology

[…] Another customization by Sean at Building aB: Customizing Lightbox […]
201

Sun 28 Oct 2007 - 2:24pm by Levi

Horizontal Scroll???

I have a horizontal scroll navigation on my website, www.stu21o.com/v3s , and i can’t for the life of me figure out how to make the overlay appear correctly when scrolling to the right? (seems it only works for conventional vertical scrolling…)

Any suggestions or solutions???

Thanks much for your reply!

levi at stu21o.com
202

Wed 31 Oct 2007 - 11:47am by Arqus

Хмм… В реале бойан..
203

Fri 23 Nov 2007 - 1:46pm

(Trackback)
Smashing Coding » Plus de 140 tutos et scripts Ajax pour les webdevs

[…] Building aB: Customizing Lightbox : at AlwaysBeta […]
204

Mon 26 Nov 2007 - 5:55am

(Trackback)
Verschiedene Lightboxen im Überblick | REDUXO

[…] Lightbox mit moo.fx Für Die JavaScript-Bibliothek moo.fx aufbereitet, ebenfalls Prototype-basierend und nur Darstellung von Bildern möglich. […]
205

Sat 15 Dec 2007 - 12:16pm

(Trackback)
Welson’s Blog » 各种 lightbox 实现

[…] Lightbox with moo.fx - 基于 prototype，但只能用于图片。 Lightbox Gone Wild - modal 模式窗口的 lightbox，可使用 html、表单及图片，也是基于 prototype 的，所以有一些 heavy。 […]
206

Wed 9 Jan 2008 - 1:31am

(Trackback)
momoc_a » 图片

[…] Lightbox with moo.fx - 基于 prototype，但只能用于图片。 Lightbox Gone Wild - modal 模式窗口的 lightbox，可使用 html、表单及图片，也是基于 prototype 的，所以有一些 heavy。 […]
207

Mon 14 Jan 2008 - 6:21am

(Trackback)
Bram.us » Lightview - Prototype/Script.aculo.us based Lightbox

[…] yet another lightbox spinoff hits the net. Animation could be smoother on the box itself, yet the little arrows are very sexy! Spread […]
208

Sat 2 Feb 2008 - 11:20am by Shushil Patel

Hi I can someone help me with my lightbox issue, my lightbox that I customised works fine in safari, but in IE6 or 7 when you hit the next button the image does not appear just carries on loading

Here is my problem:

www.freshlemon.co.uk/fl015/portfolio.html

thanx
209

Sun 10 Feb 2008 - 12:02pm

(Trackback)
» Lightbox实现wordpress图片特效 » Web - 骆驼的博客

[…] Lightbox with moo.fx - 基于 prototype，但只能用于图片。 Lightbox Gone Wild - modal 模式窗口的 lightbox，可使用 html、表单及图片，也是基于 prototype 的，所以有一些 heavy。 […]
210

Thu 13 Mar 2008 - 9:27am

(Trackback)
Design Shrine | AJAX SCRIPT RESOURCES

[…] Building aB: Customizing LIghtbox Feb 10, 06 So, there’s been a HUGE buzz lately over Lightbox JS (and semi-modal Javascript overlays in general, as Particletree has recently discussed) as a way to deliver content to the user without a popup or reloading the page. This technique can be successfully used for many types of interactions, but it seems ideally suited for (and Lightbox JS is specifically made for) showing larger versions of images. […]
211

Mon 17 Mar 2008 - 1:17pm by 1001

I’ll try to use your code, thanks in advance
212

Tue 26 Aug 2008 - 9:48am by smithveg

Thank for the code you pasted.
213

Tue 16 Sep 2008 - 2:50am by caricature

Thanks so much for the post. Just enjoy this community very much and we’d love you to share your thoughts with us.
214

Sat 8 Nov 2008 - 5:12am by icoft roke

This company stock (ROKE) is set to take off. Worldwide client base in the mobile communications space. See the details at www.icoft.com/roke.html
215

Sat 8 Nov 2008 - 5:25am by icoft roke

WORLDWIDE client base in the cell phone sector. Tremendous opportunity to get in the stock now. Check out how big the opportunity is at www.icoft.com/roke.html
216

Fri 14 Nov 2008 - 4:14am

(Trackback)
Tutorial Ajax vari - Caputo’s Blog - Tecnologia, web, papertoy e papercraft

[…] Building aB: Customizing Lightbox : at AlwaysBeta […]
217

Fri 19 Dec 2008 - 10:06pm

(Trackback)
收集的几种弹出层(遮罩层lightbox)效果

[…] Lightbox with moo.fx - 基于 prototype，但只能用于图片。 Lightbox Gone Wild - modal 模式窗口的弹出层，可使用 html、表单及图片，也是基于 prototype 的，所以有一些 heavy。 […]
218

Wed 14 Jan 2009 - 8:34pm

(Trackback)
lightbox custumized gefällig? « Misprintedtype’s Blog

[…] http://www.alwaysbeta.com/2006/02/08/building-ab-customizing-lightbox/ Tags: CSS, Javascript, lightbox, […]