Lightbox JS

I wrote a simple script for bloggers and other friendly folk to overlay images on their site called Lightbox JS. I’ve recieved lots of nice words and feedback, all of which is soaked up and appreciated.

Comments

246 Older Comments

  2. 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

     

  3. John: If you downloaded the script before 12/31/05 grab it again. I have only tested in Opera 8.0 and it works a-okay there. Send an email if the problem persists.

     

  5. 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.

     

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

    Thanks for sharing.

     

  7. 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..

     

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

     

  9. Hi tried it in Opera 8.5 and it works fine

    Must not work in the Opera version I had…

    John

     

  10. Hi,

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

    Tom from Hungary.

     

  11. 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:

    http://www.stereopoint.com

    Thanks for sharing Lokesh.

     

  12. 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)

     

  13. 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

     

  14. 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!

     

  15. 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

     

  16. 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

     

  17. Rene – Your CSS style is looking for overlay.png in the directory the stylesheet is located in. Try updating the code to look in the root folder by adding a forward slash:
    #overlay{ background-image: url(/overlay.png); }

    AndrewE – You need to update a little snippet in your CSS file. Make sure that under the * html #overlay style, you are pointing to the overlay.png in the right directory.

     

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

     

  19. 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. ;)

     

  20. 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.

     

  24. 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?

     

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

     

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

     

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

     

  29. 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.

     

  30. 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?

     

  31. 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.

     

  33. 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

     

  34. 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.

     

  36. 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.

     

  38. 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!

     

  40. 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. :)

     

  41. Bas – Nice work on the captions. I’ve recieved quite a few requests for this feature and will be implementing a similar solution later this evening.

    Tonio – If the fullsize image increases the vertical height of the page, the overlay will not extend to match? I have an idea to fix this and will update shortly.

    Adam – Load the lightbox.js before the livesearch.js and add this to the end of the livesearch.js file:
    addLoadEvent(liveSearchInit);

    Also, remove the body onload=”liveSearchInit”.

    Peter – Sorry, no IE 5.2 Mac support. Upgrade!

     

  42. 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.

     

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

     

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

     

  49. 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

     

  50. 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!

     

  51. 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

     

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

     

  53. 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.

     

  54. 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.

     

  55. 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/

     

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

     

  58. 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?

     

  59. 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.

     

  61. 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.

     

  63. 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

     

  66. 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

     

  67. 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;
    }

     

  68. 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.

     

  69. 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.

     

  70. 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.

     

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

     

  77. wjb – To remove the link border color, add this to your stylesheet: a img{ border: none;}

    pHaez – I’ve also noticed sporadic issues with FF not covering the complete height. I’ll have the script updated shortly.

    G?bor – The update mentioned above will also include some accessiblity changes that will allow the big image to carry over the title and alt attributes. Check back tomorrow.

    Anyone who hasn’t received an email reply, hang tight! I’m getting to yours next. : )

     

  79. 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

     

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

     

  83. 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.

     

  85. 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();">

     

  87. 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.

     

  88. 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.

     

  89. 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. :(

     

  91. 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!

     

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

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

     

  94. 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

     

  95. 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!

     

  97. Oi mate, love the script, now using it on http://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!

     

  98. HeadY, manuel – I am working on adding a small ‘X’ or graphic on mouseover. The script should be updated for tomorrow.

    Jul – “after loading my image, the loading image doesn?t dissapear.” I’ve just recently updated the script to fix this.

     

  99. 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.

     

  100. 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! ;)

     

  101. #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.

     

  102. 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

     

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

     

  104. 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 :-)

     

  105. 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.

     

  106. hey!

    this is great and beautiful stuff – thanks for this!

    henry

     

  107. 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

     

  109. 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

     

  110. 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

     

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

     

  112. Great script. I love it.

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

     

  113. 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’);

     

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

     

  115. 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

     

  118. 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!

     

  119. #109, #113 Monika & Chris
    I’ve just finished adding a keypress action for closing the Lightbox.

     

  120. 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

     

  122. 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?

     

  123. 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.

     

  124. Great but….

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

     

  125. 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.

     

  127. 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.!

     

  128. 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

     

  129. 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?

     

  130. 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.

     

  131. 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.

     

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

    Keep up the great work :)

     

  133. 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 :)

     

  134. 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?

     

  135. 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

     

  137. #131 Anathema – Check out the ‘Lightbox Gone Wild‘ modifcation.

    #134 ND – I’ve noted the bug when the image extends the page in IE and the overlay doesn’t extend accordingly. Looking into it.

    #135 Martyn – About the Lightbox Gone Wild script, I would recommend you get in touch with the author of that article with your question.

     

  138. 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.

     

  139. 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

     

  140. 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.

     

  141. 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?

     

  143. 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

     

  144. 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… ;)

     

  145. 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.

     

  146. 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.

     

  147. #127 LS – can you point me to a url

    #128 Benek – Find the ‘* html #overlay’ selector and jump to the ‘filter:’ line in your CSS. This line makes reference to the overlay.png and is looking for the file relative to the html page, unlike other graphics referenced in a css file that look for the file relative to the CSS file. Hopefully that makes sense.

    #130 Donnerschlag – The Lightbox JS script serves a very specific function. For what you’d like to do, the Particle Tree modification might work.

    #145 Ryan & #146 Theron – Check the tag for an onload=”…” attribute. If it exists, append it as so ;initLightbox();“>.

     

  148. 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.

     

  149. 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.

     

  150. 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!

     

  151. 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!

     

  152. 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

     

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

     

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

     

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

     

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

     

  158. 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

     

  160. 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

     

  161. 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).

     

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

     

  163. 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

     

  164. #148 Liteoni – The script is free for use in personal and commercial projects. Just leave my name and link. Thanks.

    #151 Jake – Thanks for the IE5 fix.

    #160 David – If you don’t want the lightbox to dissapear when the user clicks outside of the image, remove this line:
    objOverlay.onclick = function () {hideLightbox(); return false;}

    #161 xsism – IE supports alpha transparency in pngs but needs to be turned on manually. Take a look at the lightbox css to see how.

     

  165. 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

     

  166. 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

     

  169. 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 for WordPress that is breaking?

    Thanks again and any help would be appreciated!
    http://www.popstalin.com/blog/?page_id=2

     

  170. I don’t know if anyone has posted about this or had this issue….but. I am using some flash on my site…and whenever anyone clicks on an image and the overlay.png is layed down and the image is displayed…the flash disappears. Anyway around this?

     

  171. Wow, Incredible work !
    I’m planning to use it in my new gallery that I am developping.

    One thing.. When the page is not completely loaded and someone click on an image it’s loading in a blank window. Is there a way to make your script “intrusive” ? eg: … ?

    Thanks !
    –Ben

     

  173. Hi, very nice script !

    I wanted to know how the lightbox can be openned clicking an image map.
    is there any possibility ? inserting a “rel” in the AREA tag ?
    I tried anything lol

    Thx

     

  174. Sorry, i didn’t try anything because finally, i found it !
    :)

    Thanks again

     

  176. Evan,

    Works for me when I cut out everything from object to /object. And I don’t even have flash installed.

     

  177. Works very nicely indeedy. Same question about absolute positioning as Ben Shwartz #68, to have the image centred at various screen resolutions. Any fix for this?
    thanks very much

     

  178. Yea that doesnt make any sense to me. Also wouldnt that cause it not to work in firefox then? can u copy and paste what should be taken out.?

     

  180. Still cant get this to owrk in IE. Any helo will be great. Or if some one can just copy and paste the code in here that needs o be editted,

     

  181. Thanks for this awsome script. I have one question though.
    I need to “unescape” the image/image path “var” that lightbox.js gets from the “a href” in the html/php file.

    Can someone help me or point me in a direction please, js isn’t really my cup of tee.

     

  182. Hi all: I’m a total noob when it comes to using scripts and etc on my website but I’d really love to use this cool LightBox, *except* I don’t wanna have it “dim” the page before popping up the image in the nice white-square picture frame: I just want the picture to pop up when the thumbnail is clicked.

    Can anyone tell me what parts of the JS file (and other files?) to delete to make it work that way? Thanks in advance if so :)

     

  183. P.S. Oh yeah, forgot to mention since I just want this more *simple* as noted above, I wanna use just the older LightBoxJS and not the more fancy (and complex) 2.x version which Lokesh has posted recently.

    Any help? Anyone, anyone? Bueller…? Bueller…? ;-)

    Thanx

     

  186. Your site is very cognitive. I think you will have good future.:)
    [URL=http://s3.phpbbforfree.com/forums/index.php?mforum=kkarsha]adipex[/URL] [URL=http://vvarder.cba.pl/adipex.html]adipex[/URL] [URL=http://vvarder.cba.pl/alprazolam.html]alprazolam[/URL]

     

  189. Best site I see. Thanks.
    [URL=http://s3.phpbbforfree.com/forums/index.php?mforum=kkarsha]adipex[/URL] [URL=http://vvarder.cba.pl/adipex.html]adipex[/URL] [URL=http://vvarder.cba.pl/alprazolam.html]alprazolam[/URL]

     

  192. Lokesh thank you very much for the script. I am using it on many of my web sites now for both personal and work. I also am experimenting with adapting it to the web version of a comic I am working on at http://www.StarForce7.com. It would be interesting to see how I can incorporate web audio into that somehow maybe on the image calls to trigger sounds. :)

    Again thanks very much for your script – nice work!
    –Donnie

     

  193. Hi…I would appreciate anyone who could help me. I am new to this. But I love this script. I’m not sure where to put the “Close.gif” and the “Loading.gif” in my script. I have both images in the same directory as all the other files. Dynamic Drive say to put the following variable inside of the js.file. How on earth do I do that? This is my script so far.

    So where would I add the below in the script above? Thanks all..

    var loadingImage = ‘http://heatherpatterson1.tripod.com/loading.gif'; //path to the “loading animation” image
    var closeButton = ‘http://heatherpatterson1.tripod.com/close.gif'; //path to the “close” button image

     

  194. I was wondering why every time I click on an image in a site using lightbox I am left with a flashing cursor? This is even more confusing when some computers don’t do this but others do. I have tried to view the site I am helping with on six different computers and 3 leave a cursor and 3 are normal…??? http://www.akclimber.com Any help you can give would be greatly appreciated.

    Chad

     

  196. Hi Lokesh
    I’ve recently designed a website as part of my Masters Degree and I have used your Lightbox Js to display images of hardware devices etc. I think they work really well and look great. My lecturer had never heard of them and so you made me look really good – thanks!!!
    Keep designing
    Lynda

    :-)
    you can check it out if you like:

    http://www.newman.ac.uk/Students_Websites/%7El.frisby/index.htm

     

  197. I’m using it for my shop with oscommerce, smashing !!

    The (future) shop :

    http://www.locace.com/active/catalog/

    (By the way I didn’t manage to install the Advanced Pop-up Image v1.0, but nevermind the lightbox JS does the job very well)

     

  198. I love the script, it’s amazing, and so well thought out. Absolutely perfect. But, of course, I ran into a serious problem that’s keeping me from using it at all at the moment. I’m working on a site that reads/scrolls to the right, and extends pretty far, and any time a photo is launched, it only affects the very left of the site. Here’s a rough sketch(please ignore the name/logo-just a place holder!): http://www.luthian.org/photo/

    Again, amazing script! I really hope I can get this going on the center of the click target.

     

  199. Hi Lokesh!

    Great plug-in, thanks for sharing it! I really like it using it at my weblog jirjen.de.

    But -sadly- it doesn’t work with my other homepage http://www.pimpmybride.at
    That wordpress-based homepage is using the theme Blue Kino 1.1. Usind other themes it will work, but we spend a lot of time adpating the Blue Kino for our wedding homepage.

    Does somebody have a clue?

    Thanks so much!

     

  200. great script. i use lightbox v1 because i dont need nothing more… maybe you could put in the troubleshooting section my case: i have some js generating views for small city map with points, so when i click on district i do clear my points, load new image with district map, and make new points/links… my case is that i have to init lightbox every time after i click on district rather than init it on bodyload… it is because when my body loads there are no links yet, only after visitor clicks on district links get spawned by js, and THEN i use initlightbox();… ughh… its complicated, right? so see it on http://www.samobadanie.vel.pl

     

  201. Love you script! How do you add an email link to a person’s name?
    Example:

    Thanks I appreciate any input…I’m still a newbie.

     

  202. hello! love the script!

    i just have problem implementing the lightbox 1.0, its about the overlay in IE. i’ve checked all the posts and everything is about pointing to the right directory right? well i did that, even used an absolute url to try to get the exact locationgbut it doesnt work. i even copied the overlay to the same folder so i could use “overlay.png” instead of “/images/overlay.png” or “../images/overlay.png”, but it still doesn’t want to work in IE.

    what am i doing wrong??

    thanks!

     

  203. Vey nice script! thanks. Sily Question perhaps–in order to get this working, do I have to actally input rel=”lightbox” before each picture to get it to work or is there a way to make it work with all pictures in general? I have a picture gallery with Lazy-K Gallery and would love it to work with those pictures as well.

    thanks again. so glad I at least got it to work and it is worth the manual input if that is what needs to be done.

    Matt

     

  204. hello! i fixed the problem i presented in post #202, i used CSS opacity instead as implemented in the lightbox 2.0

    i have a question for the lightbox 2.0… for me, having to hover over the photo to know about the next/prev feature poses some usability problems. i dont know a thing about javascript and very little about css, so i was wondering if you could possibly tell me how to make it so that the next and prev are already showing even without hovering over the photo. and because that kinda ruins the photo, how do i have them positioned at the very top? what do i do to the JS and CSS to make that work?

    your help would be very very much appreciated! :-)

     

  206. What can I do if the overlay is covering and shading the photo? It’s not doing this in IE, but it is in Safari on my Mac. You can see an example here, if you are using a mac, you may get the same problem? >>> http://www.sunshinehahn.com

     

  207. got it — my z-indexes were off for some reason. I got the code from another site.

     

  209. Hi there

    I used lightbox on steve-edwards.com/paintwork.php and my client reported it crashing two of his PCs (IE6) on a couple of pages where I’d used a div to fill space and push the following content onto the next line. One of the machines had Yahoo toolbar and one had AOL and I think this was related to the problem. I’ve fixed it by using a transparent gif to fill the space instead of the div but I’ve left a copy of the problem version at steve-edwards.com/paintworktest.php. The div that crashed these pcs has the CSS “.blank {width: 100px; height: 75px; float: left; padding:2px 5px 2px 0px;}”.

    I can’t recreate the error on my machine despite installing the Yahoo toolbar (I’m not installing AOL through bitter previous experience) so I only have my client’s description of what happened.

    Hope this helps with Lightbox development as it’s been a great improvement from the method of displaying images I was using before. If you’d like any more information please let me know.

    Cheers – Grant, UK

     

  212. Dear Sirs

    A friend of mine has cerated a new homepage for me using lightbox.

    After a period of time I have experienced that IE closes down when it comes to a page where lightbox has been used.

    I have had my computers cleaned and reinstalled now 2 times and for a short period the site is showing ok again in IE – but after a period of 2 -3 weeks the same problem occur again. The site is ok in Mozilla Firefox no problems.

    My computer expert claims that the problem is Lightbox that create a small file – saving stuff on my computer and after a while the file is full and then IE closes down.

    My homepage is this: http://www.toscana-vacanze.dk/2006/ferieboliger/nord/5pers/la%20foce/index.asp

    Have you experienced the same before?

    Regards
    Hans Peter Johannsen

     

  213. Just made script working… uff…
    It’s really great, txs.
    For those who use WordPress, and don’t know much (or want to avoid hassle) – set up folder ‘images’ in main folder where WordPress sits – only if you’re experiencing problems with not displaying loading.gif and closelabel.gif properly – easy, but took me 2 hours… :-)
    You can see it now in action!
    http://empirecast.com

     

  216. Hey Lokesh,
    Thanks a lot for the fabulous script.

    Had one query though.
    I have a no of users uploading images of various sizes., some of them are quite big. So, I tried to provide a fixed height of about 200px to the lightbox element in the css. But that messed up the look and feel of the lightbox.

    Any suggestions?

     

  217. Hi really great script! I’m testing it at the moment and it works really well. I have only 1 question; is it also possible to make the details more complex like adding html and for instance a link? Instead of using:

    title=”hellolink“

     

  219. Hi.

    I’ve been struggling with this for a while.

    I want to have the name of my photo to display bold, then a description of it underneath in regular type, how can I create a second line of text?

    THANKS

     

  220. Is it possible to get this to work with the fotobook plugin. I installed it and put the code into the header, but when I go to my phto gallery it doesn’t work at all. Do I need to put the code somewhere else?

     

  221. Hello, scripts is look very good, but in one function code is not very good.
    function pause(numberMillis) {
    var now = new Date();
    var exitTime = now.getTime() + numberMillis;
    while (true) {
    now = new Date();
    if (now.getTime() > exitTime)
    return;
    }
    }

    This is my variant.

    function pause(sender)
    {
    var curently = new Date().getTime() + sender;
    while (new Date().getTime()

     

  222. This is variant.
    function pause(sender)
    {
    var curently = new Date().getTime() + sender;
    while (new Date().getTime()

     

  223. I LOVE this code. But I was wondering, is there a way to do something like this with sound files too?

     

  224. I love this!

    I have an issue with a swf (movie clip) file that is on my page – it plays on top of the lightbox image. Do you know of any way to fix this?

    Thanks!!

     

  225. hi, i’m having the conflicting js scripts problem when i use this. basically, to get this to work i have to disable my nav rollovers on the page in the body tag. It seems i can only get this or the rollovers to work, but not have both work on the same page. any ideas? thanks!

    you can see here http://www.fuzzyrobot.com/work3.html the first thumb (elvis) works with your script. the top nav now, doesnt.

     

  226. This is a fantabulous script.
    I’m just having many problems with it.
    The overlay.png file must not be loading porperly,
    so it doesn’t show up.
    And also,
    when the image comes up,
    there is a blue border around pracatically everything.
    I’ve tried working the css script to stop this,
    but nothing will work.

    It may be the program I am using, maybe?

     

  227. This is awesome! And even more so is that you posted it under user commons. Thanks so much!

     

  229. thank you for that great ligthbox-script. it’s really easy to handle.
    nevertheless i’ve got a little problem using version 1.0 – but please take a look:
    http://www.wanderpfa.de/de/index.php?option=com_frontpage&Itemid=1

    after pressing of the picture with the eagle…lightbox starts…yeeah ;o)
    now look at the scrollbar at the bottom – it enlarge!!! That’s my problem…
    I’m glad for any information to avoid this bug.
    oliver

     

  231. I hod got a problem while using lightbox and sifr together. The problem is while opening the image in the lightbox the h1 bar which is presented with the wite back ground. The solution is give a seperate class to the bar and place the gif image instead of text and give text indent:9999px; to the text the problem will be solved.

     

  232. the script is great…but..

    When the Lightbox window pops up, my embedded music player does not get greyed out. why is that and how can I fix that?

    Also, how can I make it so I don’t have to put the rel=”lightbox” tag in every image I want to have the lightbox effect used for? can I default the lightbox effect for every image on my website without having to put that tag in?

    Do you know how I could have this same effect for Youtube videos and other movie type media? I’ve used the VideoBox plugin before, but that renders Lightbox useless. So, I haven’t been able to find a perfect hybrid that does movies and images. Is there a way I can modify the code to accomplish this?

    Again, my website is http://www.letitmarinate.com/

    Thanks.

     

  233. Hey Lokesh,

    I love LightboxJS, but I’m having a problem getting the close button and load buttons to appear when I use Lightbox on my site.
    I can get the images to appear but the buttons that come with Lightbox just load a question mark, in place of close.gif or loading.gif.
    What can I do?

    Is it a problem with my HTML or with the lightbox.js file?

    Any help would be appreciated.

    A link to the page with Lightbox installed is below.

    http://www.bentillustration.com/Fireworks%20Layouts/Illustration/illustration.htm

    John Bent

     

  235. hi,
    I’m having a problem with a part of the code for the lightbox.
    The effect seems to work but a blue square with a question mark is appearing instead of the close.gif.

    i expect this has been mentioned before but after checking for a while there are just too many comments. :)

    Any help would be greatly appreciated.

     

  236. I am having problems with the lightbox effect on my “portfolio page”. When viewed on PCs in Windows Internet Explorer (version 7.0, I think), it puts “breaks” in my page… like a border… around each Lightbox jpg I have linked. Can someone please help me?? Thanks!!

     

  238. This is a very useful and functional script! Is there any way to get the close button to appear at the top of the window, not the bottom? I seem to remember seeing a fix for this for the WordPress plugin but not for the standard lightbox.js. Does anyone know how to do this?

     

  239. really nice stuff.. looking for more such stuff from you.

     

  240. I love it! No problems whatsoever. I’m doing a site for a Mac based client and it has no issues with Safari 4.0 or Firefox. Fantastic and very Apple!