Lightbox JS v2.0

I’ve just started using LightBox on my blog - and now you have an upgrade! Whoa!

Thanks Lokesh - browsing the internet has been quite useful for me in terms of learning about the possibilities. Thank you for sharing.

/is excited

What’s new on Lighbox 2.0?

Lokesh! thanks much…can’t wait for it….well I guess I can…i’ve been waiting for some time already…but thanks for pulling through!

And? almost finished? Can’t wait! :-)

making whats already great even better!
Lokesh is my hero.

Very exciting! My money is on the slideshow feature we have been hearing about.

woot woot! I will be checking back often, very excited!

Wow I cant wait for it :)

Looking forward to it. I’ve already used Lightbox on my wife’s website for her class, a freelance project I’m working on, and a redesign of a website of mine (using WordPress). I can’t wait for 2.0.

Here’s hoping that the slideshow feature makes it in. That’s the #1 request my wife has given me. She wants to hit “back/forward” links to browse the photos instead of escaping and clicking the next photo. I must admit, I’d like that too. :-)

You need to slow down, you’re making the rest of us look bad.

the demos are amazing! I was about to install Lightbox JS after discovering your site a couple of days ago. after seeing the demo, i’m going straight to v2.0

#11: On the contrary, you need to speed up.

Oh my God…

James wrote: “Oh my God…”

You took the words right out of my mouth. Stunning!

Totally gobsmacked….

definetly stunning.. waiting for it anxiously indeed.

Just saw the demos! Amazing work! You set the original bar which other people imitate and improve on, then you come out with this and set the bar even higher! Great work! Cant wait to use it.

Lokesh, you rock! I am filled with anticipation, and hope you have the bandwidth to cope with the flood of traffic when you release it.

lightbox roqs. the demos are great.

Beautiful.

WOW, This is awesome! Thanks for setting the bar even higher!

I thought Lightbox is exciting and could never be one better. Then Lightbox 2.0! Great
Waiting for the release

This is *very* exciting. Thanks for all you do and letting us humble script kitties use your brilliant work!!!!

http://www.lokeshdhakar.com/projects/lightbox2/ seems to be the new page for v2 :P course it might not be since its more a holding page

The preview does not seem to work in Firefox 1.5 for Windows. Has anyone else had this problem? Works fine in IE.

Works fine for me in FF 1.5 and IE 6.

Oh, and the demos are even cooler than I imagined they’d be. I can’t wait to get my hands on this and add it into my websites. (My wife is sure to be very happy with the change.)

as Serge said, it too isnt working, in Firefox 2.01a and IE7, IE6. Only one that works is tke keys image rest just load image plain and simple.

When I first saw Lightbox, I was truly ecstatic and quickly implemented into my blog, and I thought it is perfect. But when I saw the demo today, I was blown away. Man, it is so cool, so smooth and at the same time intuitive. I am anxiously waiting for its release, and thank you so much for your devotion on this project!

I like the improvements

http://www.lokeshdhakar.com/js/lightbox.js

You are to be commended. This is absolutely amazing! I was in the middle of trying to find a gallery script for my client last week when I found your lightbox. The *only* thing I could have wished for is the ability to move between photos. I have put off my client for the last couple of days when I saw your update hoping to install your new script, which I’m sure will blow him away. I am sitting by my computer waiting….

Side note: It does not work for me for Firefox v1.5 either. It just linked directly to the photos. But, amazingly, didn’t have a problem in Netscape 7.2, IE 6.0 or Opera 8. Any ideas why??

My apologies, Lokesh. I spoke too soon. The Web Developer bar in Firefox had ‘disable Java’ (but not JavaScript) and ‘disable minimum font size’. One of those must have messed with it, because its now working in Firefox 1.5 for me.
-Sorry.

Awesome. I’m going to be using a modified lightbox for my wordpress blog. Thanks for making such a useful script!

Its cool……. Like the improvements…

Keep it up…

http://www.ajaximpact.com

Just in time for reboot! I cant wait to play around with this.

