#1 Erik

January 17, 2006 @ 11:05 am

Looking forward to it, too bad I dont need it, since Im just fine using lightbox. :D

Its cool that youve managed to keep the code as simple as it is.
Css+javascript is more powerful than people think. ;)

#3 Rodrigo

January 17, 2006 @ 1:48 pm

Hello,
Made it here via Monkey Bites…
you good great stuff here…
LQQKin' –>> to LightShow

/Rod

#5 Rodrigo

January 17, 2006 @ 6:06 pm

Lokesh,
Lightbox JS — I like the opacity effect…

I havent delved into the code yet… but
would it be possible to create the same,
but instead of an image, use a results from a MySQL table..?

Thanks..
/Rod

#7 Christian Labarthe

January 18, 2006 @ 1:56 am

Lokesh,

Great idea, very professional work, vell designed and nice DOM code.
I am not a "coder" but do my best. I may try to do something from your idea on my site but have to find a way to have 3 different languages captions…

my site: wawa.datashoot.net

#9 BjornW

January 18, 2006 @ 8:46 am

Very nice!

I'm gonna check this out for some of my own projects. Thanks for sharing this neat interaction trick.

Keep up the good work,

grtz
BjornW

#11 Tunnis

January 18, 2006 @ 1:51 pm

Seems pretty interesting this photogallery. Allready tested lightbox on a couple of my projects and it's great.

However there are a couple of minor things, like with images bigger than the viewport and with browserwindow resizing that are solved quite nicely in lightbox plus.

Hope to see them integrated in futere lightshow or lightshow versions.

Keep up the good work!

#13 david

January 19, 2006 @ 11:06 am

Thx for this great code. question though, is there a way to supress the cursor when clicking on a picture. I ask because sometimes a very large cursor is blinking right in the middle of the blown up image.

#15 Koka

January 20, 2006 @ 5:14 am

Friday!!!!!!!!!!!!!!! :)

#17 James

January 20, 2006 @ 1:30 pm

Nice i really can't wait for this one to come out, good luck!

Best Regards,

James

#19 Dave

January 21, 2006 @ 6:06 am

Just a heads up: Lightbox JS doesn't render the pop-up correctly in IE 5.2 for Mac.

#21 Christoph Pojer

January 21, 2006 @ 9:57 am

I'm straight on doing my own version of lightbox (because of customizing and such things), I'll link to your page then because of credits ;D

it's a hot thing! heh! you'll see in a year or a half every page will come up with it's own version of lightbox…

#23 Peter

January 21, 2006 @ 10:04 pm

Hi

Lightbox is awesome, i've just used it on my site - http://www.flavoursm.com, and it's working great - thank you so much.

One thing I'd love to see though, would be the ability to have super long descriptions, where you could point to maybe a .txt file, or an xml/php file; giving you the ability to format blocks of text to your liking.

Now that would be cool, and i can't for the life of me work out how to do so :p.

Eager to see lightshow, and thank you for the excellent work!

#25 Sergey

January 22, 2006 @ 5:19 pm

Chris - it is impossible to download the script under the adress you've gave…

There is no file upload section…

#27 sunsean

January 22, 2006 @ 7:43 pm

I look forward to the gallery. It's great to see someone finally use PNGs heh. Was considering something similar for my site, but decided to make the barebones before styling it too much. You can check it out if you want some food for though on the PHP side of galleries. http://www.sunsean.com/iG/index.html Cheers

#29 lite

January 23, 2006 @ 11:01 am

Really nice script, I love the fact that it totally eliminates the need for pop-ups.

Is it possible to load an HTML-document instead of an image in the lightbox? Ive tried modifying the code myself, but Im a php coder and dont speak a word of java so Ive made no progress at all.
Any java geniuses willing to help?

#31 Marcin

January 23, 2006 @ 4:44 pm

I use LIGTBOX on my site. It works perfect
Thanx
http://www.obrazy.ovh.org

#33 jason

January 23, 2006 @ 10:45 pm

I've noticed on most pages, if you don't let the page FULLY load, the script won't work right. Wierd.

#35 Louis Reid

January 25, 2006 @ 4:27 pm

