Lightbox != Lightshow

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

http://www.ojacko.com/?s=&c=urple&w=photos
This is a php gallery I wrote around the Lightbox script. It’s quite simplistic.

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

/Rod

Great! Really looking forward to the Lightshow script. Keep up the good work!

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

I can’t wait to see the Lightshow JS photo-gallery I’m sure it will be amazing.

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

WoW! Waiting for the release, keep up your good work!

Luv,
Vinay

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

The Lightbox is a great script.

Waiting for another great stuff.

Thanks,
Sarjya
India

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!

Thanks for coding all this awesome (and usable) stuff… can’t wait to see lightshow.

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.

I?m looking forward to friday! thank you for such a great piece of code!

@david (#13): do you use firefox 1.5?
if so, just hit the function-key “F7″. it?s called “caret browsing”.

regards

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

Hello Lokesh. First things first:
Your Lightbox script is fantastic. It’s how images are supposed to be viewed outside flash or ordnary page layouts. I’m already looking forward to the Lightshow script.

However, while I was creating my website I may have discovered a bug that occurs in Interenet Explorer 6.

You can check out the bug here
http://www.some1else.org/beta/personal/illustration/

If you click the first image in the gallery (Crap), you’ll notice that it keeps reappearing after it’s closed. This only happens to animated GIF images.
However, when I tried recreating the same event on an unstyled page with a similar document structure, it worked fine.

Check the unstyled version working properly:
http://www.some1else.org/beta/lightbox/

Since it’s so hard to recreate, please don’t let it bother you while making Lightshow :-) .. Just thought you should know about it though. This could probably be attributed to some crap code by Microsoft, that involves .hasLayout or something.

Good luck.

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

Best Regards,

James

Great piece of code! Lots of people asking for it to work differently though…..I say “Do it yourself!” I’m sure Lokesh has put lots of time into this.

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

Looking forward to see it, I love lightbox

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…

Hi! I’m also looking forward to see the Lightshow gallery.

I have found the Lightbox script to have problems with Konqueror 3.4 (Suse 9.3 + KDE) - or maybe the other way around :).
It will only display the grey background, no image…

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!

ok, I coded my own version of the lightbox but used some of your codes (omfg the z-index bug in IE o.O) and things like the getPageSize and so on. But most of the code and the core code is done by myself. There is a nice fade-in and fade-out transparency effect I did before for other sections of my page and I sticked it together to make it work with my “lightbox” ;)

It has got all features you need: resize images, close, open in new window and you can even slide between the images in my gallery script (or in the file upload section of my page).

See it here:
Gallery:
http://og5.net/index.php?cat=list&gl=17

File Upload Section:
http://og5.net/index.php?cat=list&gl=1&dir=files/1

(Just Click on an image or an image link on the page)

If there is any request for the code e-mail me ( christoph.pojer@gmail.com ) cause I need to extract it from the other code to use it properly with other scripts.

(one other cool thing is that you can edit the captions (if you’re logged in and if it is your gallery) using ajax. heh!)

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

There is no file upload section…

I told you that you should write me a mail, if you wanna have the code (email link is in the post above yours).. you can just see how i implemented it into my homepage.. (my page is a self written blogging system with some upload space and that is the upload section of one user ;D )

If you really need my script I’ll take some time and extract it from my code that you can use that thing

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

Well after spending the afternoon tinkering with a whole bunch of acronyms on http://www.flavoursm.com - mainly ajax, sajax and xml - I’ve still no clue on how to get lightbox’s javascript to deliver a huge description/comments/exif info and what not.

Any body else got any ideas?

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?

Since there was a lot of request for my script I posted one how to guide into my blog, source and demo included. Have fun:

http://blog.og5.net/wusch/894

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

I’ve used it for my sister’s Portfolio. Thank you for it. It made the web page so much easier to design without sacrificing prettiness. =)
http://www.artisticappeal.com

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