The fade effect is neat but where is the picture? Safari just shows the overlay.

Very nice new features… However, maybe you should make the images appear quicker in the slideshow (don’t wait for their frame to have finished its resizing… maybe trying to fade-in a ratio-preserved image inside the frame, as soon as it has successfully been loaded).
Kudos and thanks for all your work !

OK, it works for me now.. Its glorious!

Hey.

This is awsome. I have been looking for a gallery script for some time now, but can’t really find anything that meets my needs of intergratability and some other stuff, this does…as long as i don’t have too many pic’s to show, hehe…It takes some fiddeling to manage many pic’s, but once started and having to add a minor number of photos…Well, it rocks. I can’t wait for the next verision either…One thought tho…Is it possible to speed it up some, I’m currently on 2Mb hook up and it’s kind of “naggy”…

This works in both IE and FF for me, btw. FF ver 1.0.6 is good.

Regards - Patric.

Side note: It does not work for me for Firefox v1.5 either. It just linked directly to the photos. But, amazingly, didn’t have a problem in Netscape 7.2, IE 6.0 or Opera 8. Any ideas why??

I dunno if that really is a bug but , if the file size of the document in which the lightbox is included / used is huge :” heavy or wat ever [initLightbox()] is invoked only on [window.onload] so this might result in unexpected direct linking to the images , so it wud be better we invoke the function immediately after your links/gallery.

Great work Lokesh , Mujhe Khoob maja aaya iss script ko dekhke , great work man .. and a small dbt :D are u using Prototype for this if yes its too heavy , hope u wud this liteweight http://moofx.mad4milk.net/#methods its a small library and its good .. and the array idea was around my brain and u finished implementing it even b4 i cud get some time :X

Regard
Ek Acha Ladka

Oops how cud i forget this …. loads of kisses and hugs to all you girls who ever posted here and made lokesh happy , candies and roses xtra for every girl whos smiling right now .. beers for us .

I mistyped my email lol

Hi there!
I really like the script, and I attend to use it on my website, which is comming soon, you’ll be noticed and credited as well ;)

cya

Digg it!

Lokesh just tested it in IE7 and Firefox 2.0a1 and works a treat very nice work!

Thanks Lokesh!
I have been checking back every hour or so in the past couple of days, now I’ve got it up and running and it works like a charm. Thanks a lot!

Thanks again, I am currently incorporating it on my website.

With all this traffic for V2 it will be a good test of DreamHost, let us know if you have any problems.

Kevin

Lokesh, how do you do it? Everytime you pull togethera new version f lightbox its great! V1 was good, the initial updates made it better, and now version two is stunning! its easily the most gorgeous image “thing” in the world yet!

Thanks Lokesh,

I love the way you did it! so COOL and nicely done…
Great JOB! Always keep up the good work! Many Thanks.

KeanTat

Excellent job, thanks much

It looks very nice. Unfortunately, I think I’ve turned up a potential bug. I was trying to integrate it into my wife’s site but it kept messing up. The photo pop-up would appear only way down on the page, and wasn’t styled.

After some debugging, I figured out that the stylesheet wasn’t being loaded up. I took the original, unzipped download and tried altering it bit by bit until I found the cause. For some reason, the script doesn’t like the CSS file being in a “Stylesheets” folder. It’s ok with “css”, “style”, and even “Stylesheet”. But add that last “s” and it bombs out. I’m not sure why this is, but I thought I’d let you know.

(Until the bug is fixed, I’ll put the CSS file in a “css” folder.)

Very nice. Is this LightShow added to LightBox? Or will LightShow be a different script?

Great job. I’m pitching a few projects for which I intended to use (and modify) lightbox to do much of what you’re doing here.

Well done, and elegant. I like your style.

By the way … didja notice that Wired.com is using lightbox (or perhaps they’ve coded their own version) for pop-OVER advertising?

Man great new features with that image grouping - I had hacked my own together but yours seems “mo betta”.

Thanks for the hard work!

rYno

