Lightbox JS

Lokesh, this is a really cool little script! Thank you.

Hi Thanks ever so much for sharing this. It is awesome.

I was wondering first whether it was possible to get a message just below the image to let people know they have to click on the image to get back to the page. My mum just couldn’t figure it out, bless her. Good test though.

Otherwise I tested it in Opera and it gets stuck at the loading image and will not go forward to the larger image. Any clues on how to fix this. Tried it with Opera Version 7.54u2 (Build 3929).

Oh an Happy New Year, mine has started nicely thanks to you ;)

John

its not working for me :(
obharath.com/blog

Bharath, you’re pages take ages to load and looking at the code there are an incredible amount of javascript calls in just one page. There could be a conflict between scripts. Also your image is huge, why not try with a smaller image first. Also I haven’t tried with a text link, linking to the large image but like Lokesh a small image linking to a larger view of the image.

Lokesh,
WOW, pretty sweet. Really nice effect.
I am going to give it a shot.

Thanks for sharing.

Cool script its helped me out with my site by reducing the amount of code and getting rid of 1 page completely (i had a seperate image viewer) . Ill def put a link to this on my site somewhere when i get the new version up..

Excellent in style and execution alike! Thanks for sharing this. (And compliments on a great site name too! :-)

Hi tried it in Opera 8.5 and it works fine

Must not work in the Opera version I had…

John

Hi,

Very clever stuff! :) Keep up the good work!

Tom from Hungary.

Hi I tried it on my blog and had the same problem as Bharath - we both use K2 as our theme, so that’s why.

However if you go into K2 options under the WordPress admin panel, and just turn off Live Search, it will work flawlessly:

www.stereopoint.com

Thanks for sharing Lokesh.

Hi.
First of all I want to say that it`s the most awesome script i have see. ever.

but i`m having slight problems to get this shadow/overlay
working…maybe someone can help me out?

http://rene.srcom.info
(the newest post)

Dude, it’s so daymn cool!

I’ll put the link to it in my site when I’m done with the overhaul ;)

# Andy from the other part of the world

Great script!
As per a suggestion above to have instructions to close, I added the following line in the javascript under:

objLink.setAttribute(’href’,'#’);

//add title to image link with instructions
objLink.setAttribute(’title’,'click to close and return to the gallery’);

you can check it out in action here:
http://www.redandwhitetoronto.com/gallery.php?year=2004

Thanks again!

This is the script I had been looking for since I can’t remember when! Thanks very much for sharing.

If you have a spare minute or two perhaps you could help me out, i’ve got it working on firefox but in IE the overlay.png isn’t showing, just the enlarged image.

Is this just a matter of IE or is there something I can do to make it work on both browsers?

my test site is here:

http://www.writerspace.net/o/

Thanks very much

AndrewE

Very nice work! I just wrapped it to a Serendipity (http://www.s9y.org) Plugin, which makes using Lightbox JS in Serendipity just a few mouseclicks in it’s administration panel. The plugin should appear in S9Ys Pluginrepository in a few days. You can see it in action on http://www.soeldnerdesschattens.de

if images option in browser are set off - then page buggging!!!! “turn off” the browser :(

Excellent script. Thank you for sharing it with us.

I was going to make a feature request to either fade in the PNG or give some sort of indication that the image is loading but I see that Yoav already added a loading bar and tooltip, so I’ll just request that you roll those features into the next update. ;)

Ok, I’ll look before posting next time. I see the loading bar on the site you linked to. My confusion stemmed from it not being on this site (specifically your bike post).

Again, nice work and thank you.

like the script will use it in my blog!

Terrific script!

I’ve made a few additions to make it show captions and an optional link to the original Flickr-picture. You can see it in action on my weblog, together with a small explanation (only in Dutch, I’m affraid):
http://www.lovefool.nl/2006/01/07/lightbox-fotos/

Great Script!
I’ve made a few basic alterations using the script.aculo.us library. Just some fancy fade and drop outs. You can see it at:
http://www.ajaxcms.org/gallery.html
Thanks

Lokesh, many thanks for the tip. I’ll implement it a little later on.

Alexander MacCaw,

THos effects are nice, any chance of sharing the code at all?

Very nice work. I suspect this will be very popular, I’m already thinking of ways to put it to work. Thanks for sharing!

Yep. V nice indeed mate. Ta for sharing. I can see this being used for defo.

wow what a nice little code snipplet. i already used it and it works and looks fantastic. simply thank you!

This is a really elegant little idea. I can’t wait to have a mess with this.

Cheers.

http://www.flipflops.org/

Great work !

Just got a problem, the overlay has just the size of the windows, and is on the top.
So if thumbnails are at the bottom of the page, the overlay background is too high to be visible.
Any idea ?

Anyway, that’s a great work.

wow this is great, this’ll finally be the perfect image implementation I’ve been looking for on my blog!

I was also using t he k2 theme for wordpress, is there anyway to get this to work with livesearch?

A very nice script ! But it have one slight delay: in Internet Explorer 5.2 for Macintosh it works quirky. The overlay image is not placed in tthe center of the window but the center of the image is placed in the right bottom corner of the window. The PNG isn’t placed at all but the animated gif is placed correct. Looks a bit strange … In all other browsers I tested it works great.

nice man, i really like this

Like the idea, but the overlay and loading gif don’t work for me — I wonder if it’s a compatibility issue with my browsers’ config (IE6, Firefox 1.5, both with Roboform and Onfolio).

Lokesh, I know you are inundated with support requests–talk about biting the hand that feeds!–but if you could have a look at http://www.squeakypig.com/misc/test/test.htm I would be grateful. For that matter if anyone could have a look and see if the overlay effect is working, I’d appreciate it. Cheers…
–Jon

Jon, you need to call the .css file as well for the “effects” to work. Put the lightbox.css and the two image files in the same directory and add :

in the head section of your html file and you should be good to go.

Lokesh, it might be worth including that info on your page about it as it took me a little bit to figure that out as well.

Ok, the comments didn’t let me add the code needed. See http://www.w3schools.com/css/css_howto.asp for instructions on how to have an external style sheet in your html if you’re not sure how to do it.

You need to reference the lightbox.css

hey,
ure a leged, that code is class, i might try and integrate it into a few projects im working on at the moment.
Nice one.

Wow this is a great script! keep up the good work :D

hi lokesh, very useful script u made. Not just good for blogs sites but for all kinds of sites! The downside is that some people have javascript turned off, but that’s a minority. Thank you!

As they say, “You the Man!”. Great script, wonderful effect. Thanks loads.

See at http://www.larimer.org/photos/

hi, it’s Imera again… I was thinking, if the script can accommodate some short text (eg. foto commentary) when the foto pops up, it’ll be even more wonderful. Just an idea! Great work, i’m very excited about it. :)

Very nice script.

Is there a way to force the images to be a certain size? I’d like to link to photo-gallery pics, but lots of them will take up the whole page and I don’t want that.

Thank you! this is awesome!

It looks great, doesn’t break ‘Open in new window’, and you’ve made it easy to incorporate into existing HTML. Impressive work!

Nice Blog and great script!
Here is a request, write a little script to do what they are doing here: http://www.36-degrees.co.uk/ Click Contact, it is also here: http://www.mooflex.net/ login in to the demo.

I love this ability to hide divs like this, would love if you could put a little resource together.

Thank you!

very nice work, i might need to hirer your services in the future if possible.

Great Hack. Thank you.

This is a great script, I can’t wait to use it on my new app (http://www.motoralley.com/bestdeals/)

I love this script even though I can’t get it to work. Can someone help me out. I’ve uploaded the javascript file, put the code in my header.php and used the appropriate code in my test post. Nothing happens though. Please take a look and tell me if you have any idea of what is going wrong. http://www.posnick.com/blog

Thanks

Nevermind, I just got it. I had uppercase letters in the url when there shouldn’t have been. Stupid on my part, but at least I eventually caught it. NOW I LOVE IT!

I love love love this script. One suggestion: after the main page is loaded, why not start preloading the larger images? Would make the experience even smoother.

thanks so much!
a

Wow, this is so impressive. Great idea, great execution. Thanks for sharing.

This is great - would it be possible to do the same thing for a div ? I am thinking of a login popup. Please give me feedback.

O man, you rock! I’ve been looking for something like this, something simple, beautiful and elegant for all those site galleries I have to create. I’d love to leave a credit for you on the sites I design that use Lightbox. What should I use as your credit? And once again, this girl thanks you from the bottom of her designer heart.

Fantastic idea, just what I needed. I solved the problem of a close via click comment by adding a background image with that text aligned to the bottom right on the overlay.

Modify CSS:
#lightbox {
background: #eee;

To:
#lightbox {
background: #eee url(close.gif) no-repeat bottom right;

and make an image to match.

http://www.banemacleod.com/lab/flickr/

Thanks Lokesh, works beautifully now with livesearch!

Sweet piece of code and design. I love it and will be using it.

Hey Lokesh, great script. I’m having the same problem: the overlay doesn’t fill the screen, but just creates a little 2px border around the picture. The picture is only 30px by 30px so I don’t think it increases the page height. Any ideas?

It appears in firefox that the javascript is not getting the proper page height to make the overlay cover the whole page. Even on your example page, there is a small bar at the bottom of the page that is not covered with the overlay. On my site, the bar is quite a bit bigger, It doesn’t appear to have anything to do with the fullsize image, as my fullsize image is smaller than the one on your demo page, yet my bar of missing overlay is larger.

Nice script =) very useful!

Lokesh,

Thanks so much for sharing, so folks like me can look great without having work out all the details. I’m adding this to my picture gallery that I’ve already put together. Smart work, and even better that you’ve set it up to degrade if someone doesn’t have js enabled.

Script works fine. Except that flash embedded files still overlap the popup image. frustr8.com/event-2-11.htm. Thank you!

Hey cool script, thank you! Anyone know how to get rid of the link border color around the loading gif when it pops up? A CSS rule or somthing? It only has a border around it in IE, not FF. TIA

Awesome script! Wondering if you maybe got my email? I’m the one having problems with the overlay not covering the entire page when using PHP to load all my images.

http://stinkyangelo.net/thearchive/gallery/

Simply genius.

This is awesome! Dugg it this morning, now I’m putting it in to practice.

THANKS
THANKS
THANKS
THANKS
THANKS
THANKS
THANKS
THANKS
THANKS
THANKS
THANKS
THANKS

my solution to the overlay not covering the whole page (namely in firefox) was to change:

if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac…would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

to:

if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac…would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

Nice effect.
Might be a little nicer if the image was attached with absolute positioning so as when the browser window is resized its centred.

Excellent work, this is a revolution for those who want to do not use pop up and want to open an image in full size, congratulations.

It would be useful in the future versions if the big image would inherit all the attributes (title, alt, class, etc.) of the thumbnail picture. I suggest using relative z-indexes to a variable’s value for the layers.

Outstanding work. I incorporated support for this on my forum software, and it works great so far.

THANKS A MILLION! beatutiful script!
im still in the process of manipulating it just a little to make it work on a project of mine, but feel free to check it out: www.echoniner.com/woolgathering

you’re the best!

How would you add the code in Frontpage 2003?

Very cool, nice work.

VERY nice work…

THANKS

really nice, thanks.

Thanks Lokesh for this magical script, I truly enjoyed the effect.

Just finished implementing it on my blog: www.asceticmonk.com

Wow, your site was even put up on DIGG and you your server still stayed alive!

I love the lightbox, and your site is amazing! I’ll definately be sure to check in a lot more often :D

Excellent script. Very useful and stylish!

Excellent work!! I’ll be implementing it in a gallery app that I’m working on in Django.

i used the script. looks great. thx.

http://www.redipixel.com/artwork.php

thanks for writing this script, im making a school presentation on the web and i think it will help give me the edge i’ve been looking for.

Useful when u are not using sIFR in the webpage.

GaBuBu: It does work with sIFR, only you have to tweak it al little to make the onload-event work. In the end, I just put this code in my header:

<body onload="sIFR_now(); initLightbox();">

What a fantastic idea!

Superb script. got the update for the floating captions (ala alt text) but is there a way to have text in the popup window say on the bottom. The popup caption can only hold so much info.

Excellent script, very kind to share this, you’ll probably see it all over the web now though. I cant wait for some more features to be added. I’d like to see some more transitional effects, as long as file size stays small. Thanks Again.

Really nice Script and nice Idea…
BUT:
I tested it with my mom, and said “look at the Bikes”. She clicked the fist picture, and i said “look at the next one” and what did she do? Clicked the BACK Button on her mouse. :(
So nothing to use on a normal site. The normal internet user seem to be confused with it. :(

Okay, I’m having a problem with IE. I have a dropdown form that is in the same area as the pop-up image and the form box is showing up on top of the image. This is only happening in IE, not FF.

Example:
http://www.transmatrix.net/cgi-bin/photoeditor.cgi?ID=1

Thanks so much to the “other” Jon (posts #34, 35)…what a rookie mistake on my part to have left off the CSS link. Thanks for your help!

absolutly brilliant !!!
this is one step forward in webdesign.

thanks Lokesh for sharing this with us and for the hours spend
on this project.

This is a great feature on any page to show some images. Thanks!

But somehow the title-text is not showing up on my blog: http://bok.xs4all.nl/weblog/

Fancytooltips is in the way… http://www.victr.lm85.com/fancytooltips/

woot! who needs image gallery scripts anymore? ;-)

PLEASE:
it would be very kind of you coding guys
if someone could tell me how do i add a second line
below the images title that sez something like
“Click Image to close” in bold/strong letters.

i tried to do that manually in the title=”blah” of the href,
but that is not working for me because wordpress
removes the closing and tags.

so how do we do this in the javascript?

or maybe even how do we add a tiny “X” grafic
that closes the lightbox? maybe in the top right (win)
or top left (mac) corner…

your help will be very appreciated! :)

manuel from the frisian islands

Amazing script!

But one question. In preview, after loading my image, the loading image doesn’t dissapear, so If my image is too small I can see the part of the loading image. How it could be fixed?

Thanks!

Very useful script, thanks for sharing!

Oi mate, love the script, now using it on www.xooz.be and I’ve gotta hand it to ya: it just looks GREAT. Why didn’t I come up with this myself, darnit!

Thanks a lot, Lokesh!

By the way, on my browser(IE6) width doesn’t overlayed for whole size (on Firefox it’s ok), so I added into showLightbox() function, next row:

objOverlay.style.width = (arrayPageSize[0] + ‘px’);

and it fixed the problem.

Excellent work!
I?m testing the update and waiting for that full gallery thing.

By the way, could Alexander MacCaw show us the script under the fancy stuff in http://www.ajaxcms.org/gallery.html ? The drop outs feel fine. I want that! ;)

#97

Hi leandro
you should visit http://wiki.script.aculo.us/
there you can find the effects you want.
read instructions to install javascripts -> very simple

in code you only have to change the following

line 188 //objLightbox.style.display = ‘block’;
new Effect.Appear(objLightbox);

line212 //objLightbox.style.display = ‘none’;
new Effect.DropOut(objLightbox);

you can see it in action on http://new.909.be/portfolio/1/

all kind of effects can be added.

To prevent moms and other ungeeky people from running into the usability trap of having to click the image to close it -

Add this line:
objOverlay.onclick = function () {hideLightbox(); return false;}
right below that line:
objOverlay.style.width = ‘100%’;

This is expecially important because in the people who are most likely to be confused are also most likely to use IE - at least in my IE6 the semitransparent background won’t work

The overlay works fine in IE here… Are you sure you added the CSS code the right way? :)

Uuuuhm - shame on me, of course the overlay works in IE :-) I guess I indeed need to fix my CSS.

But still: I recommend to everyone to consider using the line I added in posting #98. Yes, I know more about usability than I know about CSS :-)

Hi - I’m using the Wordpress K2 theme with this (awesome script!). After reading your commets, I was able to get this to play nice with livesearch.js (see comment #41) but I noticed another ‘conflict’. When I go to a permalinked page, two other .js files are loaded, one of which is ajax_comments.js. If this is on, the lightbox will not work. When I turn ajax_comments off, lightbox works again. If there a way to get lightbox to play nice with ajax comments?

Thanks for any help with that!

Also, Alex McCaw - nice work adding some neat effects.

hey!

this is great and beautiful stuff - thanks for this!

henry

Lokesh,

Thanks for fixing the IE6 bugs. The IE6 problem was the only reason I didn’t use this the first time. I came back to see if it was fixed and I am happily surprised. Great job.

Nick

Please help,
It works on safari but I cant get it to work on firefox 1.5 on a mac. Please let me know what I am doing wrong:

http://flighthousetravel.com/test/

Hi great idea!
I’ve tested your script without using a mouse.
I can’t use ist, if I’m an internet user who can use a mouse.

And is there a fallback solution for user who are surfing without js?

kindly regards.
Monika

This is a really great script and I have had quite a bit of fun playing around with the background, image box background and close buttons.

However, just a small thing, it would be great if we could position the box absolutely (i.e. 20 px from the top of the scrollable area). Can this be done?

Thanks for your work and look forward to a reply (by email if possible :) Great Work!!!

Ingwa

Great Script. is there a way to open the popup when the small images are in an imagemap?

Great script. I love it.

What would be even greater is if it also had a next and previous button!

re. Monika’s problem, its not that it can’t be used without a mouse, just that it could take a while to move focus to the close button.

These two additions will give the lightbox close link focus - meaning enter can be used to close it.

at ~#200 (after setting display:block on obj.Lightbox and before return false)

document.getElementById(’lightbox_close’).focus();

at ~#320 (after creation of objLink)

objLink.setAttribute(’id’,'lightbox_close’);

Hey, that’s really great! Thank you for this nice feature!
MARKUS

Hi, i’m from cape vert and i found this Lightbox JS a really nice script. God job Lokesh!

Now it will be easier for me to make my photo-galleries.

OP

Cool!

A very nice script. Thank you from Frogtails.

Great script! Thanks for it!

This is a great script I was looking for for ages, since I hate pop-ups so much.

Sharing your work is very appreciated, thanks!

Lokesh,

Great script! Everything is working fine for me except one thing. I use the “float” attribute inside a table to space out and stack the thumbnails of my images. If there are a lot of images on a page and I click on one of them before it loads all the thumbs, then the script is never called and the linked image simply appears in a new, normal browser window.

Any clues here so that the script works even tho all the thumbs aren’t loaded?

Thanks for any help!

Dave

Brilliant!

A problem with Firefox is the default setting is to open pop up windows full size. Now it doesn’t matter what settings or what browsers my visitors use.

This has made my site more professional.

http://www.gdaywa.com/extras/hol/hol.php

Excellent Script!!!!

But, I’ll second the notion - is there a way to trigger the script from an image map since rel=”lightbox” wont work in the tag?

Any one care to share a link where Lightbox is being used with sifr? I saw it mentioned in comments 84 and 85, but no link was given.

Great but….

IE reloads the full image every click, firefox is instant after cache. tested on several PCs?

Can anyone help?

I amusing large images with my lightbox script. Does anyone know a way to program this so when you click onto the larger image to return to the thumbnail, it goes ?exactly? where you originally clicked the thumbnail.

This allows for easier navigation. Any help would be apprecitated.

Great script!

wow, what a great script indeed!
but im having some problems with the preloader, and the litle ‘x’ gif on the corner…they dont show up…i dont know why! ive uploaded all the files to the server, but still nothing…am i supposed to change somehting in the .js file? if so, how?

any help would be appreciated.!

Awesome script man!

It’s too bad browsers like to put flash on top of everything else, because I’d love to use this on pages with flash elements. However, no problem, I created a page minus the flash for use with this.

But there’s another problem for me! Works great in Moz, but in IE 6 the background png doesn’t show up at all. I’m susing your exact CSS code with no modifications to the background part. Any ideas what could be causing this?

Here’s the link: http://lisefski.com/blank-cali-01-06.html

i just want to say that this script is really awesome. i cant wait to see it working on my own site soon :P

just a question. when i tried to seperate all the files into folders, i.e. the .js file in a ‘js’ directory, the css file in a ‘css’ directory and the images in a seperate ‘images’ directory, the overlay doesnt seem to work. or is it just that i am testing the thing offline?

I love this script a lot. I am going to be using it in my World of Warcraft site but was woundering if there is a way to customize it. What I wanted to do was to have it pull up images or another page, more php then html. So when they click on a members name it brings up a small div with their info and a few images and some php includes. Also do a random effect like the drop out or fade out. Is tere a way to do this?

Thanks in advanced and thanks for letting everyone use LightBox.

Could this be altered to display movies, or any other media, instead of images? I mean there is no reason why you couldn’t insert the appropriate embed or object tags to do this right? Javascript makes me retarded so I have no idea where to start.

The script is great, clean, simple and looks fantastic.

Keep up the great work :)

Very very good script. ;)

I would to use the script in my php gallery but my images link are not in standard format (Ex. img/temp.jpg). All images are generated dynamically by php script (Ex. album.php?id=12) and the Lightbox script don’t work.

Do you have any suggestion for me? Tks :)