Im sorry if this has already been asked, but can the script support content other than images, such as .swf or video files. If not would this be a natural extension or would it be a lot more complicated. I havn't actually got the chance to download the script myself so I wouldn't know.

#37 Pete (from flavoursm)

January 26, 2006 @ 8:14 am

Codercraig, yeah the silence is wierd, but patience is a virtue I suppose. Maybe he is resolving his rss feed troubles. :\

On a side note, I've tinkered with the original code too, and added lengthy descriptions to the images, via use of the seldom used but still valid "Longdesc" attribute. Mind you I don't link to a url I just write in a longer description - but the principle is the same.

Next on my list of things to tackle is adding a comment system, and having a script-o-licious-esque drop down/fade out effect for the description/comments/exif.

http://www.flavoursm.com - descriptions on the second and third images at the moment, due to the fact I haven't written the other ones yet :p. if you need help implementing longdesc="…" just send me an email. (admin@flavoursm.com)

#39 Jack T.

January 30, 2006 @ 3:44 am

Can lightbox be used to load something other than images on the current page?

For example, could it load another small web page ontop of the current page. Netvibes.com and start.com have nice little HTML popups that work just like lightbox but display HTML stuff instead of images.

Would it be possible to replicate this functionality?

#41 eduo

February 1, 2006 @ 5:16 am

Moe:

I was about to try something similar, converting it into a parameter for WPG2 (Gallery2 for Wordpress) which is very similar to what you're doing but coming from the other side.

Have you managed to complete your project? Were you able to package it into a module? I had thought of using the popup to display just the equivalent of the resized-for-screen photo and the next/prev buttons (the same that would appear in the content box in the photo detail).

How did you approach this?

#45 rich

February 2, 2006 @ 12:12 pm

Any chance you'd try to get lightbox.js working with the nify corners js? Looks like the two have a conflict and I'd really like to use lightbox.

www.richalot.com

#47 Colin

February 2, 2006 @ 3:07 pm

Thanks a lot for the Lightbox script, I am very excited to see what you come up with for the gallery! I found your script easy to use, and had it successfully installed on my site in minues.

www.colinbusby.com/photos/keg_party/thumbs

Look forward to the gallery!

#49 Nick (Australia)

February 7, 2006 @ 12:13 am

Hi All,

Lokesh, you are an absolute genius - and absolutely generous. Thank you so much for putting this script out there. You and your script are phenomenal.

Seems to me as a non-coder (read apple cider) there's many code geniuses using this forum.

On this page:
http://scoutphotographics.com.au/draft13.htm