I reported earlier that the preview did not work in Firefox 1.5, well I’m glad to say that the final version works fine. Great script. I will try it later today on Safari at work; the preview really messed up the screen. Thanks!

It’s incredible how something so small can grow out to be one of the biggest hypes and subjects on the web! Really nice work, and an incredible update as well :)

There is only 1 minor thing I’d love to change however;
- The animation is a tad slow for me personally. Is there a way to speed it up a little (and if so, how?).

For some reason, with all that fast internet going on around the world, (at least it feels like it), I like portfolio-/imageanimations to go faster :)

But kudo’s for making this miracle!

brilliant!!

can I use this for commercial-use?

A couple problems – or actually 3.

1. I get a small box about 20 pixels wide in the bottom right corner of the white “frame??? of the picture that is not filled in.
2. The images show up in the bottom left corner instead of being centered.
3. I have tried all of the possible path variations but I can’t get the previous and next images to show up.

Lokesh,

That is some amazing work on LightBox 2.0. Really well done! A good example about the power of JavaScript

Rushi

hi, i’ve mede some changes to lightbox. http://maro.kristfest.cz/rocniky/valasske-mezirici-2004/fotky With mod_rewrite it’s very powerfull fotogalery.

This is awesome thank you very much! i am useing it on my blog (www.willstumpf.com/blog)

it works fine for me i havent had any errors yet (i havent been using it that long though :p)

well thanks again!

Will Stumpf
www.willstumpf.com

Good work!

One problem though. If the image is bigger than the browser window, the overlay won’t cover the parts you have to scroll to see.

This was not a problem with lightbox v.1. How can I fix this problem? Appers in all browsers (mac).

Thanks!

Regards,
Ivar

Excellent Work… this is very well done.

http://mobiko.blogs.com/mutant

Hey, great to see the progress! I updated my photo gallery with the script too!

ojacko

I’m having the same problems outlined in message # 58 when i open up my gallery in IE6. It works great in Firefox. nice job!

More problems.

- I can’t get the “Gets keycode. If ‘x’ is pressed then it hides the lightbox.” to work.
- Have you removed the “click on picture to close” function?

You might want to make sure your DOCTYPE is set correctly. The index.html in the download has the correct setting. I was having troubles in IE and the DOCTYPE was the problem.

Now my problem, can the caption box be resized for larger captions (I realize its set in the css, but I don’t want to set it to 200px because that doesn’t really solve the problem.)?

I just took a look at the demo, there’s only one word I can say, amazing!

Great work!

Person #1:: Who’s the man?

The World:: Lokesh is the man

#67: My doctype is set (HTML 4.01 Strict), and the code is validated.

thanks, johnny rocket, that was it. works properly in ie now

Ok - changing the DOCTYPE sort of fixed it.

The image now loads in the middle of the page like it should and the missing box shows up. BUT changing the DOCTYPE obliterated my CSS menu. Doesn’t matter if I use 2 different style sheets or incorporate lightbox.css into what I already had. Same results.

So I’ll keep playing with it ……

Hi,

great work! I really love the look and feel of your script, however I miss some functionality from Lightbox 1.0:

.) Pressing the x key in Safari and Firefox doesn’t close the pic again(I guess you forgot that and it is really easy to add)

.) Clicking outside the picture frame doesn’t close the pic anymore(also easy to readd I guess)

Although these 2 things are just small ones I really miss them and hope that you readd them. Further isn’t it possible to add in addition to the mouseover that shows the next and prev arrows, to ask in Javascript where the mouse actually is so if you click on the arrows there are still blend in on the next one. Right now you have to move outside the pic frame and then the script recognizes the mouse and shows the arrows. I think in terms of usability design this would be an important addition.

Well excellent work, and keep it up!

Greetings from Vienna,

Mauti

Ups my thoughts jumped a bit here again:

* Further isn’t it possible to ask for the current location of the mouse, in addition to the mouseover that shows the next and prev arrows. So if you click on the arrows there are still blend in on the next loaded picture. Right now you have to move outside the pic frame and then the script recognizes the mouse and shows the arrows. I think in terms of usability design this would be an important addition.