Has anyone been able to extend the dark background on IE? If the page of images causes a scrollbar to appear, and if I scroll down, and click on a picture, the dark background doesn?t fill all the way. It was fixed in FF, but the problem still exists. Does any smart person out there know how to fix it?

I’m getting this:

Method Not Allowed
The requested method POST is not allowed for the URL /lightbox/text.html.

Any ideas?? It’s meant to work like this:

http://particletree.com/examples/lightbox/

I uploaded everything I had too, it works on the comp but not on the server. Please advise.

Martyn

whoops

^^^^^^

http://www.apachestudios.com/lightbox/

Thank you Lokesh. I know a lot of us throw bugs to you, but it is only because it is an awesome script, and we want it to work perfectly. Thanks for looking into it.

Hi!
Did anyone try this script with an animated GIF? I got some funny reactions in IE 6 for it will open the picture again and again and again and again…
It works fine with normal GIFs (IE and FF).
Any ideas?

Great script anyway, thanks!

chris

Playing around with your script, it’s really cool. However, I have Flash files on the site and they stay on top, even if I add a z-index call to the css file. Is there a workaround for that, it defeats the whole purpose of your script if someone else is on top of it? let me know, i’d love to use this.

This is a very cool script! however, there’s a minor problem with the layout. If there is not a vertical scrollbar on the page, it will appear when you click the thumbnail. This causes a horizontally centered page to move a bit - but enough to disturb - to the left. Then when you click the image to close it, the page moves back to the original place (and vertical scrollbar disappears).