jason - this is the case with all Javascript proggies I’ve used. They don’t start working until the page fully loads.

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.

anyone else starting to feel like the gallery isn’t coming? No update about it since 01/17. Lokesh….is it still coming or should we just use one of the other galleries created by posters on this site?

thanks!

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)

hey im playing with lightbox to fit into gallery2 :D thought you might like that :D

test so far are at www.sfmoe.com/gallery2/

i will be adding some other stuff to it soon to fit in with gallery ..

thanks for the awesome script

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?

Thanks for the script! Very very cool. I tweaked the colors of the overlay.png image to do a fade-up between blue and light blue. It has a very unique effect to the background behind the photos. I used it on my high school reunion website’s Photo Album page at http://ingraham85.com/album

The following is the tweaked overlay.png image: http://ingraham85.com/album/overlay.png — try it with a different colors as well as a fade from left to right and it comes up with some interesting effects.

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?

because of your broken rss:

take a look at this http://validator.w3.org/feed/check.cgi?url=http%3A%2F%2Fwww.huddletogether.com%2F

Hello,

I really like the “Lightbox image viewer” what I have found at Dynamic
Drive.
I am using Opera 8, and what happens is: the first time when I click onto a
small image, the large image is shown, as it should be. When I click onto
another image, the same good result.
Now, when I click the second time to the same image… just the timer runs,
and the large image is not shown.
If I reload the page, the same thing happens: all images work only at the
first time, and not afterwards.

Can you help me, what to do??

Thanks, and congratulations for this nice solution!

Greetings from Budapest

Tamas

KOOS Tamas
info@koosfoto.hu
www.koosfoto.hu
+36 70 561-95-91
————————————-
HARMONY

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

This script work in my page on Opera. But in Firefox works only in home page (in page with comments doesn’t work). Why?
adas.jogger.pl

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!

First off let me say the lightbox creation is a very nice script I’ve only recently saw it on Dynamic Drive but wen I saw it I had to get it….but the reason I’m here is….

I cant seem to get the lightbox js skript to work properly. The pictures open up in the pop up window but the loading screen or picture doesnt display….could you help me out with that

To see wat I’m talking about http://www.muney-designs.com/My%20Pics.htm

Thanks

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

I really need some help with this… i have no idea what im doing wrong.
the site im testing it on is http://www.users.on.net/~ztaylor/test/illustration.htm
Im just trying the first thumbnail right now… and when i click the link it just goes to a new window with the image…
I have put the .css and the .js files in the same folder as my .htm is that right?

Can somebody please give me a hand and contact me.
joshuatree@internode.on.net

thankyou.

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.

Hi,

Your script is totally amazing!!!

Two questions/remarks:

a) if you change the loading.gif by a smaller gif, then the width of the new gif is changed to match the width of the original loading gif. In other words: the new gif will look distorted. How can I fix this? I suppose something in the script at the “// center loadingImage if it exists” lines? Can’t seem to find it….

b) Sometimes the script just doesn?t work and the image is loaded on a new blank browser page? As if you would do a regular Any idea why? Is this a known bug? If I wait a few seconds, the script works again and the image is loaded as overlay the way it should. So it’s like, it’s working, not working, not working, working again, working,etc …

Any way: thanks a lot!!! I’ve been waiting for something like this :-)

Regards,
Kris

Hi Lokesh,

Thanks for the reply! You can take a look here:
http://www.krisvdv.net/blog