Here it is incorporated into our site!

Ezell Aviation

Check the latest P-38 update.

Hey lokesh - Greak work, now i need to look how i can upgrade my gallery plugin without breaking anything :)

Thanks for sharing and keep it floating

Fantastic work Lokesh! Love your work.

A few of points of feedback:
1. Prototype.js and scriptaculous.js are very large requirements for projects where bandwidth is an issue. I agree with #41 that Moo.fx is a much smaller (3KB) and equally competent library and works well with their own mini-prototype, Moo.ajax (which is great also). If there was a Moo.fx version of lightbox.js, I would be much more inclined to use it for more projects.

2. The transition animation could stand to be a little faster. That looks easy to alter in the resizeImageContainer function, however, perhaps a variable for animation duration/delay in the config section at the top might be a good idea.

3. While on the subject of configuration, it would be great to be able to specify the position of the caption (top or bottom), as well as the corner for the close button (tl, tr, bl or br).

Thanks, not only for all your hard work, but also for sharing it with all of us.

I would love to be able to pop up a page similar to this
http://www.arsenal.com/player.asp?thisNav=first+team&plid=60089&clid=4421&cpid=703
so I have the picture and some text accompanying the pic…I need to produce a staff page for a website and need more than a picture.

If anyone has implemented something similar please post links to examples or even better a web page guiding through the creation process.

Could this be done with what post #41 mentions…moo.fx?

Thanks,

Carlton

This looks terrific. My question: If I don’t want to show any images on a page, such as a list of galleries, but launch from a text link, can you tell me how to do it?

Just want to say thanks Lokesh. It’s a great script and it was very easy for me to implement. I’m using it for the photography portfolio section of my site.
You make me look awesome!

You can see it in use on my site here:
http://www.banglogic.com/photography/folio1

Thanks again,
-k²

HI:

Great work! I’ve run into a problem with IE7 (ver. 7.0.5335.5) however. Whenever loading the page, I always get the same error, “line 627, char3, can’t execute code from a feed script”. And the lightbox doesn’t work. Manually refreshing the page always fixes the problem completely. Any workarounds for this?

Thanks again,
Bart

wow…I posted this story on Digg an over 1100 diggs!!!

woo-hoo!!

Great work! Just found original, and this is much better. Keep em coming!

Suggestions for future releases:

Ability to click image or outside image to close image.

Inlcusion of the resize feature seen in Lightbox_Plus.

Otherwise, keep kicking ass!

Impressive. Most impressive!

I set up a test page on my site:
http://jasonfricke.net/lightbox2

I made some minor changes to speed it up.

There are a couple of bugs you will notice there. One is that the forward navigation image does not anchor to the right side of the frame, but floats several pixels inside. Second, the caption box is less than the width of the frame, it is the width of the image. The images are 800×533. I haven’t tried with smaller images yet.

I just recently came across your gallery system and I am simply amazed. Its freakin awesome. - Ryan

OK… i’m having a really tough time with this.
I downloaded the zip file and when i try to open the included index.html in FireFox 1.5.0.1 the sample doesn’t work at first… the image image link takes me to a page with the image in the upper left corner.
I try again in a few seconds, without closing the tab, but hitting back and then the same link again… and all the pretty stuff works.
I even tried clearing the cache between the first and second try and I get the exact same results. I’m really confused.
When I try this in IE it works just fine.
any ideas?

Hello,

I was trying lightbox V 2.0, but i have a little problem.
You can see the result at

http://users.telenet.be/prebenhermans/screen.jpg

can somebody tell me what i’ve to do, to get the right arrow beside the border?

Thx

Hi preben, I have the same problem ,too.
and I has one more problem, the photo isn’t shown in the middle of browser.
http://img53.imageshack.us/img53/7663/problem6we.jpg

i dont’ know how to fix, can someone tell me how? Thx.

Nice work, I’ve dropped the Lightbox 2 stuff into my Wordpress install with no problems at all. I did find notice that when I ran a speed test against my site, I was getting 404s for the javascript files called from scriptaculous.js. Are there a couple of files missing from the download?