now, what i’d like to have, would be a fix that would prevent scrollbar from appearing and messing with the centering. So no scrollbars what so ever if the picture fits the screen anyway. It must be becouse of calculating the dead center point with JS but is there a workaround for this?

Great script! Love the recent updates to it, as well.

Deployed on this site:
http://willseberger.com/

Using it for numerous photo portfolio pages.

I’m also playing with the update to this script found here:
http://www.alwaysbeta.com/2006/02/08/building-ab-customizing-lightbox/
I like that this can be integrated with Moo.FX.

lokesh,
everyone is so thankful for your genius + generosity!!! this is a fantastic script (we all concur :))

quick q: if i want a lightbox when my page loads, do i just call the javascript in the body tag? ??

a big fat TY

Oh-my-GOD! I’m panting like a little girl!!!

You are a [insert hyperbolic expression] genious!!!
Thank you so much for this… I will now go worship you as an Idol… ;)

I tried using that script and I can’t seem to get it to work within my page. I can make simple ones and get them to work but once I try to add the script to my page is doesn’t work. I cleaned up my styles like someone mentioned but that still didn’t work. What could I be doing wrong? Thank you for any help.

-Ryan

here is the page:
http://glorydayssportspub.com/photos2.html

thanks again.

Love the script. Solves so many pronlems! I have used it a lot and clients and user alike love it.

