Wednesday Feb 8 2006 - 9:10pm
Building aB: Customizing Lightbox
by Sean
under No Tags
with 211 comments
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.
1
@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
(Post Author)
Hey Alex, great! I’m glad that I could help. Sorry that I kept you up before.
3
nice.
have you considered applying moo fx to Lightbox Gone Wild! version?
i’ll take a look.
4
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
(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
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
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
(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
(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
Thatnk you guys, you helped me find a nasty bug. Working on it, will publish as soon as possible!
11
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
(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
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
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
(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
(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
Here’s the page with the problem I mentioned:
http://wildatheart.50webs.com/abstract.html
18
(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
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
(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
Hi Sean, thanks a lot - got it sorted
22
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
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
For clarity I have setup an example here: http://www.3854beethoven.com/lightbox_test.html
Any advice would be appreciated.
25
(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
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
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
(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
You have been blogged about on www.thewebdesignblog.com
30
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
(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
That was it! Works like a charm now. Thanks a ton!
33
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
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
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
(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
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
(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
@ 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
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
Hi,
……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?
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).
42
(Trackback)
diatribe » Blog Archive » Of Interest v20060218.2
[…] Another Lightobx modification at awaysBeta, this one uses moo.fx. […]
43
(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
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
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
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
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
(Trackback)
Project :: penkiblog » 本日書籤 (偷懶版)
[…] http://www.alwaysbeta.com/2006/02/08/building-ab-customizing-lightbox/ […]
49
(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
(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
(Trackback)
SIXFACE » Blog Archive » links for 2006-02-19
[…] alwaysBETA » Building aB: Customizing Lightbox (tags: javascript howto) […]
52
(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
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
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
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
(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
(Trackback)
The Exile » links for 2006-02-20
[…] alwaysBETA » Building aB: Customizing Lightbox (tags: lightbox moo.fx) […]
58
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
(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
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
(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
(Trackback)
Santhosh Dot Net » Blog Archive » Links for 2006-02-19
[…] 9 - alwaysBETA » Building aB: Customizing Lightbox (tags: howto javascript) […]
63
(Trackback)
Ajax Info » Lightbox JS Weiterentwicklung: Integration mit Moo.FX
[…] Link: http://www.alwaysbeta.com/2006/02/08/building-ab-customizing-lightbox/ […]
64
(Trackback)
Musounderings » Blog Archive » Customized Lightbox for Larger Image
[…] http://www.alwaysbeta.com/2006/02/08/building-ab-customizing-lightbox/ […]
65
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
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
(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
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
(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
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
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