Is it possible to supress the image’s width and height information?

Thanks for this great script. I could never hope to write anything like this.

Paul

Great script! May I give you a pat? *pat*

You made my day! :-) Really good job.

Hey!

Great script! And a very nice way of useign jscript…!

“Just” push the site up, looking n1er - whitout making the user with no-jscript unable to use your page! Great!

I hope I can include your script(s) at my new browsergame…

Dave (from Switzerland)

Hello Floria,

I know the solution for your problem,

in the lightbox.css file you see in the top this code

1 #lightbox{
2 position: absolute;
3 top: 40px;
4 left: 0;
5 width: 100%;
6 z-index: 100;
7 }

Now you have to change rule 4 from
left: 0; to left:30px; for example.
I have changed it in my website to left:30%; and now the pictures are in the middle of my browser. So you have to try untill you have the right value.

Greetz!

P.S.: If anyone know the solution for the problem in comment #88, please help us!!!

really nice work !!!
thank you

I create a wordpress plugin based on your script.
http://www.4mj.it/lightbox-js-v20-wordpress/

Brilliant work!
Donation sent :)

For #82, I had the same problem with the ‘could not execute code from a freed script’. Googled it real quick and came across mentions of needing to have links to the js after meta information. Only showed up in IE. Sure enough, I had pasted the links above the meta; swapped and never had a problem.

Now I need to figure out the how to fix the right nav arrow not being against the right border in IE7.

Great improvement.

HOWEVER, one of the most important thigs (that is also present in other LB mods) is overlooked: what if the image that is opened is larger (in height, for instance) that the window? overlay no longer cover the buttom part of the screen.

It’s a simple fix (re-calculating the page size and redoing the overlay image) and I wish I knew JS to make the chane. Would anyone look at this please?

Thanks :)

OK. I played around and added the following:

if (typeof(originalheight) == "undefined") { originalheight = pageHeight };
before “return arrayPageSize;”
AND

if (imgHeight > originalheight) { Element.setHeight(’overlay’, imgHeight 180);}
if (imgHeight <= originalheight) { Element.setHeight(’overlay’, originalheight);}

before “this.showImage();”

perhaps there’s a better solution. this corrects only VERTICAL scroll area.

I clicked on Lokesh’s donation link, and noticed that only 15 people have donated. Seems to me with so many people using the script and asking for tweaks/fixes/improvements that all the people using this code could at least drop him something for his time and creativity - plus his willingness to share.

I haven’t had a project to implement this into yet, but will certainly donate in appreciation when I do.

Nice work, Lokesh.

I’m blown away by this! Your hard work and attention to detail is outstanding.

Excellent work.

www.pauljamesdesign.com.au

are there plans to dynamicly build image list gallerys with this ???
Like stick the index folder in a folder with lots of images

I’m trying to implement LB into my MovableType photoblog. My main index contains the current entry, which is a thumbnail image linked to its original. When I create the entry, I use the rel=”lightbox” attribute in the image link tag and it works perfectly.

However, in the permalinked/archived version, clicking on the image simply produces the new image in a new window, without LB. All the LB code is identical in both templates and the links all point to the same locations. I can’t figure out what the problem is.

Here’s the site (which isn’t even ready for primetime yet — the only archive is the current entry, so click on the image title to get the archived version): optic anarchy

very hot.

Very very nice.
But i have a problem:
For Preben on #88: How did you rezolved that problem ?

isn’t there a feature to automatically resize large images to fit inside the screen?

-Ethan

Hello gabriel,

i haven’t resolved my problem yet.
I’m still searching in the code.

If you know how to fix it let me know plz…

Greetz

Hi!

The new version works fine for me at: http://www.colorful-sky.de/workshop/index.php?idcatside=79

Thank you very much!

Preben, in your page do you have any other divs ?
In a simple page, just like the example in .zip, woks perfect.
But i have a php (smarty) + mysql image galery where i have other divs.
It seems not to like my divs :)