(If you click on the picture in the last post –Machu Picchu photo- you will see the distorted loading gif.

Thanks again!
Kris

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

Not sure if the Flash z-index thing is still an issue where the Flash is above the image. It was an issue for me…

I used
But that only working in IE… So I added a layer and made it invisible in showLightbox() call. Looks something like this

var objFlashLayer = document.getElementById(’flashHeader’);
if (objFlashLayer) {
objFlashLayer.style.visibility = ‘hidden’; }

Then just make it appear again in the hideLightbox() function.

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.

Re #49 Nick (Australia) and #53 Lokesh

Woops - my bad - relevant links

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

Thanks.

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.

FLASH TIP

Further to #59 Nick (Australia)

Something just happened to the code, try again?.

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: param name=”wmode” value=”transparent”
- In the line embed ?… add: wmode=”transparent”
- In the line object ?.. 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.

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

I did make a portfolio site with lightbox, it works great:
http://arjangeurts.nl

I’m looking forward to use lightshow, the ‘previous’ and ‘next’ bottons would make it even better!

I use lightbox on my site :

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

tks a lot for this fabulous script !

LIGHTSHOW OFF TEXT LINKS

Does anyone know how to get lightshow working off a text link rather than off a thumbnail without creating a seperate div? (eg for links to large pics off words in a sentence). If so, please provide example code. Thank you kindly. Love your work.

re #64
sorry - referring to lightbox….

@Nick #64

That’s easy, you can see it working on this blog: http://huddletogether.com/.

Scroll down to the post about the broken mobile phone.

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

Guess I’m kinda late for the party, but I use it at www.haf.se/cv

It’s really nice, although it would be great if there was some way of adding next and previous buttons - perhaps if loading a html snippet via ajax or some stored string and then inserting the image object through javascript into a placeholder within this html snippet. (the snippet being responsible for next and previous links)

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

Greetings from Portland, OR

re #66 Arjan

sensational. thanks a million Arjan. This script is so cool!

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.

I’ve used it on a sports site, with a php gallery backend. Great work!

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!

Currently if there is a scroll bar on the page, the lightbox is centered within the full width of the window, which makes it off-center compared to other centered elements on the page. Anyone know how to fix this and make it centered within the full window width minus the scrollbar?

Is there a way to make the loading image show up for a specified period, even if the image is already loaded? I don’t know whether it’s because the images are cached on my browser, but I don’t get the loading image on many pictures. I get it every now and then, but not always…

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.

Lokesh - the samples on your page show this behavior when using Firefox 1.5.0.1 on Windows XP. I’ve put up a screenshot of your example page that shows the difference and the slightly off-center effect::

http://www.gregphoto.net/download/lightbox_firefox_scrollbars.png

Thanks again for such a terrific script…

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?

hey check this out guys, using light box and php to create a dynamic call to the images instead of hard coding them.

dynamic gallery

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/

Great job, lokesh. Awesome script. I succesfully implemented the script on my picture gallery but have no success trying to put it within frames.
Any suggestions?

Thanks, Ed

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

I’m sorry, I’m an idiot. I didn’t realize I had the local copy of that site open :-|

http://www.laurenfleishman.com/beta/photos.html

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.

Ooops, I meant http://www.jyeo.net/photo.html.

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?

I had some problems with images that whad odd heights or widths. I tracked it down to the divide by 2 parts of the script. Wrapping them all in Math.round() took care of it. Thought it might help future versions.

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.

Thanks a lot!
I used it on my site
http://www.makhouleen.com

hi hi …
i want to say that u have a bug.. on that lightshow…
if u loaded a picture and u close it then if u click on the other page
while it’s loading u close it and if u click on the pic that is clicked before (the already loaded picture) and if the other loading picture loaded he will replace
the already loaded picture.
in other words

image 100% loaded—>click on image2 0% loaded —> close the image2 0% —> click on image 100% loaded —> image replaced to image2 because image2 loaded 100%.

i think that’s a bug doesn’t it?

wee wee posted on wrong subject

Maybe someone can help me… I love this script, and everything works except for 1 thing : the background “overlay.png” comes through as opaque on IE. Meaning it’s a full-on charcoal background, and we can’t see the website behind it at all.

Works fine in Firefox.

What could be causing this to happen?

Thanks!

(Anyone with an answer or a link to an answer, please email me at whisp72@hotmail.com)

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.

D’OH! Nevermind, found it.

Move along, nothing to see here (except for a really embarrassed idiot who posts too fast).

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)