I did run into a problem with IE6 however. The overlay loads briefly, but then the page redirects to a new page and just displays the image. the url of this page is the image path. I’m puzzling through the js file, but would love any input from the group here.

Can I use this in a commercial web page? I would modificate it a little bit. It’s a web page for a friend. He is self-employed. It’s not a big company or anything.

I found out that the problem I described earlier (#141) doesn’t appear with opera. Firefox and IE seem to have problems. Another bug I found: There’s an issue with the very first time you’re using the script. This bug also happens with IE and FF, not with opera.

the first load with IE (6) causes the loading-gif to appear in middle-top instead of dead center position. So the loading animation just runs above the picture all the time.

the first load with FF (at least 1.5.0.1) doesn’t use the script at all! after the first time you use the script it works as it should. so if you go to my page

http://www.jarmovalmari.com/gallery.php

and click a thumbnail. it goes to a new window window (as I have defined in a href tag).

IE6 also creates a vertical scrollbar some scrollable - which should not be needed since the picture already fits the screen.

Is there any way for the images to reference the script before the page is loaded?

I have a lot of images on one page that can take awhile to load, and if you don’t wait for them all to finish the image link pops up in a new window.

Anybody know a way around this?

Thanks

AWESOME script BTW!

Lokesh, I emailed you yesterday about a problem I was having with Lightbox in IE 5. Well I found a way to fix it, but I don’t know why it works.

In IE 5 the image frame went all the way to the right edge of the browser window. Adding a rule to the css fixed it:

* html #lightbox {
width: 1px;
}