Such a great gizmo! How could I have lived without! *gg*
Please continue the great work!

Johannes

Problem resolved: in lightbox.ccs instead of “53% left” i put “left 53%” , same change for right. Not working in Firefow 1.5 …….

Nice work but you’ve missed a usability problem.

How should an average first-time user know that you can navigate between images in image sets? I discovered the mechanism by pure luck when I hovered the middle right/left of an image. I think it should be more obvious than that.

sagerao! lo usare!!!!

So far I Love the modification

chulo chulo… muyyyyyyyyyy chulo…
thx for the work!!
;)

Anyone have the 2.0 zip file around.

2.01’s movement/positioning are all borked up.

I’ve switch addLoadEvent() to scriptaculous Event.Observe for event handling. Plus I’m sort of updating my previous Lightbox plugin — http://zeo.unic.net.my/2006/03/29/lightbox-js-version-20/

Does anyone else have to put the full url to the images in the lightbox.js? They will only show up if I do.

Very nice. I may be doing something wrong, but the lightbox windows won’t close when I use images larger than about 500×500 (which I don’t really WANT anway but…). When opening large images the “X” button doesn’t seem to work - not sure if it’s an issue with Firefox or something else. Anway, this is great - I’m not much of a web designer and I got it working in no time.

When using the script on Firefox 1.5 (WinXP SP2) with the Cache disabled, the image that was previously loaded, load first, and then it displays the right image. In IE6 works fine though…

In IE6, it’s not centering the display window, in Firefox it’s fine.

I’m using

Naturally, if I drop the doctype, it’s fine. I made any adjustments suggested in the FAQ and read here, to no avail. Any suggestions?

Beautiful! It took about 20 minutes to integrate this into ~400 sites here (click on a photo to be taken to a photo album that uses lightbox). I am really excited to start getting some customer feedback.

Anyone know why Firefox puts a dotted line around the half of the photo that was last clicked? I think it is a Firefox feature to show the user which link was last clicked… anyone know how to turn this off (in the script)?

Great job got it working on my site really easy But I not sure how to make indepent captions to say what the picture is about.

am I doing something wrong?

Hi Preben,
thx for tour reply, I’ve solve my two problems at all.
I take the new version Lightbox JS 2.01, maybe you can try it.

http://www.lokeshdhakar.com/projects/lightbox2/
v2.01 - Centering in IE6 (any DOCTYPE) fixed.
Smoothed out resize transition.

Good luck!

Nice upgrade, but I have 2 ideas and a question:

Firstly, the fade to black of the background page only seems to happen after the image has loaded, or at least after the white box has appeared. I think this’d look better if the black-out was the first thing that happened.

Also, when clicking through multiple images, It might look better if one picture faded straight into another, instead of jumping to white and then fading it in.

Finally, how can I initialise a set of images only using a single link?

Ah no, it wasn’t the late fade-in of the black that I meant, it was the sudden appearence of the empty white box.

Great script anyway, I’d have no idea how to start something like that.