Bugs,
For your link, add the following to your js in the Configuration section where your variables are declared:

// HTML inserted between the following quotes is added above the image.
var objuserMessage = ‘©2006′;

Add this toward the end:

// create user message
var objuserMsg = document.createElement(”div”);
objuserMsg.setAttribute(’id’,'userMsg’);
objuserMsg.innerHTML = objuserMessage;
objLightboxDetails.appendChild(objuserMsg);

I tried it with a link and text earlier, I hope you can use img src= and target= also.

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

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.

re #89 (and #49, #57)

all sorted.
had to add overflow: hidden; to a couple of divs and now no pixel shifting.
thank you.

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

Question, can I position the image on the page or is it always centered?

thanks,
charlie-imac

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

Ok, here’s a stupid question. Is there an easy way to remove the file name and picture size information from under the displayed picture?

This is a GORGEOUS script and I’m seeing it popping up on tons of sites.

Thank you, Thank you, Thank you!
Paul

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

http://www.cssplay.co.uk/menu/lightbox2.html would

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?

A.N. Jacob

I did look at Stu’s previous lightbox but the client like how bright the images were using lightbox.js. I just looked at Stu’s newest lightbox for another project but the page size is too large!

Web Site Optimization
WebSiteOptimization.com

Higher traffic and speed guaranteed.™

Home Sitemap Publications Services About Contact
Newsletter:
home > services > analyze > results
Web Page Speed Report
Announcement

This analyzer is now available at WebPageAnalyzer.com for your convenience.

Learn how to Speed Up Your Site.

speed up your site web site optimization cover
URL: http://www.cssplay.co.uk/menu/lightbox2.html
Title: The size of this web page (1010282 bytes) has exceeded the maximum size of 1000000 bytes.
Date: Report run on Sun Apr 2 10:09:35EDT2006

The size of this web page (1010282 bytes) has exceeded the maximum size of 1000000 bytes.
Please try again.

Notice, the web page is over 1M.

charlie-imac

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

Wonderful piece of art ;-)

One remark:
If closing the image (click in the image, or the X in the top right corner) in Moz1.7.x the mousewheel is not responding any more (no more scrolling the original page).
To get it working again, one has to click in some text of the page.
Strangely enough (for me), closing the image by pressing the key “x” leaves the mousewheel in working order.

Just have a look at the original example page http://www.lokeshdhakar.com/projects/lightbox/

all the best,
Alfie

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.

I was told about your site yesterday by a friend and immediately downloaded Lightbox JS v2. It was so simple to get working on my site zhero.net - although I am still playing with it, so my implementation is ugly and limited as I am waiting for Lightshow, which sound exactly what I am after!!

Keep up the excellent work!

Beren

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.

hi!
i’ve found lightbox v2.02 script surfing the net and i find it e
exctiing.

I have a question though.
Can i have different set of image to switch to inside the same xhtml page?
can you help?

thx.

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

Hi,
Lightbox is great! My only problem is that my pictures are really large, and I’m too lazy to go and size them all down. Is there some way I can set them to display at 50% or even just give the pixel sizes?
Thanks,
Elinor

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

Implemented the lightbox and overlay effects to several parts of my website and it looks great. I was really glad that it went smoothly with all browsers. Great job and thanks for all the help.

You can check it out here: http://www.planjam.com/date.php

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

wow great job.. i like the lightbox tanx!

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?

I freggin’ love the Lightbox JS. Wicked elegant and very lean. I only wish it could work for iframes though. Eithe way it’s a fantastic code. You’re a genius!

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

Can anyone figure out a way to preload the images?

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.

i found the greeat lightbox code while searching for a good gallery on a DHTML site, i also found a dhtml vertical menu that was perfect and they both work easy an perfetly together.