With these files (all lightbox files (other than the photos) are placed here:
http://www.scoutphotographics.com.au/lightbox/

CSS for the site is here:
http://www.scoutphotographics.com.au/css/screen.css

I have got Lightbox working brilliantly in IE 6.0 with transparency etc. However,

1. In Mozilla Firefox 1.0.4 and Opera 8.0 and I think probably other browsers: The larger image appears on clicking a thumbnail but the darker background (with the transparency) does not appear.

2. In Mozilla Firefox 1.0.4: Something happens to the smaller enlarged images (click thumbs 1 and 2) when over the top of the subnav div (an apparent shift of a couple of pixels to the side for a portion of the image. It doesn't happen to the bigger image of thumb 3 (it is wider than the subnav div - not sure if that helps). Refer screen cap here if needed: http://www.scoutphotographics.com.au/images/test/screencap1.jpg

Can anyone find a solution to the above?

I'm a non coder and kinda bluff my way through CSS. In following tips on this forum I have managed to fix the Flash header thingy. I have read through the 3 pages of entries but have not yet found a solution to this.
Please help.

Thanks to you and your power source!

Nick

#51 Jeff

February 10, 2006 @ 1:07 pm

This is a great script! Thanks Lokesh.

I work at an art museum and this would be very good to use. I've looked at some of the enhancements (including resizing) which also add to the functionality.

An important addition would be to be able to print the image overlay without the background page showing. I tried fooling around with the code a bit but it's beyond me. Some sort of print version of the css where the background is hidden would make this a functionality the museum could use.

#55 Kris

February 13, 2006 @ 4:58 am

Lokesh,

I just tested the script on my pc at work and the loading gif is fine. I guess something's wrong with the browser on my home pc. So never mind, don't waste your time and many many thanks for this supercool script!!!!

rgds // Kris

#57 Nick (Australia)

February 14, 2006 @ 1:21 am

Re #49 Nick (Australia) and #53 Lokesh

Thanks Lokesh - that gave me a tip to muck around with file reference to overlay.png Seems to be a browser thing with png files??

In lightbox.css :
+ Mozilla, opera etc seem to like: overlay.png
+ IE likes lightbox/overlay.png

When its done like that from my end it all seems to work. So the opacity thing is working. Thanks for the tip.

Still having the issue with the following which only seems to happen in firefox. In Mozilla Firefox 1.0.4: Something happens to the smaller enlarged images (click thumbs 1 and 2) when over the top of the subnav div (an apparent shift of a couple of pixels to the side for a portion of the image. It doesn’t happen to the bigger image of thumb 3 (that one is wider than the subnav div - not sure if that helps). Refer screen cap here if needed: http://www.scoutphotographics.com.au/images/test/screencap1.jpg

I've tried putting extra div breaks in but to no avail.

Can anyone find a solution to the above?

Thank you kindly in advance.

#59 Nick (Australia)

February 14, 2006 @ 1:36 am

FLASH TIP

If anyone else is having trouble with laying photos over flash elements this worked for me for a flash header positioned in a div:

In css file:
- Set z index of flash header to 0 (z-index: 0;)
- Set z index of thumbs to >0 (z-index: 3;)

In the code for the flash element:
- add this line:
- In the line line add: wmode="transparent"
- In the line line add z-index: "0"

This works for me in IE 6.0, Mozilla Firefox 1.0.4, Opera 8.0 and Netscape 6.
Check

Hope this helps you too.

#61 Bastian

February 17, 2006 @ 12:38 pm

Really like this script!

I made an plugin for textpattern out of it.
http://forum.textpattern.com/viewtopic.php?id=14748

see it work
http://samisdat.org/blog/die-gute-alte-zeit

#63 bpixel

February 19, 2006 @ 11:29 am

I use lightbox on my site :

http://www.bpixel.com/category/illustrations/

tks a lot for this fabulous script !

#65 Nick (Australia)

February 21, 2006 @ 4:38 am

re #64
sorry - referring to lightbox….

#67 Sukh

February 21, 2006 @ 7:33 am

Hi - Im trying to get this script to work on a site im working on. I have follwed the instructions but whatever I do the image seems to open in a normal pop up window and nothing like it should do when using the script!

Please help!

the link to the page of the gallery is -

http://www.bambamonline.co.uk/bambamonline/front-end/gallery1.jsp

#69 Joe

February 21, 2006 @ 7:32 pm

Great script!! Thanks a lot for taking the time to write it and especially for sharing it.

Greetings from Portland, OR

#71 Nick (Australia)

February 22, 2006 @ 12:02 am

re #67 Sukh

Howdy

1. Maybe add doc type at top of page:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

2. Put all lightbox files (css, js and the blank, close, loading and overlay images) in the same folder (why not create one called lightbox)

3. In lightbox.css try referencing files as per …..

#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(lightbox/blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="lightbox/overlay.png", sizingMethod="scale");
}

4. In lightbox.js try referencing files as per …

var loadingImage = 'lightbox/loading.gif';
var closeButton = 'lightbox/close.gif';

That worked for me. Hopefully that'll work for you. If not, not sure why its not working.

#73 Sukh

February 22, 2006 @ 8:19 am

Hi Nick - thanks for the post. It turned out I had some other javacript in my code which was causing conflicts. I have got rid of the other script and now this is working a treat!

#77 Bernd

February 24, 2006 @ 10:48 am

Hi,

I made up another example of a lightbox gallery combined with an IPhoto style thumbnail overview

http://www.germs.plus.com/photo/iphoto.html

Navigation in the lightbox are the arrow keys to change galleries, back and forward through all the pictures in all galleries or a slideshow.
The iPhoto part of it dosn't impinge on the lightbox.

#79 djchuang

March 1, 2006 @ 9:29 pm

incredible script! beautiful and savvy! great work! I finally figured out you could click on the photo, the [x] in the upper right corner, or even outside the photo frame to close the in-page photo "pop-up". The one place that I intuitively clicked was the square x in the lower right, where it says "press [x] to close" — maybe that [x], or the entire lower right corner can be clickable-to-close too?

#81 tg

March 2, 2006 @ 11:30 pm

I'm putting together a gallery using the Lightbox update with the Slidebox modification from http://olivier.ramonat.free.fr/slidebox/

I like it.

http://bellsouthpwp.net/s/o/solidgolddancers/

#83 keith

March 5, 2006 @ 12:59 pm

This is the shit! I'm using it on a friends website I'm building. She's a NYC based photographer. I love the dramatic effect of the faded out background. I'm going to attempt to implement tg's Slidebox implementation.

file:///Users/pixel/Sites/LaurenFleishman/site/photos.html

#85 jessica

March 5, 2006 @ 10:53 pm

Thanks for the lightbox - it is really cool.

I'm using it here: http://www.jyeo.net/photos.html. The "x" in "Press x to close" is not styled like it is here, but other than that it works great.

#87 Rob

March 6, 2006 @ 10:48 am

Great. But what this needs is the ability to handle window resizing properly. If you are displaying a photo that's larger than the browser window, you have to scroll etc. I know Lightbox Plus claims to handle resizing, but it still produces scrollbars for me (image still too large).

So either I need that or a way for WordPress to downsize photos upon upload if they are larger than a specified width.

Any ideas please?

#89 nick

March 7, 2006 @ 9:46 pm

Hi All,

Wondering if anyone else is seeing this problem and if you have a solution.

In Mozilla Firefox 1.0.4 only: Something happens to the smaller enlarged images (click thumbs 1 and 2) when over the top of the subnav div (an apparent shift of a couple of pixels to the side for a portion of the image. It doesn’t happen to the bigger image of thumb 3 (it is wider than the subnav div - not sure if that helps). Refer screen cap here if needed: http://www.scoutphotographics.com.au/images/test/screencap1.jpg

This is the page to look at:
http://scoutphotographics.com.au/draft13.htm

With these files (all lightbox files (other than the photos) are placed here:
http://www.scoutphotographics.com.au/lightbox/

CSS for the site is here:
http://www.scoutphotographics.com.au/css/screen.css

I've tried putting extra div breaks etc in but to no avail.

Any ideas?

Thanks in advance.

#93 unknown

March 13, 2006 @ 10:39 am

wee wee posted on wrong subject

#95 Erik

March 14, 2006 @ 7:39 pm

Posted that too quickly.

The background image comes up as opaque when I remove this part :

* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

When I put it back in, no background image comes out at all.

#97 Bugs

March 15, 2006 @ 5:22 pm

How can I insert a link on an image besides of the close one? If you understand what I mean,it's about a certain image with a link that opens another browser window but the one on the x should still be there.
(Anyone with an answer or a link to an answer, please email me at bugs@s-man.net)

#99 sudo

March 21, 2006 @ 7:37 pm

hi guys,

i have a problem with the opening of pictures… curently i am working on a project based on php and a lot of ajax stuff…

now, i have a index file, which contains the design and a lot of div whiles used for dynamic load with ajax.. if i make a link to a picture in the index file, it works great but if i make a link on an ajax loaded script which is also a part of this index file , then i got a new window with the picture ….
thanks.

#101 Kim

March 23, 2006 @ 5:37 pm

Firstly thank you for developing and releasing such a graceful script, which I would very much like to use more extensively on my site, except for one thing. Due to storage and bandwidth problems, I store all my images on flickr, which requires, in referencing an image from the flickr site, that there be a link back to the original image. I saw that Bas has created a version of your script that does this but I was wondering whether you could include it in the original. Is there a way of generating the code that flcikr does but in a lightbox compatible form?

Regards, Kim

#103 codi

March 26, 2006 @ 11:00 pm

I'm having the same problem as sudo. Has anyone found a solution for this?

#105 charlie-imac

March 29, 2006 @ 4:10 pm

Any help with getting this to work with dynamic-drive page load script? I'm using this script http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm to load a page into a div. I you click on annuals on this page you will see that I'm trying to load this page

http://63.134.238.55/untitled-2.html

into a division on this page

http://63.134.238.55/testPlantDatabase.html

Any help would be appreciated. Or is there a better ajax script that will give me both load page into a div and a great lightbox like this?

thanks
charlie-imac

#107 partyarmy

April 1, 2006 @ 6:20 pm

I'm having the same problem as #105 charlie-imac. I think it's the same problem you get when the page hasn't finished loading.

Since the images aren't actually loaded on the page, the script can't find them. Can't make them part of the script and maybe doesn't know that they have a rel="lightbox" tag?

I had this same problem with v1. Anyone have any ideas why this happens?

#109 James AkaXakA

April 4, 2006 @ 12:24 pm

Lightbox is really cool and stuff - but why aren't the images preloaded?

#111 Thom

April 24, 2006 @ 5:56 am

Hey.,

Any idea how do i remove the close button from the script?

I tried replacing it with a 1×1 transparent gif file, it looks fine on Firefox/IE but in Opera it display an ugly grey box.

The PNG overlay works in IE but i can't get it to work in Firefox/Opera..

Any help much appreciated.

#113 cole

May 15, 2006 @ 8:47 pm

HI, this is working great for my project, but IE is popping up the little "IE has restricte this file from showing content that could access your computer Click Here…" but it only does it on my site, not on the other examples I've been to. any ideas? I'm also using Leightbox to the text and photo.

#115 F

May 30, 2006 @ 12:31 pm

Can someone find a way to preload the image(s)?

#117 Heather

June 9, 2006 @ 7:24 pm

Lightbox is AWESOME-

Except one tiny problem I am having: it is taking a long while to load images in IE 6.0.2.. I am not sure what is causing to slow at loading- why not load each images at a time- rather completely blank page until it finished loading then can see something on the page.. Please help…

Many thanks for creating this lightbox!!

-Heather

#119 Ulrich

June 29, 2006 @ 5:16 am

Hi,
a really great tool. Since you are generously offering it to anyone
to include in their pages, I would recomend to change the
variables and function names to something that is less generic.
Names like getKey will be likely to exist. So just change it
to a common prefix, like LB_getKey or whatever.
Regards, and thanks for the good work,
Ulrich

#121 Matt

July 14, 2006 @ 4:20 pm

Great script! Everything works fine except that when the loading.gif image and overlay.png image are displayed any HTML select box on the screen is not covered up by the overlay image. They are still active and can be selected/expanded.

Once the picture has loaded and the loading.gif image is replaced the overlay image covers them, in fact, these fields don't display at all. This is fine because once I clear the image they are displayed normally again. I noticed this behavior only when using IE 6.0. I didn't try it on IE 5.x. Firefox works great! Is there a trick to get IE to cover the select boxes while the image is being pulled up?

#123 gil

August 3, 2006 @ 10:10 am

pls, how is it possible include captions in the opened images through "LightBox JS v2.0 " ?
tks, all

#125 Ghost

August 21, 2006 @ 2:29 am

great job.

usually we use server side scripting for repeated jobs if possible. if not, then we use java script.
in html page,
i am using CSS + JavaScript to listen for mouse clicks on thumbnails listed in a div container. Then, your lightbox code is called to show the normal size picture.
so far so good.

To display an album ( set of pictures), i saw the slidebox posted in one of the comments as a nice idea but requires more work with XML files.

Using my technique, all thumbs can be calculated and pushed into an array for the set of pictures.. which is more easier .

having a function that takes an array of pictures to display them as "set" of pictures is a very smart solution rather than leaving the code fetching all lightbox[] inside start().

greetings.

#127 Konsumativi

September 18, 2006 @ 5:23 am

I tried setting up lightbox for new site www.freckles.bg. For images it works very nicely. Is it possible to present html page with lightbox. For example to present some extra information about certain products.

#129 Hector Cabarcas

October 7, 2006 @ 3:55 pm

Konsumativi, try Thickbox (http://jquery.com/demo/thickbox/). I used it on a site soon to be launched which needed a brief description with the pics. Thickbox allows for html to be inserted into a iframe. The beauty is that the iframe is automatically created; you just need to supply the content. You can try it out by clicking the thumbnails on this page:

http://www.paragonstone.com/products.shtml

#131 Dominik

November 10, 2006 @ 10:07 pm

eh, html was deleted…

"… when there are some other links (tags ( a href = )) before pictures with attribute 'rel="lightbox"'. Example

Example:

(some other link)(some other image /)(/some other link)
(link with rel = lightbox)(image)(/link)
(link with rel = lightbox)(image)(/link)

translate it to html ;-)

best regadrs
Dominik Pluciński

#133 Mickey

January 15, 2007 @ 1:41 pm

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

#135 Beren

January 31, 2007 @ 5:17 am

Hi Lokesh,

Superb stuff! Because I want to have lots of photos off the first image (e.g. the first image starts the category - I do not do individual thumbnails) I just use a style with display: none for the rest of the images. Works really really well for me. For thos that are interested, my use of LightBox is here:

http://zhero.net/travel_photos/

Thanks for all your excellent work!

Beren

#137 duques

March 4, 2007 @ 1:19 pm

Belissimo script (Lightbox JS v2.0) para poder incrementa-lo acho que deveria ser adaptado a ele um sistema administrativo, ou seja, basta vc enviar as fotos que ele automaticamente criaria os thumb e seria mais rapido e pratico…fica aí a sugestão.

#139 Alex Holsgrove

March 17, 2007 @ 4:19 pm

Hi there

I have the Lightbox script installed to allow falbum to work with popup images. I noticed that for some reason the event calendar3 has to be displayed about my falbum gallery for the lightbox code to load correctly.

This is so stupid as I want the calendar in the footer of the page. Is there another way I can load the lightbox plugin and make it work on IE and FF?

It needs to be called last I guess as EventCalendar3 has a lot of listen events.

I'm so stuck!

#141 ollie

April 10, 2007 @ 8:05 am

RUNNING LBv2 FROM FLASH

Hope someone can help.. basically I`ve got lightbox 1 able to run from a flash movie :

http://www.icreativ.co.uk/lagrafica/www/old/flash/jstest.html > click Cariad

But i cannot for the life of me get to run version 2 from a flash movie.

ANYone have any tips and or tutorial on this??

Many many many thanks in anticipation…

Ollie.

#143 sunny

May 2, 2007 @ 6:25 pm

Thanks for sharing the lightbox script! It is fabulous and I tried implementing it for a website.
When I was testing this on my local home machine, the transparency using overlay.png works great in all IE 6.0 , 7 and Firefox. The url is http://abasak.no-ip.org/5/chinrest.php
However, without changing any code when I tried to upload it to a hosting website, the transparency does not work in IE 6.0 but works in Firefox and IE 7. The url is http://www.stringmart.com/chinrest.php
Does anyone have any idea what may be causing this? Is this something to do with any file access privileges? I have looked into the paths and all, but cannot figure out what may be the reason.
Can somebody help… please…
Thanks a lot!

#145 Fabio Aro

May 3, 2007 @ 5:02 pm

Hi!
Man, I can't make the overlay work anyway…
any ideas??
thanks!

#147 Chris

June 19, 2007 @ 1:45 pm

#135 Beren

Thank you! Thank you! Thank you! I was struggling with this concept for a few days before I came across your comment here. This is exactly what I needed.

And of course, huge thanks also to Lokesh!

Great job, everyone!

Chris
http://www.thelastrewind.com

#149 tonypb

July 30, 2007 @ 10:48 pm

HELP! i love this but… not workinig for me on IE7 using VISTA… it works on XP and IE6 and according to a friend on IE7 and XP

#151 James

August 9, 2007 @ 9:57 am

Please I need help !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

I'm working on asp.net (c#) project and I need to a LightBox that collect information from the users. On submit then the information is written to the database.

Instead of having a photo Images in the lightBox I would like to have a asp.net or html form with TextBoxes

Please I would like to know how to do it and extract the information to write to database from the TextBoxes

Thanks

Terry