Regarding my previous post (#105), it turned out that I had the three lightbox javascript files listed out of order on my archive template. Once I put them back in the right order, everything worked perfectly.

I’m using Opera 8 and it seems that the overlay is completely black, as ooposed to being sem-transparrent. It appears to be working ok in FF 1.5 and IE6. Anyone else having this problem?

also….. if anyone has any info or a link to somewhere that does on using Lightbox with iframes/dymically loaded pages… feel free to post it. There was some discussion before, but no definate answer…. I just thought I would ask, seeing these posts seem to be more active.

ok, ill stop spamming here in a sec. I actually need a solution using lightbox when loading my gallery into divs with AJAX.

You can see an example of what I mean here:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

and you can see where I am trying to use it on my site….You will notice it works fine on the main page… but if you click on the ‘portfolio’ link at the top, which dynamically loads the content into the div, lightbox wont work anymore…. any solutions?

http://www.pauldonnelly.com/portfolio/index.htm

Using wz_tooltips makes the caption disappear. It doesn’t seem to be a font color issue. Is there a way around that?

Nevermind, replacing the first instance of “title” in lightbox.js with “alt” and putting the caption into the alt text restores the caption.

It would be nice, to be able to insert links into the caption.

If you use loading ID on your other application this will break Lightbox 2 loading spinner. The spinner will fail to hide or disappear when Lighbox is done finish loading the image.

It’s either you change Lightbox 2 loading ID’s in lightbox.js and lightbox.css to something else that’s unique or vise versa.

I have created a huge success Joomla LightThumb based on the lightbox -script.
http://extensions.joomla.org/component/option,com_mtree/task,viewlink/link_id,412/Itemid,35/

Fantastic.

Hi,
got a problem under Mozilla 1.5+ and firefox

Hi, (second post, my precedent message had an html tag, sorry for that)
got a problem under Mozilla 1.5+ and firefox before 1.5 on Mac OSX : region to click to go to next or previous image is limited by dotted borders after a click. Is there a way to hack that thing ? Thanx in advance…

TM

Does anyone know how you would center both horizontally and vertically the lightbox DIV within the browser window?

Currently it positions centrally horizontally however it lies just 40px from the top of the window…

Any ideas?

Also does anyone know how you turn the image resizing off when you scroll between images in age sets? As I have images of identical sizes…

im having the same issue posted in #139

any ideas?

to #132: after you change the innerHTML of a div, run initLightbox()

#143 Vladimir,

I have the same problem, but calling initLightbox() after the update doesn’t seem to help.

I noticed someone else mentioned the inability to put links into the captions. I don’t know if that is possible, but if it is I’d love to see that in future versions.

your are a god among men, I commend you and your hard work. Your script MAKES my site’s gallery, without it, my gallery would be nothing. Can’t wait for the caption update.
http://serdmanczyk.homeip.net

Thanks for your script. But I ran into a problem of the fading property:
when click on an image, the PREVIOUS image did the fading and then the current image jump out of nowhere. the fading image is supposed to be a current image.

Please tell me what to do, thanks

I forgot to mention that test browser is FF 1.5. This does not happen in IE 6.0

ROlF?

thanks !

K

Thanks… it’s rocks!

Greetings from Indonesia.

Hi Lokesh, I am very impressed with your development of Lightbox JS 2.0. I notice that there is a bug (minor) while loading the image, under Microsoft Internet Explorer (IE). I used IE 7 Beta 2 Preview, and it might occur under IE 6 as well.

Basically, upon clicking the thumbnail, the background with darken, with the image showing. However, if my page is very long that users need to scroll down, then there I have the “darkened background” isn’t fully 100% of the page. You may take a look at an example here http://keith.hostmatrix.org/location.htm and by clicking on one of the maps.

The bug is not existence in Firefox; only in IE.

I’d also be interested in finding out how you could align vertically the lightbox div as mentioned in comment #140.

I’ve had a look but havent worked it out yet…

I just plugged it into my web page. wow, worked the very first time!
Link: http://infinitegood.net/kite/index.php
Its a small link at the bottom of the page but very cool.
Thanks dude!
Pete

Lokesh, I’m eager to try out ver 2. Thanks.

We used Lightbox on a recent interactive on our museum Web site with an imagemap. We’ve gotten some nice compliments on it.

One thing that would be helpful. Right if you use the title tag to incorporate captions on the images these titles appear when you rollover the thumbnail. Unfortunately, we need to format our captions using italics for artwork titles and the code entities are showing up on the rollover. Didn’t look good so I decided the only workaround I could do was to add the captions within the larger graphics and forget the title tag. It would be nice, however, if there was a way to fix the title tag issue.

Hi,
great script. However, background isn’t fully 100% of the page when I try to scroll my page. A little bug: it’s impossible for the user to save/download the images: when I try to right click on the image..the option “save image as..” in firefox doesn’t appear… :(

best regards from Italy

Hello,
Thanks for awesome functionality.
I just have one bug problem:

In firefox 1.5 i get a blinking vertical line somewhere in the middle of the photo , probably just between the active areas for left and right button. This does not occur in IE, and it does not occur on the first photo (with no left arrow) and on the last photo (with no right arrow) so it seem to be related to that. Does anyone know about this problem.
check it with firefox 1.5 at www.aahren.com/photos/

Thanks a lot

To 144:

I don’t know what to say except to suggest that you carefully check your code to make sure that all links have “rel=lightbox” AND that you run “initLightbox();” (without any parameters) after you change the innerHTML of a div.

It works fine, trust me :)

So great… Thanks

Hey everyone. I have to agree. Amazing script. I’ve run into some trouble w/ my own use of it (in FF 1.5). If you were to go to: http://jeranon.com/pages/aboutme/ and click on one of the images, you’ll find that the text loads to the right of the images and then “snaps” to the center. Has anyone else had this problem? Does anyone have any ideas why it’s doing this? Any/all help is appreciated. Feel free to contact me@ jeranon(at)hotmail(dot)com
Thanx all, and Lokesh, thank you for this beautiful script.
Jer

Hi all, full-marks Lokesh, love the script (I sent a donation to show my appreciation). Anyway, one thing that was bugging me was the need for the page to fully load before the script would init on window.onLoad. So I dug around and applied the technique discussed at http://dean.edwards.name/weblog/2005/09/busted/

As I have pages with lots of thumbnails that can take a while to download, I wanted to trigger the lightbox init when the DOM had finished loading, and allow the lightbox to be used while the image thumbs continued to download in the background.

I put the following in my page head to hook the init event to DOM load, and load lightbox earlier:

function init() {
if (arguments.callee.done) return;
arguments.callee.done = true;
myLightbox = new lightbox();
};
/* for Mozilla */
if (document.addEventListener) {
document.addEventListener(”DOMContentLoaded”, init, null);
}
/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
document.write(”");
/*@end @*/
/* for other browsers */
window.onload = init;

Also create a js/ie_onload.js with a single line:

init();

Edit lightbox.js and quote out:

//addLoadEvent(initLightbox);

Now init() will run when the DOM is loaded and the HTML is safe (relatively) to be parsed by lightbox, making lightbox usable before other page elements have finished downloading. Seems to work fine on FF and IE 6 on Win32. Not tested on Mac or other browsers, so your mileage may vary. The implemenation of the final window.onload = init; seems to provide backwards support.

YOU NEED TO SET UP A FORUM!!!!

Great stuff.. thanks. How would i set it up to open from a text link and display a series of images???? Having to have all the thumbs visable is annoying and limits it’s usage.

Cheers,

This is beautiful stuff, truly.

Now to the problem: I’ve gotten it to work successfully on one site, but on another it fails. Could be any number of reasons, but I want to ask point blank and see if there’s an answer: yes or no, is it possible to use rel=”lightbox” on any link tag? and I mean any as in can you have text only and no thumbnail?

If that question can be answered, just a quick yes or no, I think I can troubleshoot the rest and find the mistake(s) I’ve made.

And again, THANKS for the work. Once I become un-unemployed, I will be donating. Lots.

Just great! :)

Works perfectly!

Got it all working with the new version,

EXCEPT - I still can’t get the previous and next images to show:

url(../images/prev.gif)
url(../images/next.gif)

which makes no sense because the background shows up and it’s in the same folder, using the same path:
url(../images/blank.gif)

Hey there Lokesh …

Very beautiful effect. One issue, from an IA perspective, is on the sets. It would almost be nice to see a in the bottom right corner, which would let users know that they can shuffle through the set by rolling over the image. Or even moreso, maybe little thumbs of the gallery in the caption space.

I hate naysayers, so I hope I’m not being one. Thank you for creating some great code. Just wanted to throw a coupla’ things out that you might already be working on.

Cheers

To Amy #163…

I got a text link to show multiple imags using the following code:

Link Text Here

Hope that helps…

Now can anyone offer any advice for my comments mentioned in #140?

Is there a way to make the caption height taller? When the title is long enough to fit on 3 line