In my tests, any width value solved the issue. Hope this helps!

Thanks for such a superb script. Was looking for something to replace the design I was using on my website and this came in handy. I am using it to pull images from a MySQL database and it seems to be doing the job very well indeed :)

http://www.grafikkaos.co.uk

Thanks

hmmm, could you help out with my script, i think i did it by the book but not getting the functionality (ignore enlarge image button)

http://www.englishtrunkshowco.com/category.cfm/categoryoid=1

thank you,
rob

I have no problem running the script with asp… but not working with coldfusion MX 7 when the page has a form !

I have had a look at your site… where are the images exactly?

hi thanks for helping, the imags are with the js and css files in englishtrunkshowco/css

really nice, i finally just got it to work in both internet explorer and firefox, sweet.

Hi Rob,

I would need access to your main filesif i am to see where you are going wrong with the lightbox script.

email me at emmanuelokorie[at]hotmail.com

Thanks for a good script!!

Could someone be kind and tell me the line of code that tells it not to unload when the user clicks outside of the image box (a.k.a. the greyed out area)? I just want to be able to unload the box if the user clicks the “x” or the image itself (which it does that now).

Only thing i could find that may be it was the:
objOverlay.style.display = ‘block’;
in the function showLightbox(objLink) call… however that did not work.

Thanks for your help,
David