BUT..

when i click on an image to bring up the light box gallery the dhtml menu appears over the lightbox gallery. can any1 tell me why this happens an how i could fix it.

oh an the dhtml vertial menu works in a div layer(just thaught it would help if u knew)

hope some one replies

thanks.

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.

Hey can someone tell me how Bernd achieved to get the “Download full picture” link on his site? I cant contact him cause he left no email and he has no contact info on his page.

His comment here:
http://www.lokeshdhakar.com/2006/01/17/lightshow-js-note/#comment-1441

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

I want to enhance my site with Lightbox JS 2.0, but for that I really need the feature of a full size download link. Does anyone have an idea? I know that I can simply put the link to the big size in the name of the link like stated here:
———————————————————–
Can I insert links in the caption?
Yes, but you need to convert quotes and greater and less than symbols into their html entity equivalents. For example:
Image
———————————————————–
But if I do it like that I have the html code also shows as the tooltip and that doesn’t look nice.

So anyone an idea how I can get this to work without tweaking out how Bernd implemented it?

Thanks!

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

-> 77 Bernd

hello,

my name is Dominik, and first of all - my english is not very good, but I think you understand me. You added scrolling (I don’t know is that good word) images using keyboard keys (, …). There is one cool thing - if you are watching last picture, and select ‘next’ - first picture is loaded. But there is a problem using this… when I want to scroll from last picture, to first - nothing happends, and I receive an error (in IE6, FF1.5 and FF2.0, Opera not tested) -> ‘There is an erron on (in?) the page’. -> ‘objLink has no properties’ in line ~309 -> ‘imgPreload.src = objLink.href;’. This error happends (I’ve been looking for this, for ~6 hours) when there are some other links (tags ‘

…

…

when I remove this other links - there is no problem, everything works fine, but I can’t do that, because I’ve got a menu on the top of the page, and I’m using images as links. Do you know how to fix this error? I’ve tried to do this, but there is no positive results (I’m not good in JavaScript). Can you help me?

best regards
Dominik Pluci?ski

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

What a great piece of work and how thoroughly professional!

We plan on using it (have actually started work on it) for a gallery of court houses and government buildings in Costa Rica. The pictures are not exciting but it’s often the only way for people to find the places, since Costa Rica doesn’t have street names and house numbers. Look for it soon at http://www.costaricalaw.com

Keep up the good work, Lokesh!

Best,
Bob

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

Hi, thanks for your nice work. Just a question: is not there any way to make the CSS file to be complaint with CSS standards?!
Have a look in here http://jigsaw.w3.org/css-validator/validator?uri=http://www.lokeshdhakar.com/projects/lightbox/lightbox.css (it’s the same for everyone wich uses your js+css).
Thanks anyway,
P|xeL

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

Hi,. is this script free? can i use it freely?

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.

How to make to set lightbox be on the top of the some flash animation. When lightbox cross the flash its always under the flash. Thx.

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!

Awesome scripts! I’m using the first Lightbox JS version for a new site and have a question about the height of the image and caption.

I figured out that I could add a “name” attribute for an image caption and then swap “name” for “title” within the script. That way I can have long captions that include simple HTML code (such as <br />) without it also showing up as big ugly tooltips.

This works fine but because some of these captions are long, the image is now flowing below the bottom of the viewport (at 1024×768 resolution) but there is still a big margin at the top. It’s as if the calculations for the image and caption positioning don’t realize the caption is there and doesn’t take it into consideration.

Is there a way to alter the JS so it calculates the caption along with the image height? I’m a javascript novice.

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.

Hi,

Does anyone have a working solution using LS but using text from MySQL. I offer a free remote cron service at http://www.remote-cron.com . What I’d like to do is to be able to display the users’ crontab log files in the same manner as LS does it with images.

Anyone out there?

Many thanks in advance…

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