I thought IE doesn’t support Alpha Transparency in PNGs? It appears to work though in Opera, FF, and IE. Did I miss something, because i’ve been using straight CSS alpha(even though it doesn’t work in Opera).

nvm, i figured out the CSS hack in your code, but what does the ‘* html’ mean in CSS?

I would suggest the addition of a pre-caching trict to get the big image to load.

Something simple like :

This way your script will just pop the larger image on the screen.

- Brian Allen

My Home

Hello Great scritp I am going to use it for my Photo gallery and I implemented it in to my blog (http://tranquiliste.free.fr (look at the pic of the watch).

But I have a dumb question : how to increase or decrease opacity of the background?

Thnaks again

164 Lokesh: Thank you, i got it working now.

I have another question though.. what was the code for hiding the select boxes on a form before the image is displayed?

Thanks again.
David

Op, well i just found it :o)

Thanks anyways,
David

Hi,

Just thought I’d leave a thank you not. I’ve just re-built my site and used Lightbox for all my portfolio pages, it’s fantastic. I’ve linked to you on my Links page and on my blog, great work…

Jago

http://www.jagoillustration.com/

http://jagoillustration.blogspot.com

Hey Lokesh, beautiful piece of work. I’m having one problem with it though… Actually I’m using Lightbox Plus for wordpress, so maybe I’m barking up the wrong tree here. Anyway, I’ll give it a shot. When I go to validate my page (I’m using XHTML Transitional 1.0) I get 5 errors. It seems the script is automatically adding rel=lightbox to my anchors AND to my images. When it adds it to the image, it adds it after the ending slash:

Like this:
border=”0″ / rel=”lightbox”>

Is this something I’m doing wrong or is it something in the “Plus” plugin f