Now with captions! I’ve also fixed a couple of minor issues involving extra-large images falling out of the viewport and a small gap in the overlay in Firefox. Also, it’s more keyboard friendly now. Thanks for all the comments and suggestions.
Grab the latest files here: Lightbox JS
Just a teaser, but per many requests for extended functionality, I am working on a complimentary ‘photo-gallery’ script. It will include forward/back navigation, preloading, and much more. Check back next week.
Tracey Jan 11th, 2006
Thanks for the excellent script. One question, how could I put a link in the attributes? For example, link to another page or action.
Chad Edge Jan 11th, 2006
Tracey, Are you talking about a link below the enlarged image?
We’re working on that right now (a close link as well as a ‘print this image’ link that will launch a different file w/ printing options attached).
I’ll post when finished.
Andy Jan 11th, 2006
Thanks, you are are Champion, i found this website this morning (Australian time) and it was pefect except that it didn’t have captions, i thought to myself, no biggy i will add captions to it… i come back this afternoon and a new feature has been added. THanks heaps, you have saved me alot of time making this same thing for myself!!!
Chad Edge Jan 11th, 2006
Tracey, here’s a hack-job I’ve been working on to get links working:
http://www.osnap.net/sandbox/sandbox_lightbox.php
It’s got a way to go, and maybe somebody else can clean the bugger up :)
Ben Jan 11th, 2006
Awesome script!
But I’ve got one issue—how can I get this work with image maps? My client’s website has ‘chunk’ images that need to have 4 or 5 links coming off each one. Right now, we’re just using image maps. We want to use your script, but can’t get it to work with them. It’s something with the “Rel=” not working on the link.
Thanks for anyhelp!
Ben
Andy Jan 11th, 2006
I have a flash nav bar on my site, which doesn’t get ‘overlaid’ with the lightbox, does anymore have any suggestions to to overlay the flash window, i have already tried changing the z-index, no avail. Thanks in advance
Sean Alsobrooks Jan 11th, 2006
Awesome Script! Very nice and clean and functional.
I have one question, is there a way to position the full size image on the page? Maybe within an exixting ?
Thanks,
Sean
G?bor Jan 11th, 2006
Andy: this is beacuse by default Flash is above of all elements. You can read it here (http://joshuaink.com/blog/82/flash-content-and-z-index) how to avoid this.
Alberto Ortiz Flores Jan 11th, 2006
Hi there, nice script!!
I have been trying to combine the moo.fx Opacity effect ( a superlightweight javascript effects library ) with this script and I can’t find the way to make it happen. … any help in this?
this is my test page: http://dismorfofobico.com/test.html
raz Jan 11th, 2006
Sweet, thanks.
Tonio Jan 11th, 2006
Excellent !
The bug mentionned here : http://www.lokeshdhakar.com/2006/01/02/lightbox-js/#comment-374
has been solved by this update.
Thank you very much :)
Chris Jan 11th, 2006
Very nice script indeed!
Would it be possible to resize the images before display dynamically based on browser window width? I have many large images (of varying width) and I would like them to appear at about 70% of the browser width (with height set automatically, so as to preserve aspect ratio). I tried doing this with a few changes to the CSS and script, but I didn’t get very far.
laboratik Jan 11th, 2006
@Alberto Ortiz Flores:
check out the onload events! put the onload events of moo.fx in the
Lightbox.js file( at the bottom) and test from there? Dont know if it will work but this is often a problem with javascripts….
bpixel Jan 11th, 2006
well done !
just a suggestion : if you add an iframe methode on your script it will allow us to pen a form, or any other page with the same effect ;)
regards.
Tom Jan 11th, 2006
Safari 1.2.3 (v125.9) displays the image top left so the loading graphic looks a bit funny. Do you think it’s possible to add a history marker, so pressing back takes you to the page with the photos, rarther than the page before the photos if you catch my drift.
Ben Jan 11th, 2006
Excellent Script. Thanks for sharing.
Ross Coombes Jan 11th, 2006
Used this script for the first time today, very nice and very quick to implement, good work sir!
The only initial problem I found was that in IE, drop downs do not get overlaid and as mine was unfortunately in the middle of the page, it looked rather silly. Changing the z-index didn’t seem to make any difference so the only resolution I could think of was to hide all select boxes by putting in…
var objSelects = document.getElementsByTagName(’select’);
for(var i=0;i
Ross Coombes Jan 11th, 2006
Clearly this comment board does not like code!
gandoulfe Jan 11th, 2006
Great!!! its a very good script ! thank you very much
soon oon http://www.gandoulfe.com
well done
Kagou Jan 11th, 2006
Is it possible to hack this script for this :
Zooming is available to all pictures : larger than specified manually and in a particular id (div or class).
It will be very interresting in a weblog view. No more to resize picture in posts. If there are pictures in posts larger than what i’v specified then this javascript work.
Thank you for your work :)
Mark Jan 11th, 2006
This is a pretty slick script. It will definitely be handy in my next gallery.
Anyone know if there’s a way to get this script to display an entire article instead of an image? I’m working on a site now where a feature like that would be pretty slick on. Just display the entire contents of the article in a div (even allowing links and images within the article) and have a close button at the top or bottom. That’s just my initial thinking. But I’m not sure how to do it.
Any help would be greatly appreciated.
Maria Jan 11th, 2006
thank you! :)
Anthony Sangiuliano Jan 11th, 2006
Ross Coombes:
Another way to overlay the form elements that seem to want to pop through the image is to change the “overlay” object in the code to an iframe and add a filter. It does nothing to how it renders in Firefox, but it makes a difference in IE 5.5+
Here is what I did:
I changed:
var objOverlay = document.createElement(“div”);
to:
var objOverlay = document.createElement(“iframe”);
and I added:
objOverlay.style.filter=’progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80)’;
to the code within the lines where objOverlay is defined.
The main difference is that Firefox still displays the dark image with 80% opacity, while IE uses a white screen with 80% opacity.
Hope this helps.
tari Jan 11th, 2006
opera 7.54 keeps showing the animated loading gif even after he has loaded the big picture.
jaclimer Jan 11th, 2006
Thanks for sharing this little gem!
Arthos Jan 11th, 2006
This is cool :) But instead of showing a picture i want to show a small webpage popup. Is this possible ?
Johan Jan 11th, 2006
the photo-gallery sounds really great. looking forward to it!
j Jan 11th, 2006
I’d like to use this for a flash presentation or some other content, besides images, is it possible now or is it going to be possible some day?
kevdotbadger Jan 11th, 2006
I found that you can add links if you put them within the ‘title’ value.
eg title=”Cannon! Picture by some guy. Visit more here”
then just style the links in the CSS how you want with #lightboxCaption a and #lightboxCaption a:hover
Phiger Jan 11th, 2006
I do love this script.. Although it doesn’t seem to work opera (7.53)
Dustin Barbour Jan 11th, 2006
I’ve implemented this script to rave reviews from my site’s visitors. I have links to higher resolution versions of my images as wel las EXIF data in the caption. Future plans are to hook this bit of JavaScript to an AJAX library to allow users to rate these images in the “popup” as well as hook it to some animation effects to fade the whole deal in. Job well done, Lokesh, but this is just the beginning of what’s possible for this script.
Adam Jan 11th, 2006
On your example page, the top half of the caption cuts off (Firefox 1.5)
uli Jan 11th, 2006
first of all, thanks for this!
I have a little problem with IE. I’ve downloaded your files and built a test case … in IE it doesn’t show me the “shadow”.
First of all i don`t understand the usage of the blank.gif, can you tell me what is its use? I coudn’t find a blank.gif on your server too. Maybe you can give me a tip what i’m doing wrong …
* html #overlay{
background-color: #333;/*IE 5 win*/
back\ground-color: transparent;/*IE 6*/
background-image: url(blank.gif);/*IE 5 win*/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”overlay.png”, sizingMethod=”scale”); /*All IE ?*/
}
thanks in advance, uli
Jan Jan 11th, 2006
it’s genious!
Daniel Jordahl Jan 11th, 2006
Fantastic dude. Fourteen thumbs up.
Johnnie Jan 11th, 2006
I love the script, unfortunately I can’t use it anywhere until it is cross browser.. find the bugs and make it work. Thanks for your hard work.
Brian Larter Jan 11th, 2006
I am trying to get this to work on my blog. i use wordpress and it just won’t take it it seems.
Keith Cirkel Jan 11th, 2006
This is a very nice script, I love it and I am using it on my blog at current.
One thing, I dont know alot about javascript; how could I get it to move the lightCaption div ABOVE the image? This is the only thing I really need to make this perfect, thanks.
AsceticMonk Jan 11th, 2006
Hi Lokesh, it seems the CSS does not validate.
Dot+Pixel Jan 11th, 2006
Great script!
Anyway to add a onResize event handler to keept centred in a browser window?
best of 2006 already!
thanks,
Andrew
tim Jan 12th, 2006
you might want to make your zIndex higher, or have them as user settings, as you’d want the overlay to cover all other dynamic html, such as tooltips and popdown menus.
Alberto Ortiz Flores Jan 12th, 2006
@ laboratik:
Thanks!! I took your advise and separete all the onlode events to a simple function and now the script is working great combined with moo.fx.
example @ http://dismorfofobico.com/indice.html
Patrick Jan 12th, 2006
I just used this to enhance my Flickr tool “Favourite Photographers”: http://m.ac.nz/c/ – neat addition, I think.
tboley Jan 12th, 2006
Impressiv!
I`m actually working on a gallery plugin for WordPress (http://www.wildbits.de/mygallery/). Under which conditions can I include parts of your script, Lokesh?
Geoff Jan 12th, 2006
Fantastic script.
I’ve implemented it in the pictures section of our website: (http://www.amberfield.com.au). Works beautifully and adds substantial value.
Thank you.
Roan Lavery Jan 12th, 2006
Brilliant Script! I’m completely loving it.
With regards to the comment about the CSS being invalid: you can place this CSS inside IE conditional comments, which ensures the CSS remains valid while the script still works in IE.
I’ve posted a quick and dirty tutorial about it over on my blog:
CSS Valid Lightbox JS
Thanks so much again for this script Lokesh!
Gavin Montague Jan 12th, 2006
Excellent script, well done to you Lokesh.
I’ve rewritten it a bit and turned it into a GreaseMonkey script for Flickr. I hope it proves useful to someone
Flickrbox.
Kevin Jan 12th, 2006
Okay, I was able to get around the IE form problem by making my drop-down box invisible when the lightbox is up. I did this by first putting the box in a div labled “text2″
then I added this code in the showLightbox function:
var objForm = document.getElementById(‘text2′);
This in imgPreload.onload function:
objForm.style.display = ‘none’;
And these two lines in the hideLightbox function:
objForm = document.getElementById(‘text2′);
objForm.style.display = ‘block’;
this will make whatever is in the “text2″ div disappear when the lightbox image is open and show back up when it is closed. This may not have been the most eloquent way to do it, but it works.
Kevin Jan 12th, 2006
BTW Lokesh, I really like the script.
The next thing I’d like to figure out is how to add navigation links in the maximized image. That way someone could go to the next or previous large picture without closing and clicking on another thumbnail.
Darren Jan 12th, 2006
Works great just implemented on a dvelopment site http://petslive.websights.co.uk/productDetails.asp?MainCategoryID=4&subCategoryID=8&productID=153
Anyone had any problems with Safari specifically not closing the enlarged image?
Gerard Gorman Jan 12th, 2006
Great job, I love this script.
Thanks, Gerard
Robert van Seggelen Jan 12th, 2006
Hi!
I stumbled over your site via styleboost.com and checked out your lightbox script, with is very stylish I must say.
I have recently made a simple pictureviewer (http://www.robertvs.com/projects/pic_viewer) and am wondering if I can use some of your css for the darker background effect on my project.
Anyway, cool stuff!
/robertvs.com
Al Geddis Jan 12th, 2006
This is a super piece. It works great with generating albums. Thanks is not strong enough.
axel Jan 12th, 2006
woa i’m stunned. the script is really cool, why didn’t anybody do this before? besides: your website is utterly charming :)
Ant?nio Jan 12th, 2006
This is a great script, Very useful for portfolios too! Keep improving it, it’s getting better every day :-)
Ant?nio Jan 12th, 2006
Sorry about another comment, but I forgot to say:
Please keep Opera Browser support in mind! :-)
Thanks.
Prashant Jan 12th, 2006
This script is looking great!
Keep up the good work :)
Barry Jan 12th, 2006
Anyone having issues on getting this to work with sitemesh and JSP files?
Lokesh Jan 12th, 2006
Kagou – There is no way to physically resize the actual image with Javascript. You can only make adjustments with the width and height attributes.
Antonio – I’ve tested w/Opera 8.0 successfully.
bpixel, Mark, Arthos, j – I’m working on it!
Anthony Sangiuliano – Neat idea to use an iframe instead of a div to circumvent the form elements showing through the image in IE. The other solution as others have mentioned is to set the visibility to hidden for problem form elements.
uli – If the shadow is not showing up, make sure the overlay.png is in the right spot.
Roan Lavery – Nice work with the valid CSS.
Gavin Montague – I love it! Flickrbox
eric Jan 12th, 2006
any way this could work with an image map?
regardless, it kicks butt.
Adam Jan 12th, 2006
Ah, I think the problem with the cut-off captions on your example page in firefox is because the image pushes itself down on the apge if it is too near the top and then goes over some of the text… when I’m scrolled all the way up it overrides some of the image text, when I scroll even the slightest bit down, I can see the captions great. I can get screenshots if you don’t see it.
jack Jan 13th, 2006
nice..i remember seeing this in most flash site
anyway to do this in actionscript?
Xavez Jan 13th, 2006
Deliscious mate! Been looking for a neat gallery for a long time now and since I just don’t have the knowledge to start coding everything from scratch… -> bookmarked! ;)
Harmony Jan 13th, 2006
Brilliant script! Beautifully presented, coded and very simple to implement, thank you so much :)!
Brendan Jan 13th, 2006
Very nice work Lokesh.
Have you seen the javascript zoom-in photo viewer at Cabel Sasser’s weblog?
bradleyD Jan 13th, 2006
This brings a tear to my eye its so lovely!
Thanks for the hard work and free offering!
Cheers.
Lsv Jan 13th, 2006
Fantastic! You should be working for a large company making amazing additions to their website. (If you aren’t already). I’m now using this on my website.
Lance Ball Jan 13th, 2006
Hi
I’ve added textfilter support for this to the typo blogging software. Have a look at this post for more info.
Thanks much! This is very nice.
Lance
Gu?ni ??r Jan 13th, 2006
I have nothing to say but what a great idea and the implementation is brilljant!
James Jan 13th, 2006
For some reason, the image wouldn’t load over my flash header, meaning, the swf file was on top of the image, which was on top of the page like usual. What do I do to fix that? I’m sure it’s my bad.
This is so awesome, btw!
metheus Jan 13th, 2006
Very nice script. I think it’s interesting how it seems to spark the imagination, it’s tempting to ask about “feature X.” I will refrain though, posting it as you have is more than generous. I look forward to seeing where things go from here, thanks.
James #2 Jan 14th, 2006
Brilliant script, I love it I is verry impressed, but… I’m trying to implament it on one of my web sites. And it works perfectly… in Opera 8.01 only. In every other browser I have tried it in it just opens the image in a new page, i.e. the script isn’t used and the image opens like it does by default if you link to another image.
I’m trying to get it working on this site: http://www.photography.xvi32.net/gallery.htm
Note if you check it in IE the PNGs don’t work… yet.
The strange thing is that everyone elses implamentation of Lightbox JS works in all browsers. Why am I special? I don’t want to be special, I want to be normal like everyone else.
I’d love to get this script working proprly as it’s the best thing I have found in a long time.
Cheers
Wilfred Jan 14th, 2006
Brilliant script!, saw in on digg a few days back, and now it’s on my blog….
Can’t wait for new features!!
Thanks for the great script!!
Raf Jan 14th, 2006
Hi, I found your brilliant script on digg a few days ago and worked on implementing it on my new website.
Just one thing I was wondering about is the possibility to make the enlarged image resize to fit the viewers screen automaticly.
could this feature be added easely by myself? or is it something you might add in next versions?
All help welcome :)
And thanks again for the great script!
John Jan 14th, 2006
Great script! I made one minor change you might be interested in… I wanted the code to work differently for people who can’t use it. I have a gallery and if people dont have javascript, I want to send people to a differnet URL that creates an HTML page, rather than display the jpg image directly (as required by your code). What I did was add another attribute to the line called “LIMG” (for Lightbox Image)… and I kept the HREF the way it use to be.
In your javascript, I added:
anchor.setAttribute(“href”,anchor.getAttribute(“limg”));
Inside the loop at the top of “initLightbox”… basically, if your code excutes, it copies “limg” over “href”…. if your code does not execute, the browser ignores limg and loads the default href. Seems to work great so far!
alex Jan 14th, 2006
it’s brilliant. thanks!
Frode Jan 14th, 2006
Excellent script! Eight tentacles up :) Thank you for sharing.
takkyun Jan 14th, 2006
Thank you for your nice and cool script.
I’ve also created similar script based on Lightbox JS.
http://serennz.cool.ne.jp/sb/sp/lightbox/
QRcom Jan 14th, 2006
Love this script! Kudos!
I do have one minor problem. I use iframes and would like image to be viewablein the parent frame, not the iframe itself. Can this be done?
Thanks in advance!
Aaron Jan 14th, 2006
WOW. good stuff..thanks
John Jan 14th, 2006
Excellent script! Very glad I came across it.
I seem to be having the same problem with iframes, however.
I have a site that has images in an iframe within another page. The lightbox will draw in the iframe, and not on the containing page. Is there a workaround for this?
Dale Jan 15th, 2006
Again, I too am having difficulty with Wordpress- it won’t print the javascript onclick functions…
Is there a way to manually enter them?
X-celent job Jan 15th, 2006
Cool
Tim Jan 15th, 2006
Hey there!
Thx for releasing this nice script. It seeams to me there is still a little bug. If you have no loadingImage this here will not work:
Img: objLoadingImage has no properties
line: 193
I just did a little ‘if’ and it worked again!
Cheers!
Mark Jan 15th, 2006
Lokesh
Just wanted to say thanks for a cracking script – looking forward to the gallery additions!
Thanks also to Chris of Alien in London for the pointers of where to have each of the files for a Wordress installation.
The script really does make a difference to a blog dedicated to imagery hosted elsewhere as it stops users disappearing to other sites.
Thanks again!
manuel Jan 15th, 2006
first off: thanks a lot LOKESH, it looks perfect- but you know that!
besides the lightbox.js i have to load another .js which handles full crossbrowser png transparency for img and css-background images.
maybe you can spot on first sight why those two .js’s interfer with each other, but i cant.
http://beachlevel/wp-content/themes/beachlevel/js/lightbox.js
http://beachlevel/wp-content/themes/beachlevel/js/pngiefix.js
maybe you could incorporate the one into the other, because lightbox needs the png alphaimageloader fix anyways…
would be glad to hear from you :)
manuel Jan 15th, 2006
oops, forgot the .com :D
http://beachlevel.com/wp-content/themes/beachlevel/js/lightbox.js
http://beachlevel.com/wp-content/themes/beachlevel/js/pngiefix.js
Andreas Jan 15th, 2006
Hi,
thanks for the really great script :-) I did some “proof of concept”-Next/Previous Navigation. You can see it at http://www.cronossphere.de/playground/lightbox/
bye bye
Anonymous Jan 15th, 2006
Andreas, FYI: sorry, but i dont see any nvigation at all using latest safari
manuel Jan 15th, 2006
^^ me
enzbang Jan 15th, 2006
Hello,
I have worked on your script to build a slideshow. I read an XML file to get captions and to build previous and next link.
You might find some interest in this script :
http://olivier.ramonat.free.fr/slidebox/
Peter Ketteridge Jan 15th, 2006
Hi Lokesh
This is a great little script thankyou for making it available for free it really is quite commendable! One small prolem is we cant seemto change the colour of the caption through the stylesheet (well I cant anyways). I can change it by putting a tag in the caption but I thikn you should really be able to do it via the stylesheet or am I missing something?
I like my large images to have a black border with a ligh grey text :-)
Thanks again
Peter
John Davis Jan 15th, 2006
This script is great. Just downloaded the new update from 1/15. There is still an issue with small gap in the overlay in Firefox with the large images. I can’t fix it! Also, the pictures don’t align the same. Some align at the top of page, some align with the middle of the page, some the bottom. The overlay problem could be resolved if all the large images aligned at the top of the page. All in all, this is the best picture script out there. Thank you for offering it.
John Jan 15th, 2006
Sorry, I meant to say the error still exist in IE, not FF.
Fareme Jan 15th, 2006
Hey, awesome lightbox script! My fiance and I are both getting ready to implement it on http://lotus.colodojo.com/ff and http://www.w0lfden.com
it rocks! So neat and stylish, too. keep up the great work.
Andreas Jan 15th, 2006
@ #89 Anonymous
first: thanks for the feedback :) and sorry – this was only a short proof of concept – I tested it in IE6 and FF 1.5 on my Windows machine. I have no Mac yet – so I just cant test it on Safarie. Have you gone left and right beside the Image with the mouse? There should apear some “arrows” to indicate the navigation…
Vince Jan 16th, 2006
When a picture is clicked on my website the “loading.gif” comes up but the bigger picture never loads….anyone know what the problem may be?
anith Jan 16th, 2006
Gud one, planning to implement it in my homepage (http://www.anith.com).
cheers,
Anith
James #2 Jan 16th, 2006
I found out what was making the script work in IE & FF on my web site. It was the image swapping code that was causing lightbox to stop working. If I remove the code then it works, you can see it working here without the code and with out the puddy rollover effect:
http://www.photography.xvi32.net/gallery.html
But as soon as i put the code in to get the image swapping working for the menu the script decides not to work. You can see the rollovers in the menu work but not lightbox here:
http://www.photography.xvi32.net/gallery2.html
So my question is how do I get both the image rollovers and lightbox to play nice together?
James #2 Jan 16th, 2006
P.S. It works perfectly in Opera 8.01, but I spose thats because Opera is a real web browser ;)
takkyun Jan 16th, 2006
Hi, James (#99 and #100)
>So my question is how do I get both the image rollovers and lightbox to play nice together?
My script works in your case.
http://serennz.cool.ne.jp/sb/sp/lightbox/
When you use Lightbox JS, you can add following code at the end of lightbox.js.
==== additional code from here ====
addLoadEvent(function() { MM_preloadImages(‘/images/menu01.1home.png’,'/images/menu02.1gallery.png’,'/images/menu03.1about.png’) } );
==== end of additional code ====
And also it is not necessary to set onload handler at your tag.
Regards,
Takkyun
— here from original code —
— end of original code —
James #2 Jan 16th, 2006
Chhers Takkyun! It works great (it’s nearly perfect!) now, thanks so much.
One thing, it’s no biggie just something that I noticed, I’m not sure if it’s a bug or not because it happens in every browser I have stested it in (Opera, IE, FF). When the loading.gif is loaded it’s always displayed (sometimes streched out of shape) on the far right in the middle of the screen. Whats the cause of this, and how can it be fixed?
Cheers,
James
takkyun Jan 16th, 2006
Hi James,
>on the far right in the middle of the screen
I’ve checked it.
Your style.css (text-align at #Content) causes it.
You can fix because of chaging your lightbox.css as follows.
#overlay {
text-align: left;
background-image: url(overlay.png);
}
yes, just add “text-align: left;” for #overlay.
Regards,
takkyun
HellsBells Jan 16th, 2006
Hi – lovely script.
Only problem I’m having is that if you’re not using a mouse, once you’ve got to the big image you need to tab through all the links on the page to get back to the big image before pressing Enter and returning to the main page.
Also, once back on the main page I can’t seem to “go anywhere” using the tab button without first clicking the mouse on the page. Is there a way to get round this?
James #2 Jan 16th, 2006
Thanks Takkyun, thanks for your help and support it’s really appreciated.
I still cant get over how xool the script is, I absolutly love it. You and Lokesh should be verry happy and pround your scripts it seems are a huge sucsess and well done because they are great scripts and deserve to be sucsessfull :)
Pablo Jan 16th, 2006
There are a issue in the overlay that happens in most browsers. Is not the big thing but I can’t get fixed:
1.) Restore the Windows where you are looking Lighbox and open a picture clicking in it.
2.) Maximixe the window and take a look at the botton of page: you see that te overlat.png has not grown till the end of page…
Are there some technique to fix this?
Anyway is a great script… thx!
Pablo Jan 16th, 2006
Sorry … in the comment #116 the secuence is wrong: First open the picture with the browser window maximixed and then restore the window without close the picture so you can see at the bottom the efect mencioned.
Jono | Iconaholic Jan 16th, 2006
Great scipt, thanks a lot!
I make a mac style rotating circle loading animation to use with it. You can get it here
http://www.iconaholic.com/images/site-images/loading-mac.gif
(Made especially for Lightbox JS so won’t look good against a light background).
Todd Ross Jan 16th, 2006
If you resize the /browser/ window from larger to smaller, the document recalculates its height (ie, it becomes taller, but narrower). Your Lightbox JS does not accomodate this; the document breaks out from under your overlay.
Chad E Jan 16th, 2006
This thing Rock’s Nice Idea..
Nicola Mattina Jan 16th, 2006
It would be nice to have a fade-in and fade-out effect when the overlay appears: something very fast, ie 1 second… just to have a transition between tehe page and its “dark version”…
Ciao from Italy
Nicola
Jesse Jan 16th, 2006
You are Big time
mcsnolte Jan 16th, 2006
Nice work, but is there a setting to keep the image fixed in the center of the screen even though you scroll?
MoeJoe Jan 16th, 2006
Great Script. is there a way to open the popup when the small images are in an imagemap?
Tristan Jan 16th, 2006
Nice script, I’m going to use this on our new site! One thing though, the image popus don’t center correctly when there is a scrollbar involved, could there be a solution for this problem? Can js know whether there is a scrollbar or not?
Jason Jan 16th, 2006
This is great, I’ve used it on my site.
One thing I noticed is if the target image (the large image) is an animated gif, the image will reappear after closing. The gif frames are still cycling in the background and when it gets back to frame 1, the image pops up again. Either selecting another image real quick or clicking the back button kills it.
Also, it seems the loading.gif is displayed at a fixed size. Where can I change this if I want to use another loading image? Or better yet, allow the image to be displayed in it’s native size, rather than making the script resize it.
Adam Jan 17th, 2006
Found another bug:
when not using a closing image, the code just doesn’t work. I tried specifying a random image and it also didn’t work, so maybe it has to be an exact size too? Taking out the code around line ~320:
// preload and create close button image
var imgPreloadCloseButton = new Image();
// if close button image found,
imgPreloadCloseButton.onload=function(){
var objCloseButton = document.createElement(“img”);
objCloseButton.src = closeButton;
objCloseButton.setAttribute(‘id’,'closeButton’);
objCloseButton.style.position = ‘absolute’;
objCloseButton.style.zIndex = ‘200′;
objCloseButton.style.top = ‘5px’;
objCloseButton.style.right = ‘5px’;
objLink.appendChild(objCloseButton);
return false;
}
imgPreloadCloseButton.src = closeButton;
will get it to work.
Jono | Iconaholic Jan 17th, 2006
Yea, I noticed that Adam.
I just set a transparent gif as the button & that worked fine.
Berry Jan 17th, 2006
I’m not the first one to tell you: it’s brilliant!
I’ve been trying this before, but you made it a lot easier. No more popups!
Chestah Jan 17th, 2006
Thankyou! This script is wonderful and integrates nicely into my blog :).
I appreciate your time and i’ve bookmarked this site to check back later for updates!
Any chance you can have a mailing list or “subscribe to this thread” idea.
Cheers
HellsBells Jan 17th, 2006
I was worrying about the accessibility issues with non-mouse users as I had some difficulty retaining focus on the big image and then once returned to the main page in FF it was impossible to tab anywhere.
I mentioned this on a forum and a forum member was able to come up with a solution to enable smooth keyboard use too – have a look at the thread to see the solution:
http://www.csscreator.com/css-forum/sutra79112.html#79112
Bjarte Aune Olsen Jan 17th, 2006
I have made a version of lightbox with next/previous buttons. Take a look:
http://www.basementmedia.no/blogg.php?id=292
My trick is to make two javascript-arrays with all the addresses and captions and get lightbox.js to fetch the information from there in addition to have it in the ‘href’ and ‘title’ attributes.
My modified lightbox.js:
http://www.basementmedia.no/mms/lightbox.js
I addition to the two arrays (one for image addresses, “ImagesArray”, and one for captions, “CaptionsArray”), you need to write the link (a href) code like this:
a href=’http://www.a.com/a03.jpg’ rel=’lightbox’ title=’A cool image.’ imageNumber=’3′ imageMax=’11′
imageNumber is the number of the current image you want to open (first image is ‘0′, second is ‘1′). imageMax is the number of images in the gallery.
Jeremy Jan 17th, 2006
Hi,
What would need to be changed to use the title attribute o fthe image, not the link, as teh caption?
I want to use this script but my boss wants the title attribute in the image, not the link. Any suggestions?
Abe Jan 17th, 2006
Great script!
I didn’t really have a use for it to display pictures, but I was able to tweak it so that I could display editable fields to a user without having then have to go to a new page or open a popup window. It works fantastic with some extra javascript and a dash of AJAX goodness!
Trevor Jan 17th, 2006
Looks Fantastic
But I can’t get it to work in my simple example ;-( Anyone help?
Is there more to do than DL the files, throw them into the images folder and then do steps 1 & 2?
I get no overlay or image. If I include the lightbox.css I get the overlay, but still no image!
eric Jan 17th, 2006
lightbox is great. got it working on my site (http://www.zealivityfive.com) and i’m loving it. linked you back as well.
Andy Jan 18th, 2006
Great Script!
But after I upgraded to the latest version (I first installed it on Jan 5th), it doesn’t load image(Firefox), or cause JS error(IE). What’s wrong?
my page is
http://www.matsubarafamily.com/lab/item/87
Andy Jan 18th, 2006
I found a solution.
around line 196 of lightbox.js, I changed
objLoadingImage.style.display = ‘none’;
to
if (objLoadingImage) {
objLoadingImage.style.display = ‘none’;
}
And everything seems to work fine (except that I still cannot find close button)
fob Jan 18th, 2006
Incredible Script! Thank you for sharing!
Paul Jan 19th, 2006
LOVE this script. it’s made my photo page for my newborn son 100 times better! Thanks so much, and keep up the great work. I’ll be checking back often!
fresh Jan 19th, 2006
this is an awesome script. i’m having problems with it in safari and explorer though. It works great in firefox but in the other two browsers when I click my pic it just opens the linked file.
styke Jan 19th, 2006
this is cool! never knew javascript can do such superb stuff.
anybody know why it didn’t work for my IE 6? it opens the link file in a new blank page.
Nick Jan 19th, 2006
Hi
very nice – has a problem if there is already onLoad code in the BODY tag – fails to work
What does it write to preload images?
Nick Jan 19th, 2006
I had to include the lightbox.js after the BODY tag, otherwise it didn’t detect my existing onload function.
Eric Montz Jan 19th, 2006
Nice little script you’ve got here!
Lokesh Jan 20th, 2006
#120 Chestah
RSS feed!
#121 HellsBells
I’ve just finished adding a keypress action for closing the Lightbox.
Soho Jan 20th, 2006
Lokesh,
As if you haven’t heard it enough… smooth work ;)
What is needed to display a .swf or .mov in the lightbox overlay space instead of a still image format?
jc Jan 20th, 2006
a very elegant solution to the pop-up window problem/annoyance.
i changed it to use the rev tag for the caption. that way i could put html in the tag and ff or ie won’t display everything in the title/tool tip pop-up
thanks.
eMPa Jan 20th, 2006
Hi,
great job!
But I found a little bug: (browser: firefox 1.5 and IE 6) when you try close image by pressing key other than defined (e.g. space instead ‘x’) then image is hidden but page still exists in overlay mode. I hope it will be fixed in next release.
greeting from Poland
eMPa
Jason Buechler Jan 20th, 2006
TO EVERYONE USING IMAGE-MAPS
You CAN use them, and it IS an easy fix.
In the lightbox.js file, find the line:
var anchors = document.getElementsByTagName(“a”)
and change it to
var anchors = document.getElementsByTagName(“area”)
then place “rel=lightbox” in all your area tags for the map
needless to say, you’ll need a seperate .js file if you want to still maintain “normal” functionality
GW Jan 20th, 2006
#138 JC
Can you elaborate? I’m rather slow with this stuff. Perhaps an example or a link to your implementation. Your change is just what I need. Thanks in advance.
Resnumerica Jan 21st, 2006
Hi,
nice script !!!
I have a question : is it possible insted of that “hit X to close” one can have hit any key to close ?
Thanks !
K
ND Jan 21st, 2006
Great Script…..Is anyone else experiencing a problem in IE with the script the ‘first’ time it is loaded. It never seems to work the first time, but then when I try again in IE, it works perfectly. When I close the window, start again, same thing…..problem only on the first thumbnail I click. After that, smoothe sailing. If someone else has experienced this, please let me know how you fixed it.
dreamweaver8484 at yahoo dot com
Jason Buechler Jan 21st, 2006
#143 ND –
I believe the problem is when you have a page that is not fully loaded. For example, I have several “albums” with 100+ thumbnails that need to load… when I’m not patient, the effect does not happen. When I am — and all elements of the page have loaded, then the script does work. I have no idea why, but I notice this on *every* browser.
ND Jan 21st, 2006
#144 Jason
Thanks for the response. What happens is the picture loads the old fashioned way, without the lightbox effect. I have to click the back button to make it work the second time. I don’t think it is the page not loading…..thanks anyways.
ND- Jan 21st, 2006
I don’t think you understood my explanation, as the problem you describe is exactly what I too get and why… Try going to any page of thumbnails you have, and instead of clicking on one right away, wait … let’s be extreme… wait 3 full minutes. Then try clicking one of your thumbnails. I bet it works the first time.
J
Jason Buechler Jan 21st, 2006
oops… #146 was me :-p
ND Jan 21st, 2006
Thanks Jason….I will give it a try and wait a few more seconds. If you are correct, then it should not be a problem since visitors will read through my site first, giving plenty of load time. Thanks.
MightyDuck Jan 22nd, 2006
It doesn’t work under Opera. Actually it’s not that it never works, it doesn’t work every time.
It is stuck under Opera, the loading gif stays on top, and the real picture is nowhere.
If I close down the loading gif, (or refresh the page) and click again, the real picture comes in instantly.
I think the error is in preloading images.(maybe if its in multiple div-s or whatever)
Does anyone have some advice?
Jono | Iconaholic Jan 22nd, 2006
Works fine in Opera 8.5.1 Mac for me.
ND Jan 22nd, 2006
MightyDuck #149
I just tested it in Opera, and had the same problem.
ND
MightyDuck Jan 22nd, 2006
Look at: http://www.fot-online.hu
It’s a hungariaan page. The interesting thing is the at little news’s images. They are in multiple div-s, and than in a table.
And doesn’t work. (But work on this page (http://www.lokeshdhakar.com/2006/01/10/lightbox-js)
But as I see, not I am the only one who had some prblems with it.
Johan Jan 22nd, 2006
The keypress doesn’t close the overlay PNG in safari (2.0), only mouse click does that.
Spencer Jan 22nd, 2006
Nicely done sir! A great bit of JS.
I have only question; Is there a way to stop a vertical page scroll bar appearing when the window is displayed?
Della Jan 22nd, 2006
Elegant is the word! I have begun implementing this lovely script on a site I am currently building. I did get the it to work fairly easily, but when I went to add a Javascript drop down menu in Dreamweaver (*blush), nothing worked… well.. I did get it to work a little, but pretty soon the code was a horrific mess. What can I say? I don’t know how to do it yet. ;-p
I’ve spent two or three days working on this, and finally have come back here to ask…: Is anyone on this lovely blog willing to show/demo/tell those of us who are code illiterate just how to implement this sweet script along with a simple drop down menu that works off a sliced image? Gosh that would sure be great! I’d also love to add an image rollover script too… haha. Would this be possible?
thanks Lokesh!
Xavez Jan 23rd, 2006
So like, I think I found a “bug”… It doesn’t overlay flash! :/
Xavez Jan 23rd, 2006
sorry for the commentspam and sorry for the flash-thingy, I was too damned lazy to search this iste for “flash” :D
Eli Jan 23rd, 2006
Whenever I try loading my page in IE, it gives me this error:
Line:218
Char:3
Code:0
Error:’navigator.PRXappVersion’ is null or not an object
I try everyone else’s script and their implementation seems to work fine. Anyone experienced this error?
Glen McHale Jan 23rd, 2006
Lokesh
Love the script it has given my site a better look and feel, but I have problem with I.E.
My site works fine within firefox but not I.E., the page with the image on it has the image in a nested table and this works fine in firefox producing the desired effect, but in i.e. all it does is just link to the image it doesnt even put the image as an overlay, i know its a long shot without seeing the html but can you think of any reason for this or a way round it.
Regards
Glen
subandono Jan 23rd, 2006
can you tell me, how add google adsense code below the enlarged image?
thanks, :)
dimitri Jan 24th, 2006
Thanks for lightbox!
It really is a great tool and can improve the usability of your website a lot. I use it on my website which is mainly about the Python programming language. See how I use it here:
http://www.serpia.org/spe
please add a comment if you like!
thanks,
Dimitri
Andy Jan 25th, 2006
Love the new close button feature, what i would like to do with this script is to be able to change it from displaying an img to displaying an iframe where i can put a flash animation or a page of html whatever. But to still also do the image thing too, i expect to have to add in extra attributes and the like.
My skills in javascript are really up to speed, i have tried changing…
var objImage = document.createElement(“img”);
–to–
var objImage = document.createElement(“iframe”);
and adding in extra attributes etc
i have also tried changing the…
var objLightbox = document.createElement(“div”);
–to–
var objLightbox = document.createElement(“iframe”);
but to no effect.
Does anyone have any suggestions, or something that can point me in the right direction
Regards,
Andy
Erkki Jan 25th, 2006
Hi,
Very nice improvements in this version, great work!
About Opera:
-Works a treat in 8.01 on Mac OS X.
-Works a treat in Opera 8.51 on Linux (Ubuntu flavour).
-Very buggy in Opera 7.54 Windows XP, just displaying the overlay and loading img if present. Works sometimes on single image in a page, but refuses to work on another page with exactly similar markup. Go figure…
-Works a treat with Opera 8.51 on Windows XP.
Other browsers:
- Icab 3.0.0 close with “x” on keyboard doesn’t work but all the rest is fine.
It is definitely a great cross-browser script :-)
Keep on the good work…
STILFX Jan 25th, 2006
Regarding IMAGE MAPS and Jason Buechler solution….
1 problem, there is no rel attribute in the area tag… so instead, use alt=”lightbox”
Here is the process again:
In the lightbox.js file, find the line:
var anchors = document.getElementsByTagName(?a?)
and change it to
var anchors = document.getElementsByTagName(?area?)
then, find:
(“rel”) == “lightbox”)
and change it to
(“alt”) == “lightbox”)
This will validate as XHTML
Erkki Jan 25th, 2006
Forgot to mention that in Icab 3.0.0, the image is not centered in the viewport once launched. Apart from this nothing else to report.
ND Jan 25th, 2006
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.
yoeri Jan 26th, 2006
Hello,
When turning zlib.output_compression On (htaccess), the script doesn’t load the image anymore. Is that possible or am i just freaking here?
Jason Buechler Jan 27th, 2006
#164 STILFX –
What do you mean exactly, that there is no “rel” in the area tag? You mean there is none in the current HTML spec? I ask because “rel=lightbox” is working fine for me here:
http://asuaf.org/~homer/cc-tour/country-club-map.html
Klaus Jan 27th, 2006
@yoeri(#167) hmmm … that can?t be, cause on my new gallerysite i use the compression and everything works fine in every browser, except opera 7.x, there is just the loading gif.
STILFX Jan 27th, 2006
@ – #168 Jason Buechler
There is no attribute rel. However, if you were to simply use alt the xhtml will validate.
STILFX Jan 27th, 2006
….Just a reminder, Jason and I are discussing the imagemap mod for lightbox. Specifically the misuse of the attribute rel on an area tag.
Just because it works, don’t mean its right. ;-)
STILFX Jan 27th, 2006
Always validate your code Jason.
http://validator.w3.org/
/* Wordpress needs an edit button. */
Tiggr Jan 27th, 2006
Hi!
Thank you for the great script, I’m using it somewhere on http://www.colorful-sky.de/ (for example here: http://www.colorful-sky.de/side71.html and here: http://www.colorful-sky.de/workshop/index.php?idcatside=79, sorry folks, only on the german pages…).
The only problem is, in IE there is allways a border without overlay on the right side of the window. I believe, it’s because the padding set to the body tag by css!
Bye
Tiggr
Brennan Boblett Jan 28th, 2006
To all you CSS junkies ;)
position:fixed; seems to work fine in every browser but IE. Was hoping someone could shed some light on this for me and suggest a good, and relatively easy fix. I have seen the jerky scroll java thing, def don’t want to go there, not a good solution. Any other good workarounds?
Ryan Jan 28th, 2006
Very sweet script. I want to use it on my site and I can’t get it to work. What could I be doing wrong?
When I click on the image it just opens the file in a new window.
Thanks,
Ryan
http://www.glorydayssportspub.com/glory_new/photos2.html
Stanza Jan 28th, 2006
Ryan you have quite a mess of styles in the head section of your page, try merging all of your CSS into one file.
This is a really cool script THANKS Lokesh
Stefan Jan 29th, 2006
i have an other problem when using lightbox js in IE. loading everythink works fine but when clicking inside of the picture in order to close it and return to the normal website not the wrong page is loaded (base site instead of subsite) … when clicking outside of the picture everythink works fine
the problem occurs on http://www.webfeeling.at/neu/content_management/ when clicking on one of the three thumbs (site is still under construction)
Yoeri Jan 29th, 2006
@Klaus (#169) : http://www.stvv.com/image/tid/44
Tis one works fine (it’s lightbox plus, but tested on lightbox too, same result). But when I activate zlib.compression, the thing keeps loading…no picture is showed.
tnx in advance, tnx for the great script, our users love it!
Gordon Jan 29th, 2006
New to this gorgeous little script but had to drop by to congratulate you on a great job. I have a feeling I may use this for more than one project!! Awesome!
Brodie Jan 29th, 2006
Lightbox JS is great. I have been playing around with it for a few days now. Like others i see, I am not the only one having problems with the iframes(getting the image to open on the main window and not within the frame).
Does anyone now how to do this? Did somoeone solve this issues and I missed it in the comemnts posted already?
None the less, still a great tool to have.
-regards
netasceta Jan 29th, 2006
About the flash issue (isn’t a problem with lightbox, is an old welknown flash/browsers bug) here you can find a solution that works like a charm.
http://www.sitepoint.com/forums/printthread.php?t=158317
Basically is adding “transparent” property to your flash and set the z-property as you like.
WONDERFUL WORK DUDE !!
You made the designer I’m working with the most happy man in this world… and you helped me to change the image I had of been a programmer without any taste for esthetics.
Thanks again,
Marc.
Eli Jan 30th, 2006
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.
ND Jan 31st, 2006
Eli #182
Yeah, that happens to me as well. The problem was only fixed in FF, but not IE. This seems to happen with the larger images. I am hoping there is a fix for that as well
EmmSii Feb 2nd, 2006
Can you separate the JS and CSS entirely?
Modifying it is quite a hell, no offence.
Opera (8.5) isn’t fully supported, even in your example page the transparent “shadow” doesn’t fully cover the page area (@bottom).
Under caption and kbd divs (you should use instead) is lots of empty space. What’s the deal?
Could you develop also sucha lite-version, which pops up only the image and assign it an id (#lightImg for example)? The html should contain only the closing anchor surrounding the bigger image (no shadows, captions, texts, close buttons, etc). Code:
Othewise… great idea!
Thanks!
EmmSii Feb 2nd, 2006
hmm, censor deleted HTML elements…
- you should use *paragraph* instead
Andy Feb 3rd, 2006
Great little add on script.
Took all of 2mins to try it out and apart from putting the images/js in different directories and havinvg to change a few references. very easy to use. And the results are very pleasing. Going to try the lightbox gone wild version later to add navigation wile looking at the large pictures.
http://galleries.captured4ever.co.uk/Galleries.aspx – drill into demo users albums to get to images.
Johan Feb 7th, 2006
Firefox adds height on the div where caption/keyb/etc is compared to Safari/opera/exploder.. just so you know :)
MightyDuck Feb 8th, 2006
Lokesh, could you take a look at the Opera bug, that some of us mentioned?
weaver Feb 9th, 2006
First off, excellent script. I am ‘looking’ for places to use this.
How hard would it be to add the same click event to the picture border that causes the detail to disappear?
If I click on the image or the background, the detail pic disappears (as expected). In contrast, if I click on the border of the image, nothing happens. Although small, it is likely that the user may click the picture border and be slightly confused.
Thanks, this is the only point that I could see that could use improvement.
ND Feb 10th, 2006
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?
Jeff Feb 10th, 2006
I have a small modification for lightbox.js so you don’t have to mess with the IE opacity problem and seems to work cross browser. I found it at http://www.mandarindesign.com/opacityblending.html.
Instead of the settings for #overlay, substitute:
#overlay {
background:#000000;
width:100%;
filter:alpha(opacity=90); /* for IE */
-moz-opacity:.90; /* for FF and Moz */
opacity:.90; /*CSS2 that works in Safarit */
}
I haven’t tested Opera, but there is probably a workaround for that too.
NickyD Feb 10th, 2006
Jeff #191
Thank you for your post. I tried what you posted, but it did not seem to work for me. Could you explain exactly what you did. I put the script in the css instead of the original, but the problem still existed. I was wondering if I did something wrong. Thanks in advance.
Lokesh Feb 12th, 2006
#184 EmmSii – I’ve noted the small space uncovered by the overlay in Opera, thanks for letting me know.
#188 MightyDuck and others – Relating to the PC Opera 7.54 issue, the problem has to do with the proper event not firing when an image is done loading. I’m sure there are ways around this, but I will let it go as it has been fixed in Opera 8.0+. Just looking forward at the moment. : )
#191 Jeff – The transparency code you posted is a beat more compact but it doesn’t seem to work in Opera 8.0.
Nathan Pitman Feb 13th, 2006
One quick question, has anyone had any success with adding a image hover state such as an overlaid PNG with copyright symbol. You usually see these on photographers websites to do what can be done to prevent casual image theft.
Pete Feb 16th, 2006
Overlaying a copyright watermark with a hover state wouldn’t prevent image theft.
You’d be better off looking at server side solutions to actually embed the watermark dynamically into the image.
Easier still, just add the watermark in an image editor before you upload it.
If the watermark is overlaid in, for example, a div then the image itself isn’t altered. A right click, image save or quick look at the source code will still save the unwatermarked image.
tg Feb 17th, 2006
Nathan, for an overlaid copyright symbol:
Point var closeButton = in the lightbox.js file to your copyright image.
Edit #closeButton in the lightbox.css to bring it over the image, larger positive values brings it further inside the image area.
Make sure #lightbox img has no background-color, or is set to transparent, if using a transparent gif or png.
Kjell Feb 17th, 2006
Hi!
I love your work with this script! And I would love to use it.. I have tried to make a small picture webpage but I can’t seem to make the lightbox script work. If you could be so kind to check my site at: http://privat.bluezone.no/kjell.braten/galleri.html and see what I do wrong!?
Klaus Feb 17th, 2006
@#197:
hi kjell,
im quite sure your link to the javascript is wrong.
your source:
just try:
or with an absolute path:
Klaus Feb 17th, 2006
aarrgh … why cant i just copy and paste?
sorry kjell,
what i want to say is: delete the “../” in the path to the javascript, or make it an absolute path. im sure it will work then.
regards, klaus
Kjell Feb 17th, 2006
Re: 198,199
Thanks Klaus!
I have tried all versions of paths, and still no result! :-(
I am getting frustrated!
Kjell Feb 17th, 2006
All the other javascript at my website messed with the Lightboxscript. Finding an other way to show rollover-effect.
Case closed :-)
Alex Feb 19th, 2006
Can anyone tell me how to add links to the caption or in the caption area?
Colin Feb 20th, 2006
I can’t seem to get the caption to show up with the border. It only shows as the text over the overlay png, which doesn’t look very good because both are dark colored.
any help would be greatly appreciated
website
email
phynias Feb 21st, 2006
does anyone know if there is a way to have it autopop an image from a link.
so like if i have a page of images and i want to send someone a link to the page but have it auto pop up the image in the lightbox.
ie
http://www.domain.com/index.php?IMG_01.jpg
or something to that affect.
so it takes them to the page of images and auto shows them that image large.
Nathan Pitman Feb 22nd, 2006
***Mouse Hover Copyright Overlay ***
Ok, this is a client side solution using CSS, so as Pete pointed out, it won’t prevent anyone who has a reasonable knowledge of the web and who is desperate to steal an image, instead it’s just a casual ‘reminder’ that an image is copyrighted. Thought I’d link it in in case anyone else has a similar requirement. :)
URL: http://nathanpitman.com/journal/447/
Lokesh Feb 23rd, 2006
#203 Colin – remove the misc. html code that ended up in the top of your css file
Also, big thanks to all those who addressed and troubleshooted other comment author’s issues.
Klaus Feb 24th, 2006
lokesh, i just want to thank you soo much for this amazing piece of code!
i use it on my new photo-site and it works great.
see it in action: http://lellesch.com/
regards, klaus
Maszo Feb 24th, 2006
Lokesh, this is a great script; I use it on a new website. Just one suggestion. If CSS is turned of (because someone is surfing with an old browser or with a screen-reader) and JavaScript is turned on, then the loading-image and the “lick-to-close”-text will apear just at the top of the page. Maybe it would be possible to load the loading image via CSS-background?
Regard
Mazso
Daniel Feb 26th, 2006
I’ve been working on implementing this awesome script on my portfolio that happens to be horizontally scrolling. Ive been successful so far but have this one issue with Firefox 1.0 with the white lightbox not shifting to the right. I defined arrayPageScroll[0] and compensating for this in objLightbox.style.left works for Firefox 1.5, IE, and Opera 8. Any ideas?
http://www.burnoptics.com/portfolio/
http://www.burnoptics.com/portfolio/scripts/lightbox.js
MN Feb 27th, 2006
Your script is great. Can’t wait for the gallery script and print this image features.
I notice sometimes though when you close an image and you return to the page the photos are on, the text on the page is sometimes all jumbled up. What causes this and is there a work around for it. Thanks again.
Scott Feb 27th, 2006
When viewing in Preview in Frontp[age, it works fine. When uploaded, the image loader and the overlay show when the photo is clicked on, but not the image….. please help!!!!
You can view it at: http://www.roverscricketclub.com.au/lightboxfiles/stats.htm
David Feb 28th, 2006
Thank you for a great script. I use rails and I added a helper that reads picasa xml albums and uses your lightbox js to display them.
You can get it at http://www.hackerdude.com/2006/02/27/parse-picasa-xml-with-rails/
Thanks again!
Cole Henley Feb 28th, 2006
Hi Lokesh
First of all thanks so much for a brilliant utility – c’est magnifique!
I have been experiencing some problems with positioning of images using lightbox js on a dynamic gallery I have created for a friend. In IE 6 photos sometimes randomly position themselves on the page once opened/clicked on. Is this something anyone else has come across/experienced?
The url for the site is http://www.ryanmcgoverne.co.uk/
Thanks again for a fantastic piece of code,
Cole
Ian Mar 2nd, 2006
I am having a problem using the lightbox. I have placed all the images and code for the .css and .js correctly but it seems as though it is not reading the .js file. When you click on the photo it just opens a new window as if you just had a direct link to the picture only. what is the problem or what do i need to switch. i cant figure it out.
please help
Thanks
Ian
tg Mar 2nd, 2006
Check out the post at #91 on Slidebox. I’m using it at
http://bellsouthpwp.net/s/o/solidgolddancers/
Works great. Thanks Lokesh and Olivier, it’s a great combination. I did paste the Slidebox mod (to the original Lightbox) and the Lightbox update together to get the best of both worlds.
supahfunk Mar 6th, 2006
Hi all, the js is fantastic, but i wouldn’t open an image in my lightbox.
J’d like to open an swf file, how can do that? Is it possible? Anyone has an example of it?
Thank you all.
Jeff G Mar 6th, 2006
I have one small problem. Everything is working well. I’m using an imagemap and I’ve made the changes to the lightbox.js file to facilitate this with no problem as outlined above. Works just fine.
The only problem I’m having is, using the title tag for the caption, I don’t like the caption appearing when I rollover the small image. Is there a way to just have the caption appear just with the larger “popup” images?
I noticed that enzbang in comment #91 created a javascript to call an external xml file. I altered his js file to allow me to use an imagemap and then created an xml file but it’s not working (I just get the larger image on a new page, not as an overlay).
Sean K Mar 7th, 2006
I’ve been playing around with this great script, and I really like it, however, I’m not sure it will work with my website because my images are in an iframe and I need the lightbox to open in the parent window.
I see from the comments above that others are having the same issue, has anyone found a way to workaround the issue?
Sean
offmeetree Mar 8th, 2006
top job, what a beautiful way to display full size images. Thank You.
Sean K. Mar 9th, 2006
For anyone having problems using this script from inside a Iframe, I have found a solution. It may not be the best solution, I’m a relative novice at this stuff, but it seems to work ok.
Insert the script calls into the header of the PARENT html file.
In the Iframe HTML, change the href of your link to javascript:Void(0) and add an onclick call to a function function(this). Also create a form with a hidden form field with a value = to what the href of your link originally was.
In the parent file create 2 functions that does the following.
Function cloneObject(what) {
for (i in what) {
this(i) = What(i);
}
}
rename the function below to the same as the onclink function in your link…
Function function(obj) {
var newobj = new cloneObject(obj);
var iframe = document.getElementById(“iframename”); this has to be the name of your iframe.
var iframedoc = iframe.document;
var iframeForm = iframedoc.getElementById(“formname); this has to be the name of your form.
var hrefvalue = iframeForm.hiddenfieldname.value; this has to be the name of your hidden field.
newObj.href = hrefValue
showLightbox(newobj);
}
I had to remove a section of the lightbox.js file that didn’t like dealing with a copy of the link rather than the link itself.
The problem code was this:
if(objLink.getAttribute(‘title’)){
objCaption.style.display = ‘block’;
//objCaption.style.width = imgPreload.width + ‘px’;
objCaption.innerHTML = objLink.getAttribute(‘title’);
} else {
objCaption.style.display = ‘none’;
}
Removing it didn’t seem to have a negative effect on the script.
There is probably a more elegant way to approach this, but my skills are not quite up to the task.
Sean
Lokesh Mar 11th, 2006
#220 Sean K.- Thanks for addressing the frames issue.
Also, I’ve added some basic troubleshooting tips on the main Lightbox page that might help a couple of you:
unknown Mar 13th, 2006
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?
Jesse Mar 16th, 2006
Would love a copy of the iframe supported JS as well as modded iframe doc. I have read Seans post but have been unable to get it to work due to some details that were left out of his description.
Thanks
ryan Mar 17th, 2006
Yeah, i’ve read over the post like 10 times and i’ve been unable to successfully run it.
zircom Mar 17th, 2006
Hey nice script well done, only problem I have is the loading pic not show, only if you link to a pic that dont exist will only the loading pic display?
Any ideas
Tammie Mar 17th, 2006
I don’t know java script and only work with WYSIWYG
Tammie Mar 17th, 2006
Sorry about that I have been up all night and am punchy. As I was saying I use Dreamwever and only go into the code when necessary. I have not been able to get this lightbox to work. I am a novice at the coding part. Can anyone help me? On a new page, I got the image to pop up in the middle but not gray out the bkg. When I moved the code to an existing page that uses templates, It only opened the image in a new window – the close button was gone and so was the caption.
Can anyone help?
Iframes vs Lightbox Mar 17th, 2006
The winner Lightbox. My frustrations with using both led me to ditch iframes in the end for a php/css include function that does the same thing as iframes.
http://tutorials.alsacreations.com/frames/
Congrats Lightbox!
kurt Mar 19th, 2006
great script! love it…
but I have a little problem with firefox:
when you click on the first picture of the gallery, everything’s fine. when you click on the second picture, the first picture is being loaded for about half a second (you can see it) before the correct picture comes up.
where’s the problem?
see for yourself: http://thomashavlik.net/fotos
thanks for your help!
kurt Mar 19th, 2006
oops…
wrong address:
here’s the correct one:
http://thomashavlik.net/fotos.htm
Ginevre Mar 19th, 2006
This script is great- it works really well with my new site integrating with a database and ColdFusion. With CF generating all the images, captions and URLS and lightbox making it all look good (and user friendly) it’s made light work out of an otherwise massive task.
The only thing I couldn’t get to work is to open the URL in in the title caption in a new window in Firefox, but it does in IE. I guess that’s a browser thing. Maybe I can fiddle with the code to generate the URL in the same manner as ‘press x to close’ rather than putting it in the title? Has anyone done that?
Thomas Mar 20th, 2006
I’m having trouble getting lightbox to work in IE when displaying pictures with foreign caracthers. Since the project I’m working on is a danish projekt there really is no way around the use of the problematic caracthers.
Have a look at the development site and click on “klik her for at zoome” to see the bug. The picture simply doesn’t load. The problem is with IE only.
Any pointers? thanks
Evan Mar 20th, 2006
I love this script – it’s working like a charm for images. However, I am having trouble getting it to work with a flash movie…I read the postings above on how to fix (changing the transparency and the z-index)…but I’m wondering if someone could spell it out for those of us too thick to figure it out…
Does someone have some sample working code for embedding a flash object? Thanks in advance.
dodo Mar 20th, 2006
i can’t figure out why it doesn’t work for my gallery:
http://pure-essence.net/gallery/?file=The_Lovely_Pets/Muddy_Puppies/misty_wont_walk.jpg
it works on every other page on that site but on this one it actually loads the image in the browser window :(
dodo Mar 20th, 2006
never mind, figured it out.
imago Mar 22nd, 2006
This is nice and works well for me and my application in FF; but, I am experiencing strange behavior in IE. Everything appears to work as it should; but, instead of stopping when the lighboxed image is displayed, very quickly therafter a new page is displayed with just the image. I’d be happy to try and explain myself better if necessary.
The link that is clicked to display the lighboxed image is in a Google Map infowindow (using Google Map API V1).
I have tried moving the script around to various places without success.
paul Mar 23rd, 2006
i love it, it’s great. But I am having a problem with it working when using AJAX to dynamically load the gallery sections which use Lightbox.
You can see what I am doing at:
http://www.pauldonnelly.com/portfolio/index.html
and go to the portfolio section and click on a thumbnail
(don’t mind the other issues with the page, it’s a work in progress)
Any help with this would be awesome, because I’m stuck.
kyle Mar 25th, 2006
I am new at this and trying to get it to work. Everything looks great but i can not get the background to open (overlay it think) like the example on
http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm
anyone help?
Papuass Mar 26th, 2006
There is a plugin for another popular bloging platform – textpattern, too:
http://forum.textpattern.com/viewtopic.php?id=14748
David Mar 31st, 2006
Could anyone please share the js for the iframe problem?
Thanks!
Sean K Apr 3rd, 2006
Seems like some people had some problems impementing my modication for lightbox in an iFrame. I just spent a good portion of today figuring out how to get the same functionality in Lightbox 2.0. So, I’m going to put the updated information there. I’ve also fixed the issue with my fix not working in Firefox, which may have been the issue some people were having.
Sean
peter Apr 3rd, 2006
tried all the tips about getting the background to fill the whole window when using large horizontal images and the scrollbar appears but without any luck. tried both ie and ff on a pc. any new ideas how to solve the problem?
besides that its a really great script. just what i been looking for. gone are the days with ugly popups…
Jimmy Apr 4th, 2006
Hi,
great script and easy to use. I have one problem though.
I am using frames at my webpage. The problem is that lightbox opens up in a frame that is quite small, and because of this it does not show the whole picture.
What I want to do (if it is possible) is open up the lightbox window as a overlay of the whole page, meaning that even though my frame is 600px lightbox will use the whole screen.
Is this possible? Or any other ideas?
Nandakishor Chavan Jan 21st, 2010
Hi Jimmy,
I have same problem. have u salved this problem, please tell me a solution if you solved this one.
I am using 2 frames in my web page. In 1 frame, i am opening a lightbox for image but it will take first frame portion for overlay. It should take a whole screen for overlay.
please help me dear.
thanks
Phil Apr 7th, 2006
Hi there.
This script is excellent and I love it much so.
Are there any other ways of calling it other than rel=”lightbox” ?
The reason being I wish to call the script from a flash file, I can’t use rel=”" in flash.
Is there anyway I can call the javascript command like this:
javascript:lightbox(“http://www.google.co.uk/image.jpg”, variable);
?
Talguy Apr 7th, 2006
Can some body please help with getting my close image and loading image to display. The images are at the same level as the js file is and they still won’t display when i can the pathto where they are in the js file. if you need to see my webpage it is here
Http://www.freewebs.net/gobock/gallery.html
jasperguy Apr 9th, 2006
Great script here. Thanks.
Just need to know how to put the next and previous feature in.
Anyone?
Robert Kennedy Apr 11th, 2006
I am trying to include an imagemap as well as standard links on the same page. I have tried using Jason Buechler’s method but I can only get one or the other to work.
Is this possible?
shortly Apr 11th, 2006
Talguy (#245)
I have the same problem. the close image and loading image are not displaying. area is still clickable for close image. prev and next images loading fine. i’ve waded through the code as best i can but can’t find anything askew…
also clicking outside the lightbox doesn’t return to the page.
anyone else got any thought on this?
webpage here if anyone wants to check.
http://davidandjacob.com/art/media/pics/
btw, i love this script. thanks for all the hard work.
Oleg Apr 11th, 2006
Thank you for the great script.
I worked this night on the problem of showing images from a thumbnail iframe. In the nutshell, the script needs reference parent elements and properties instead of iframe’s. Here is a sample I put together:
http://tlpro.com/misc/lb_test/index.htm
The altered script (with some customizations not important to the functionality) is here:
http://tlpro.com/misc/lb_test/lb/lightbox.js
Also, lightbox.css needs to be referenced in parent document instead of iframe, whereas JavaScript file is referenced in iframe page.
This solution is not universal. It only goes one level up to the parent page; if you have nested iframes, this won’t work, but it should suffice for majority of cases. You can improve it with “nested level” variable (or something similar) that helps you navigate DOM hierarchy all the way up to the correct parent. It’s an overkill for my application, so I decided not to bother. :)
For some reason, overlay.png doesn’t load in Firefox. It works in my application, but it doesn’t in this sample. Oh well, if you find how to cure this issue, I’ll gladly do it.
Oleg Apr 11th, 2006
#248 shortly , both loading and close images on your site work for me. Try loading your page with Ctrl-F5 or Ctrl-R to make sure you grab the latest versions of Javascript and CSS files and not use old ones from browser cache.
Oleg Apr 11th, 2006
#245 Talguy, you probably just need to play with slashes and dots in your Lightbox Javascript file to find the right path to loading.gif and closelabel.gif.
John Apr 11th, 2006
Is there a way to prevent the links from doing anything until the page is loaded? This way, if the page isn’t fully loaded yet, clicking the links doesn’t just display the image, which is really bad behavior.
Oleg Apr 12th, 2006
#252 John, you can put a transparent layer on top of the entire page. Make its z-index equal to 0. This way people will be clicking on this layer, but they won’t be able to click on any objects behind it. After page loads, delete or hide this layer in body onload event.
shortly Apr 12th, 2006
thanks for checking Oleg.
all is fine – i posted here and in the JS 2 area as well.
http://www.lokeshdhakar.com/2006/03/29/lightbox-v20/#comment-2360
tg Apr 13th, 2006
>#252 John
>April 11, 2006 @ 1:55 pm
>Is there a way to prevent the links from doing anything until the page is >loaded? This way, if the page isn’t fully loaded yet, clicking the links >doesn’t just display the image, which is really bad behavior.
Check out slidebox at http://olivier.ramonat.free.fr/slidebox/
Enclose the links in a /div with class=slidebox. It hides the div with js, then makes it visible after lightbox inits.
On my site I just hide my /div in the css, then make it visible calling a simpler function after the lightbox init. So my links stay hidden for users wjth javascript turned off. The function used by slidebox won’t hide the links for non-js browsers, since it takes js to hide them. Choose your preference.
http://bellsouthpwp.net/s/o/solidgolddancers/
Ahven Apr 14th, 2006
heya
Glen Apr 15th, 2006
Thank you Lokesh! Very cool.
Two issues I’m running into:
Is anyone else running into the issue where html select “drop downs” appear on top of the lighbox image under IE 6.0.29?? Also, under FF 1.5.0.1 the overlay is not showing up.
All works fine under IE 7.0.5926 Beta 2…which I must say I can’t believe given M$FTs track record. Very refreshing :)
Glen Apr 15th, 2006
Okay, I read all of the comments from the top and almost have it working fine under FF 1.5, IE 6.0.29 and IE 7 Beta 2. By using what Anthony (#23 above) and Jeff (#191) suggested I now have the overlay working in FF and on top of the “drop downs” in IE 6.0.29.
The only issue yet to be resolved is that the overlay under IE 6.0.29 and IE 7 Beta 2 does not strech horizontally all of the way across the screen. It stops about 90% across. I’m sure it’s a css conflict on my part so I’ll keep choaking down M&M’s and Mountain Dew until I figure it out.
Thanks all for the posts they helped a bunch!
anouke Apr 18th, 2006
Hi there! I’m using this fantastic script but… it doesn’t work correctly for some of my galleries and I don’t know why (uh…). I tried everything, re-uploaded the archives, deleting them and uploading again, revised the html and css codes but nothing works as it should. It seems that the “big” images are not in the server but they are! Too many thumbnails? Maybe. But feel free to check the codes and the galleries so you can find what’s going on because I am out of ideas…
• http://anouke.spymac.com/diari/fotografies/familia/index.html -> works perfectly
• http://anouke.spymac.com/diari/fotografies/muntanya/index.html -> some of them work
• http://anouke.spymac.com/diari/fotografies/art/index.html -> none of them work
• http://anouke.spymac.com/diari/fotografies/cels/index.html
• http://anouke.spymac.com/diari/fotografies/macros/index.html
Really thank you all and sorry if it was posted before… u.u
Dave Apr 23rd, 2006
Hello,
At first i want to thank you for your great scrip! It’s very nice!!!
I’m not from england so excuse me if my english is bad.
I used your script and i want to give you a link It’s an art page for my mother in law, its still under constuction. I think your script is great for using it here.
http://members.home.nl/dgmelchers/index_schilderijen.htm
you see i work with frames! At your right you see a picture of kill bill (it’s only a example).
If you click now on that kill bill image your script is loaded in that frame. “If it’s possible??? i want to load it to the whole index (an overlap of the whole screen) and not only in that frame.
Is that possible?
Hope to hear from anybody soon and many thanx!!
Regards,
Dave Brummer
Holland
Danne Apr 24th, 2006
Damn.. i want to load a .swf file instead of picture.. tried set object type to match flash.. nothing works :((
Beny Apr 24th, 2006
Is there a way to have both functionality with image map and regular link?
I tried jason’s solution in post #140 but it can only work one way or the other.
Thanks
marko mandaric Apr 25th, 2006
anyone figure out a way to integrate LB with some iFrames… the above solutions are only have done up there (the first doesn’t quote the right sections of the main JS file to be edited and the second is missing the end to where the main JS file should stop being edited)
if anyones got a completed workaround… please let me know…
Andrew Martin Apr 25th, 2006
Fantastic script. Well done. I used the intial Lightbox script on my site and was actually started on grouping the images to create a gallary navigation, but this is much better.
I have placed a transparent layer over the thumnails while the page is loading to restrict users from clicking the images. When page is loaded the layer is removed. Not sure if it is the best solution to the issue but allows visitors to see the tumbnails directly!
Kenneth Engermann Apr 25th, 2006
Hi,
I think this is great. But i have one issue on the iframe thing.
I have set it up on a long iframe page. When i click the picture i does not
calculate the rigt place to position the picture.
Is there a easy way to get it to place it on the right place on the screen.
So it’s not nessesary to scroll up the page to see the picture.
Even if the pictures are placed sequentionel down a long iframe??
Everything else works perfect.
Beny Walujo Apr 27th, 2006
I found a script so you can have lightbox implementation on both imagemap and regular link.
basically it’s a tweak version of getElementsByTagName
This solution is in addition to Jason’s solution for imagemap issue.
You can find the script @ http://www.quirksmode.org/dom/getElementsByTagNames.html
I hope you find it useful.
Thanks for the great script, lokesh!
gwerkheiser Apr 29th, 2006
Sexy dude, sexy. Everything’s working great for me. I’ve added the image map to is. that was pretty easy, I figured that one out myself. I’m trying to do two things now.
1) I’d like it so I can make the close buttom come to the right side instead of dropping down from the bottom. Is this possible?
2) how can I possition the images with respect to it’s image size. In my case the image is opening in an iframe, so if it tries to be placed in the middle, half of the image will be hidden by everything else. Instead I want something like this:
(Width_of_iframe – Width_of_image )/2
And that should place the image in the center of my iframe. Anyone have any ideas? Thanks a lot!
-gw
gwerkheiser Apr 29th, 2006
oh, One more thing. what do I need to change so the user can click anywhere and it closes the picture? Thanks
-gw
Jason Apr 29th, 2006
Hi,
I got the script working for lightbox. I can’t seem to figure out how to make the text “caption” black. It always keeps showing up as white and therefore blends with the white border. Any help????? I have tried adding font color=black or whatever. Help please!!
amy Apr 29th, 2006
this is a really kewl script.
I have a quick question. I know you can put a link in the title, however, is there a way to have it open up in a new window?
I tried using target=”blank” but that didn’t work or maybe I put it in the wrong place.
can someone help me?
thanks,
amy Apr 29th, 2006
nevermind, i got it!
Janey Apr 30th, 2006
Hello.
Where do I adjust the opacity levels of the black area?
When I change the values in “overlay” in the “lightbox.css” file, I don’t see any difference.
Please can someone help me out?
Leslie Freeman May 2nd, 2006
Great work on this script! I was using the original Lightbox and I am very excited about this new version. I have it up and running and the effects are working great. The only issue that I have is that the lightBox element is displaying across the entire width of the screen, not just to the propper padding amount around the image. It does only extend the proper amount above and below, forming a horizonal stripe the height of image. Has anyone else run into this? I have it happening in both Safari and FF(mac). I have not been able to try it on any Windows browsers or IE yet, however, the example Lightbox 2.0 stuff does display properly in the same browsers.
Thanks!
Leslie
Branndon May 3rd, 2006
I would like to open a html page instead of an image. When I change the target to relfect that it doesn’t work. I downloaded a version of lightbox 1 where it was possible. Can someone tell me what I need to do to get lightbox able to open html pages rather than only images?
kr580 May 3rd, 2006
Quick question similar to some others. I have a site where the gallery I’m using is in an Iframe. When I use the Lightbox v1 the large image shows up in the Iframe but not the whole parent page. The large images are much bigger than the Iframe’s dimensions so it looks horrible. I try to do target=”_parent” but it doesn’t work. Can anyone help puhleez?
Thanks – Kevin
kr580 May 3rd, 2006
Nevermind. I saw #228 and tried that. Actually is alot more convenient anyhow. :)
Khan May 4th, 2006
For those that can’t afford to ditch their iframes this appears to be a completely workable solution.
## START CODE
if(self != top) {
top.myLightbox.start(imageLink);
return;
}
## END CODE
Add that at the top of the start() function in the Lightbox class. I’ve tried it in Firefox, Opera and the unmentionable Microsoft browser and it seems to work fine. I’ll be implementing it in a few days, so ‘ll know soon whether it really is working for all our members.
Alagumuthu May 4th, 2006
I am using Lightbox in pop up window.Its showing fine.
When i closing the Pop up ,parent window is not working.can any one help?
tee May 4th, 2006
First of all, great script and donation on the way once client approves it :)
I am trying to implement the script to a site, it works well in other browser except IE 6 where the ‘prev and ‘next’ buttons are not showing up.
http://new.spotlightonthesquare.com/cuisine.html
I looked at the lightbox css file and the only selector I can associate the probelm with is the
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(common_images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
thought it’s a z-index issue so I added the following elements:
position: relative;
z-index: 900;
still not working, however I did another test page by removing my main style sheet and the ‘prev’/'next’ buttons showing up just fine.
http://temp.spotlightonthesquare.com/cuisine.html
I have a hunch it’s z-index issue but cannot pinpoint it.
Any thought?
Thank you!
tee
Shawn May 5th, 2006
Just whant to say HI! I love this place!
buy phentermine | carisoprodol | phentermine online |
Dirk May 5th, 2006
This is a wonderful wealth of information. Good Luck!
[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]
Kevin Shen May 5th, 2006
Your site is very cognitive. I think you will have good future.:)
ambien http://vvarder.cba.pl/ambien.html hydrocodone http://partizzanka.cba.pl/hydrocodone.html lorazepam http://partizzanka.cba.pl/lorazepam.html
Halz May 5th, 2006
Not much on my mind right now, but it’s not important. I’ve just been letting everything happen without me. I just don’t have anything to say right now.
Carol Clark May 5th, 2006
Just found your home page its great, it looks like you folks do great service keep up the good work.
buy phentermine | carisoprodol | phentermine online |
Anny May 5th, 2006
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]
Monika May 5th, 2006
Hello admin, nice site you have!
ambien http://vvarder.cba.pl/ambien.html hydrocodone http://partizzanka.cba.pl/hydrocodone.html lorazepam http://partizzanka.cba.pl/lorazepam.html
Louise May 5th, 2006
This is a wonderful wealth of information. Good Luck!
Kay May 5th, 2006
Just wanted to say a big ‘thank you’ to Lokesh for so nice ang elegant LightBox!
Kay May 5th, 2006
#249 Oleg
Oleg, you solved a problem with LightBox and iframe, which other people could not solve.
Thank you very much.
ZAP May 5th, 2006
So is there any way to call this script automatically (without clicking on an image)? I would really like the first image in a gallery to pop up as soon as you load the page. There’s gotta be a way…
ZAP May 6th, 2006
OK I got this to start automatically when the page loads. Basically I added a simple get object function to the end of the script and then added the start function to the onload code. So the end of my lightbox.js now looks like this:
function getObject(objectId){
if(document.getElementById && document.getElementById(objectId)){
return document.getElementById(objectId);
}
else if (document.all && document.all(objectId)){
return document.all(objectId);
}
else if (document.layers && document.layers[objectId]){
return document.layers[objectId];
}
else {
return false;
}
}
function initLightbox() { myLightbox = new Lightbox();var startImg=getObject(‘img0′);myLightbox.start(startImg);return false; }
Event.observe(window, ‘load’, initLightbox, false);
I also had to add “id=img0″ to my first link (a) tag, which I’m doing using PHP.
This is a work in progress, but so far it seems to work in both IE6 and Firefox for Windows…
a22 May 7th, 2006
http://nona.fcpages.com/eingesaute-Amateurin.html
ine May 8th, 2006
the script rocks.
but I seem not to get it work…
Locally everything works perfectly fine
but when i upload it to the server, i just get the normal way: the image opens without effects.
i tried dreamhost and mediatemple. both the same problem….
i am stuck.
tx.
bezdar1 May 8th, 2006
I just don’t have anything to say right now.
utilizera May 8th, 2006
May we exchange links with your site?
kr580 May 9th, 2006
@ ine
Make sure all the images have loaded first. I’ve found that if you click a link/thumbnail while images are still loading it’ll just open the image in a new window.
It may be a completely different problem but might as well try. Took me a bit to realize everything had to load first.
And, if anyone knows of a preloading script that actually works with this I would love you if you linked me to it. Every one I’ve tried thus far doesn’t want to work.
alonzo May 10th, 2006
WOW!
what a fantastic script!
I made it work almost perfect now for my personal portfolio, I only have 1 problem. (and yes I searched for an answer in these comments)
IE works fine, only Firefox opens the pictures in a new page.. I tried the onLoad=”initLightbox()” quickfix, but unfortunately it doesn’t fix my problem..
Is there another fix instead of the “quick” one?
Michiel May 10th, 2006
Did Oleg fixed the iframe problem?
Can he Show iframes in the lightbox v2.02?
Connie May 12th, 2006
I saw this function on someone’s site and I knew I had to utilize it! Amazing work !!!!
Unfortunately i only understand the very basics to css coding, and i am one of the dumbfounded ones who can’t get “it” to work on her page… can someone help? I looked around at others who’ve posted and I cannot find the mistake! please, someone, help?! =]
the site is: http://www.uweb.ucsb.edu/~peachy_cheeks/demo2/mmmdesign.html
thank yooooooou!
connie
Richard May 12th, 2006
I just upgraded to the 2.02 version and everything works great. In fact, it works a lot better than the first version. The only problem I have is that the loading.gif file stays on top of my images. The images will load and the whitebox resizes and the loading.gif appears, but it stays on top of the loaded image.
Any ideas?
Thomas May 12th, 2006
I’m using LightBox and Tiny MCE editor (http://tinymce.moxiecode.com/) in the same page. Using IE all works fine, using Firefox LightBox doesn’t work.
I need help.
Thanks,
Thomas
Richard May 12th, 2006
I found the fix for my problem mention in #300. The solution was in the recent thread on this site. Basically, I already had a “loading” ID tag in my page and it was conflicting the “loading” ID for the lightbox. I just changed the ID tag in the lightbox.js and css files to “loadinglb” and everything works great.
Thanks!
Ben May 13th, 2006
I have updated to the new version, and it works great in FF. Although it doesnt work in IE at all. Two things happen, if im opening a single pic it shows it loading, but then opens in a new page. And if i click on a group image it just opens in a new window. What do i need to do to fix this and get it to work both in IE and FF?
mrpsycho98 May 14th, 2006
Awesome script even when working with dynamic image…
Thanx for your time to build this exellence script.
donation? hmm…still waiting for payment n this is my promise….i will…
;)
Chris May 15th, 2006
Very impressive script… but I NEED HELP!!!
I previously saw where someone had posted a modified script on this msg board with tabbed/gallery functionality. I designed a static example of what his modified script resembled at: http://www.mysticonline.com/dev/lightbox_mod.jpg
I’ve gone through most of the msgs and can’t locate the original post with the mod script web address. Can someone tell me where to find it?
Basically, I’m trying to get the script to cycle through multiple images of independent galleries when only displaying one text link or thumbnail for each gallery.
I’d like to list multiple party dates (galleries) plus one thumbnail each as links, each of which will contain 40-80 photos in each gallery (sets), and when the user clicks on any date, it will launch the lightbox which in turn displays the specific gallery and all related photos in the set. The tabs at the top of the lightbox allow the user to switch between galleries without having to close the lightbox.
Example:
• Party #1 Jan 10th (one clickable thumbnail here)
…[this would link to gallery #1 containing 40 related photos in the set]
• Party #2 Feb 14th (one clickable thumbnail here)
…[this would link to gallery #2 containing 60 related photos in the set]
• Party #3 Mar 5th (one clickable thumbnail here)
…[this would link to gallery #3 containing 80 related photos in the set]
Etc….
Someone please help!
mrmystic@bellsouth.net
st May 15th, 2006
Can I charge a flash movie like an image in Lightbox?
I need to charge a flashvideo in something like lightbox. I know thats isn´t a real dude about lightbox but I´m desperated for something similar…you can help me please…
Andy May 18th, 2006
#273 Leslie,
I ran into the same problem when updating from the previous version of Lightbox. It ended up being that I was still loading the old lightbox css file along with the new one. I removed the old CSS and it worked fine. Hope it fixes your problem too!
Steven O May 19th, 2006
An unusual request. I actually have things working fine in IE but not FF. I am not getting the poloroid photo look in FF but it works in IE. What I get in FF is the picture popping up with the overlay but no whitespace between the picture and the overlay. This makes the text harder to read. Also the close gif is out of position in FF. This may be part of the same problem.
Any ideas where the poloriod look is going wrong in FF?
(The site is offline or I would include a link.)
Thanks
Thomas May 24th, 2006
@ #266 – Beny,
I can not get the code listed on the site http://www.quirksmode.org/dom/getElementsByTagNames.html to work for me. What did you have to change in the original .js besides adding the code? Any help would be appreciated.
c_dric May 24th, 2006
(RE #266 Beny Walujo)
i’m trying to use regular and imagemap links on the same page but i have no idea what i should do with your script (http://www.quirksmode.org/dom/getElementsByTagNames.html) and it seems it’s not supposed to work fully in all browsers.
is there really no other way ?
Eric P May 26th, 2006
I’ve just incorporated LightBox 2.01 into a DotNetNuke module that also has an embedded Windows Media Player. The problem is that the wmv is overlaying portions of the LightBox images.
I thought that I could overcome the issue through CSS and z-index values, but when I opened the LightBox js (yikes! – great work) to add the z-index, I realized that I may want to see if anyone else has tackled this issue first :-)
Any ideas?
Thanks,
Eric
Nick B. May 31st, 2006
I love the look of this, but I can’t get it to work at all. Please help! Did I do something wrong in there somewhere?
http://www.slumberpartydetroit.com – navigate to the -about- page and click on the past members. then click a pic. nothing happens.
How can I get this to work? I tried all of the fixes for imagemaps and what not, but still it won’t work.
Nick B. May 31st, 2006
OK. I figured out today that it does work, only it’s not working in all browsers (at least on my page). It works in IE and Safari, but I can’t get it to work in Firefox. Any help?
GIGU May 31st, 2006
GOOD, VERY GOOD
PIOI May 31st, 2006
UCIAU
Jon Jun 2nd, 2006
Hi,
Love the scipt….best way to show my work on my portfolio
Problem in FF and Safari that is not in IE:
Overlay covers -everything-, even the photo and ‘close x’ box. Is something messed up?
This is the link of the page (I’m newer to coding, I appologize for any mess) http://www.personal.psu.edu/jcf192/mrclean.html
Let me know if there is a solution..i bet it’s just something stupid on my part.
Kirchen Alex Jun 2nd, 2006
Hi,
How to do to close the lightbox with escape instead of ‘x’?
(I tried if(keycode == 27){ hideLightbox(); } but it didn’t work)
Zanks
Alex
ha nguyen Jun 7th, 2006
Hi, I got lightbox worked great in my website (under construction). However, I got a similar problem as imago had, could not open an image link within a google map infowindow with lightbox feature. I use Gmap v2. Any suggestions are appreciated. Thanks!
Ha Nguyen
artViper Jun 9th, 2006
Works neatly and nice, except one thing – hope you can help out.
I let some javascript generate a link on the page if someone hovers the mouse over an image map. This works pretty well and the generated code says also that the link is fine ( rel=”lightbox” on it ).
Yet, if I click this generated link, the image is displayed normally without the lightbox effect.
Here’s the code:
if(img_src == “worldmap/america.jpg”){
x = document.getElementById(“linkage”);
x.innerHTML = “USA – Miami“;
}
Any idea what could cause this behaviour? Help is much appreciated :)
artViper Jun 9th, 2006
btw, you can see it at: http://www.artviper.net/test2/dive/wasser.html – simply hover your mouse over america.
netnoise Jun 12th, 2006
With lightbox 2.0 you can use rel=lightbox_myset (instead of lightbox[0]) to make it valid xhtml 1.1
DDD Jun 15th, 2006
I want to link the image gallery from one image so that it opens up the gallery with all pics. Right now it seems I have to link every pic in the file which isnt an option since I am working with a sliced image in which one piece calls the gallery. I just need to be able to click on that image and the gallery pops up with the photos in it to scroll through. If anyone can help me that would be greatl.
Thanks,
D
Alex Jun 18th, 2006
hey Lokesh, what’s up? Can you please help me out with something? I put together a pic gallery using Lightbox, but for some reason still unknown to me, the “close” button won’t close. You can still close Lightbox via the keyboard but not by clicking on the close.gif.
Any ideas about why this is happening would be extremely helpful ;-)
Confused Jun 22nd, 2006
I’m usuing an AJAX script from Dynamic drive and I want to put the Lighbox gallery in one of my pages, but when I click on the pictures, they don’t pop up.. and I don’t know how to make it work. I tried adding the lightbox .css file into the main .css file but it still doesn’t work, can you pleaseee help me? THanks
Josh Jun 22nd, 2006
Great script! This thing is as beautiful as it is functional. Nice work!
And thanks to those who are posting solutions to problems. :)
Cheers!
Kelley Jun 22nd, 2006
I don’t understand why it won’t work for me. :( I’ve uploaded all the files to the appropriate places, appended the CSS to my existing stylesheet, and added the three lines of code to my header, but still no luck. Every time, the image opens in as if I had linked to it directly, not in the lightbox. I wait till the entire page and the images load, I don’t have any onload scripts in my body tag, etc. Anyone have any suggestions??
Kelley Jun 22nd, 2006
If you wanna dig through my code, it’s here: http://heykelley.com/twitch
Please help! I used the older version of lightbox and loved it. I really wish I could get this one to work. T_T
Travis Jun 23rd, 2006
I ran into the same problem that I saw a few other people have: generating the images via Ajax after the page has loaded causes the Lightbox to not work. I couldn’t find an answer to this anywhere, so I started hacking through the code to see if I could get something to work. Below is a link to my solution:
http://www.travisonrails.com
test Jul 5th, 2006
test
dumbo Jul 6th, 2006
I try to use and flash mp3 play but when use it with lb the flash appear upper the lightbox. well try to use the wmode transparent and div transparent, no work on ff
then i use SWFObject: Javascript Flash Player detection and embed script
http://blog.deconcept.com/swfobject/ and with this script work fine and im happy becuse is accesible too.
Now i have the same problem like Travis..
Matthew Williams Jul 10th, 2006
I have this script on two pages. One page links to the other.
If I open page A, the script works fine and my images open up as they should. I can then click on a link to go to page B and images work as they should but when I click the back button to go back to page A and click on a link the image just opens up in the browser.
Any thoughts?
Using IE6 (work…)
setsch Jul 11th, 2006
hi,
can I use the script from a frame and display it on top of the entire page? is anybody knowing a easyer tutorial like #220, couse this is to hard to understanding for a beginner.
please help
thanks
Ilchy Jul 12th, 2006
Seems that it works great, but if you click an image to enlarge before the page is loaded then the image opens in a new window. I’ve tried preloading images, and the fix mentioned but no luck. Any ideas?
Sophie Jul 13th, 2006
Kelley (#326) and I have the similar problem. Like she said, “Every time, the image opens in as if I had linked to it directly, not in the lightbox.” However, when I open the web page from my root folder, the lightbox works perfectly. When I view the web page from my hosting site, the image is linked directly.
Can anyone help the both of us? This problem has been frustrated lately and I can’t seem to figure it out.
I would really appreciate this so much. Thanks in advance.
Also this lightbox is great!!..would be more better if I can get it to work on my site.
Sophie Jul 13th, 2006
Oh and also my webpage with the light box is
http://www50.brinkster.com/drowninsanity/creations.html
Help please
Anonymous Jul 13th, 2006
dgvdgd
Anonymous Jul 16th, 2006
Yes, i cant get this script to work for me website, all it does is when i click it takes me to a new page and shows the enlarged graphic. I need help to make the LightBox pop up and i already checked for the conflicting JavaScripts in the body code and it still doesnt work, can somebody help me?
Brajendu Jul 18th, 2006
Hi Lokesh,
I am from india. (I guess U R too,… If I’m not wrong!!).
Your website looks cozy and very pleasant though it’s simple. I really like it’s design as well as functionality!!
I work as a web-designer in DBSentry Solutions in Pune. I have been in this field for few years now. But I think I should hone my skill towards programming too. Atleast some scripting .. so that I can have a hold on UI design for web applications.
For working so many years in just photoshop, static HTML, I have developed some sort of aversion to coding. I need some suggestions from U in this regards. How can I proceed, so that I can enhance my skill towards coding?
Thnx in advance
Metehan Jul 19th, 2006
hi,
im using iframes.and my parent page have flash objects.i try olegs project.it works fine but under the flash objects.Can u help me ?
nargalzius Jul 20th, 2006
Excellent script! I already modified it to be somewhat flickr friendly in my site
http://www.nargalzius.com/blog/archives/2006/07/2006_07_13_1001AM.php
A question though: I know adding an onclick close function on the objImageContainer can make it more intuitive, but I was wondering if it was possible to only enable that when it was a SINGLE image being loaded (meaning not part of a group/array) I tried doing an if on the array.length, but it wasn’t working.
What are your thoughts on this?
http://www.nargalzius.com
Florian Jul 24th, 2006
Hello,
I LOVE this script, but I need help too…
I need to change the image in the light box at load, something like this:
onClick=”javascript:myform.big.src = myform.previewpic.src+’&big=2&lupe=2′;”
This worked in another solution.
How can I change the image in the Lightbox in the above way? What is the IMG name in the lightbox to grab it and replace it using JS?
THANK YOU so much :-)
Florian Jul 24th, 2006
I need to know please how to call the lightbox image and then replace it through JS like this:
THANK YOU :-)
Rick Aug 1st, 2006
Is there any way to make this script work with an html file instead of an image?
Thanks
Rick
Ulaganathan Aug 4th, 2006
Hello,
I LOVE this script, but I need help too…
Normally the image is displayed and the click link is dispayed top to bottom.But i need the click button should display bottom to top ,Please anyone help me to change the code
Nathan Aug 4th, 2006
Hello,
I LOVE this script, but I need help too…
Normally the image is displayed and the click link is dispayed top to bottom.But i need the click button should display bottom to top ,Please anyone help me to change the code
With thanks and Regards
Nathan
Giacomo Aug 10th, 2006
Help!
I need to call the script from another javascript (a slideshow), but it doenst work if I just ad rel=lightbox…
I need to know how to call the script with onclick…
Thanks
fana Aug 11th, 2006
The solution using “wmode=transparent” in flash works fine. The flash movie stays behind the overlay. But have you tried it on a slower computer?
It’s horribly slow…
I hope there’s some other solution for this problem.
Adrian Aug 16th, 2006
i’ve a problem with the script:
i installed it like written on your website. but it doesn’t work at all!
take please a look on it:
http://creative-media-designs.de/referenzen.php
Amr Aug 18th, 2006
I have the same problem like #328 Travis
I generate images using Ajax…
and it doesn’t work then ..
So please any help ? it’s fatal !!
v2ike6udik Aug 23rd, 2006
FASTER ONLOAD SOLUTION!
The most disturbing fact of all, is the fact that lightbox is using onload event.
I’m quite sure, but not 101% sure, thet lightbox can work without it.
The case is simple:
onload fires after everything has been loaded, while we could do stuff immidiately after DOM has loaded.
I do not have any time to do scripting at the moment, but if someone is kind enough, please lock at the following url:
http://dean.edwards.name/weblog/2006/06/again/#comment5338
New and excelent solution for all thos onload problems.
And it has fallback to onload if this stuff does not work.
Ingwa Aug 29th, 2006
Greetings,
Firstly I just wanted to say what a fantastic set of scripts.
I’ve been using lightbox over the past couple of months with ajax enabled websites. However, my latest one is having a problem with the image paging. See:
http://vega.rehabstudio.co.uk/
and click on gallery. Browse through the images using the next and previous and you will see on the third image, the next link appears below the close button. It’s really strange, seems as if the hotspot has actually started below the image. Any ideas on how it can be fixed?
Thanks for your help.
neo Sep 1st, 2006
is ther a way to have Lightbox pull all images in a directory? For example all my wedding photos are in ./portfolio/weddings
so rather than listing each image inside the a tag can it just assume I want to display all the images in that folder?
Thanks
jon
Aaron Sep 4th, 2006
I put the Lightbox in an inline frame, is there anyway that the image can be displayed out of the inline frame?
Kyle Mistry Sep 4th, 2006
Incredible script you’ve got here, I just have one problem with it.
I use some large images in my gallery alongside this LightBox script. Now, if one of the larger images loads, it tends to go past the bottom of the HTML document, extending the page. Unfortunately, the overlay does not cover this, as it is brought up before the image stretches the page. Is there any way to fix this?
Mike C Sep 11th, 2006
Gidday there,
nice script – photos stand out nicely!
Just a question about captions. By adding the ‘title’ tag for the captions to show below the photo, it also displays popup ‘alt’ text when the user hovers over the link to the photos. This is good, but when you alter the text within the ‘title’ tag to display, for example colour fonts using html entity equivalents:
<font color="#CD5A08"a>Photos:</font>Me<BR/>
it then displays the HTML tags when the user hovers over the link to the photos.
Is there anyway to overcome this without losing the captions altogether? That is, to get rid of the alt text, but keep the captions.
Thanks for your help, from NZ.
Mike C Sep 11th, 2006
sorry for typo in html – watching tv at same time
Sophie Sep 11th, 2006
Hi,
Love the script. Exactly what I needed for my portfolio.
I had no problem implementing it in IE but firefox and safari won’t start the slideshow. Any suggestions?
Here is the site:
http://littemissnobody.site.voila.fr
David L Sep 11th, 2006
I have downloaded your lightbox viewer, but for some reason, the menu bar that i have seems to go right through the images in the lightbox viewer. Is there anyway to set a layers mode like in HTML? It really looks bad with the menu right in the middle of my picture. I’m new with Java. I’m just trying to make my site look good.
Sophie Sep 11th, 2006
Forget about my previous message. Just worked it out. It was the same problem other users have mentioned with image maps. Got rid of the image maps and the script woorks great.
Brle Sep 14th, 2006
Alternate scrollbar color is not working. Any help?
Example of scrollbar:
(SCROLLBAR-FACE-COLOR:#454738;
SCROLLBAR-HIGHLIGHT-COLOR:#FF9900;
SCROLLBAR-SHADOW-COLOR: #FF9900;
SCROLLBAR-3DLIGHT-COLOR: #454738;
SCROLLBAR-ARROW-COLOR: #FF9900;
SCROLLBAR-TRACK-COLOR: #454738;
SCROLLBAR-DARKSHADOW-COLOR: #454738;)
Huevoos Sep 14th, 2006
Hey, Great Script!!!
I’m having a problem with the z-index.
I need to make a div to overlay or partially overlay the picture, but whatever value I put to the z-index the image and the image container are on top.
Any help???
Huevoos Sep 15th, 2006
Never mind. Stupid me, the div was a child of the overlay.
Andrew W Sep 18th, 2006
http://www.lokeshdhakar.com/2006/01/10/lightbox-js-update/#comment-793
Somebody who can help to solve the problem of #144, or require vistor to wait till page completely loaded, that’s to say, once visitor click on the thumbnail, a javascript to alert(“Page is still under loading….), and return false on the click.
How to judge whether the browser is still loading is the key problem.
Ronny Sep 21st, 2006
Just an idea on problem #144:
I’ve had the same problem. I built up a page locally, tested on my WAMP, and everytime I clicked the first image the script doesn’t work.
Since I changed the server configuration by setting GLOBAL VARS to be ON everything works fine to me. Maybe this is the solution for this problem – maybe not. I don’t know exactly but it works :)
Andrew W Sep 21st, 2006
#364 Ronny
Can you teach me step by step to set the configuration? so everybody can test it whether this works, thank you in advance.
Ronny Sep 22nd, 2006
Hhhmm, I really don’t know if this is the solution…!
You have to get to the root of your webserver and change the file “php.ini” by setting “register_globals = on”. Usually it is off, and for security reasons it should be left off. Maybe you have to ask your webspace provider to do this for you.
But for myself I can’t imaging that this setting should solves the problem. For me it sounds illogical ;) I think there is another fact that I ignored. Stay tuned :)
Nico Sep 26th, 2006
Hello,
thanks for this script :)
I’m facing a problem, I’m trying to add a div container with overflow but the scrollbar of my div container isn’t display?
dzdkjzdnjznnnnnnnnnnnnnnnnnnn
dzdzdz
fefefefefe
dzdkjzdnjznnnnnnnnnnnnnnnnnnn
dzdzdz
fefefefefe
dzdkjzdnjznnnnnnnnnnnnnnnnnnn
dzdzdz
fefefefefe
dzdkjzdnjznnnnnnnnnnnnnnnnnnn
dzdzdz
fefefefefe
dzdkjzdnjznnnnnnnnnnnnnnnnnnn
dzdzdz
fefefefefe
div.Container {
width: 300px;
height: 80px;
overflow: auto;
}
If I delete the width and height parameter in lightbox.css #overlay, the scrollbar is display correctly but the overlay effect doesn’t work :-(
I try to set width and height manually without success.
Thanks in advance for you help!
Nico
@ Nico Sep 27th, 2006
You have to position the div absolutely
i.e.
position: absolute;
top: 100px;
left: 100px;
mike Sep 30th, 2006
Does anyone have an answer to comment #355?
Cheers
Mike Oct 1st, 2006
Found answer to above. Simple change of ‘title’ to ‘caption’ in Lightbox code & link code
Maiku Mori Oct 3rd, 2006
I have found another way how to fix bug when flash objects float over overlay and lightbox. Actually people who made greasemonkey lightbox script did, all I did is merage the code.
So basically the idea is to hide flash objects while lightbox is open.
And this is how it is done:
Add:
// hides flash movies that peek through the overlay
var objects = document.getElementsByTagName(‘object’);
for (i = 0; i != objects.length; i++) {
objects[i].style.visibility = ‘hidden’;
}
var embeds = document.getElementsByTagName(‘embed’);
for (i = 0; i != embeds.length; i++) {
embeds[i].style.visibility = ‘hidden’;
}
var iframes = document.getElementsByTagName(‘iframe’);
for (i = 0; i != iframes.length; i++) {
iframes[i].style.visibility = ‘hidden’;
}
Before: hideSelectBoxes();
Line 314
And add:
// show flash movies again
var objects = document.getElementsByTagName(‘object’);
for (i = 0; i != objects.length; i++) {
objects[i].style.visibility = ‘visible’;
}
var embeds = document.getElementsByTagName(‘embed’);
for (i = 0; i != embeds.length; i++) {
embeds[i].style.visibility = ‘visible’;
}
var iframes = document.getElementsByTagName(‘iframe’);
for (i = 0; i != iframes.length; i++) {
iframes[i].style.visibility = ‘visible’;
}
Before: showSelectBoxes();
Line: 558
Idea and code by creators of Lightbox Greasemonkey script.
I think this should be included in next Lightbox relase since who need flash in the background when they are looking at the picture.
Thanks for lightbox, it has made my day multiple times, I just love it.
impulse Oct 9th, 2006
Thank you for your great script.
I have a problem that the images only shows totally at the bottom of my website.
Does anybody has a suggestion?
you can click on the first image you see, and it will show up at the bottom of the screen.
http://ifolio.idfact.net/?p=150
impulse Oct 14th, 2006
fixed! I did not put the rss link in the right place
TourismLangkawi Oct 17th, 2006
nice script…
1st time I use this script, it didn’t work and I give up to settle the problem… but, I try and error this script and its done!!!
feel free to visit Tourism Langkawi…
court Oct 18th, 2006
Image Maps-
I’ve got them working with the fixes listed above (with the ‘rel’ method, i couldn’t get the ‘alt’ method working). However, I can’t get the groups to work, just a single image.
The gallery, which works with groups, is here
http://www.aboutlaketahoe.com/hiking/whitney/index.htm
the image map, whiere grouping doesn’t work, is here
http://www.aboutlaketahoe.com/hiking/whitney/whitney-topo.htm
When i try to use the group functionality within the image map, the image opens as a jpg
Alexandre Oct 20th, 2006
Again!
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.
Please, i want this answer.
alexandre.paulino@bol.com.br
Sherman Oct 20th, 2006
ok.. still nothing.. it still won’t work..
i tried the different links.. i even tried hardcoding it.. but all i get is the shadow effect and a white box. nothing else loads..
i tried the test page here:
http://www.shermanyang-photography.net/lightbox/
and it works fine..
but for some reason it won’t work on my other page..
i’m sure the links to the pictures are right..
please look…
http://www.shermanyang-photography.net/ … page4.html
both 800×600 links aren’t working.. thumbnails will come later.. but that’s after i get the links to work… sad
PLEASE HELP!!!
Vash Oct 21st, 2006
This is great! integrates perfectly with my blog and colorscheme too *lucky me!* Thanks :D
Ronny Oct 23rd, 2006
@ 377 / Sherman
I think you used IE7 (beta), no?! I’ve had the same problem but was fixed in IE7 final…anyway, I looked at your Page and everything works fine to me. I’m using Firefox. Btw: really nice pictures!!!
Closing this open link. Oct 26th, 2006
Just closing a link that was unclosed earlier on somewhere in the page, and is causing a bit of trouble. Might work, might not.
at0m Oct 27th, 2006
I have a problem using lightbox .. on my site i have a DHTML menu which stays on top.. kindda like the flash problem ..
plz help !
adam Oct 28th, 2006
the plugin works perfectly except one thing … i dont have image thumbnails . how can i fix it so i have image thumbnails instead of text links
tomekk Oct 31st, 2006
First of all thanks for this awesome script but “Houston, we have a problem” :/
I’ve got no captions at all under my image(s). I’ve tried changing the font color but it gives nothing. I can see for instance ” Image 1 of 2″ but nothing more, no caption.
What is more I found another web site using this script and there are captions ,but after copying the source to my program this site doesn’t display captions too.
I’m deseperate , I need help!!please….
Stef Nov 1st, 2006
It worked for a while, but now I cannot fix it. The image appears in a blank page:
http://www.transilvan.info/vad/?p=26
Any help will be appreciated. Thanks.
Nash Nov 3rd, 2006
How can i postion the light box at the a specific height from the top i want. Say 100px from the top. i try to change the in the lightbox.css but it did not work. please help. thanks.
#lightbox{
position:absolute;
==>top: 40px;
azfas Nov 4th, 2006
asfasfasf
Dennis Nov 5th, 2006
Hello, i’ve been trying to get this lightbox to work with my flash menu. You can use wmode but in firefox the menu gets inactive sometimes. Does anyone know how to fix this? when the menu is inactive you have to click on it once to get it to work like it should again.
One thing you can do that will work is to hide the flash when you open the lightbox but that looks kinda ugly. A smart thing would be to instead of hiding the menu you could use wmode transparent just when the lightbox is active.. but Im not a javascript expert, If anyone could do this I would be very happy :)
You can contact me at denniz.gull@gmail.com
Kristofer Straub Nov 6th, 2006
If you’re trying to move the position of the Lightbox display from the standard 40px, the answer isn’t in the CSS but lightbox.js. Do a search for “top” and you’ll see this snip of code:
setTop: function(element,t) {
element = $(element);
element.style.top = t +”px”;
},
“t” is what controls the actual distance from the top of the page.
dsfas Nov 11th, 2006
fasdfsdf
mvandani Nov 18th, 2006
I’m using XSL to render an XML document that acts as a photo gallery. It seems that XSL takes issue with the load order of the scriptaculous files. When prototype is loaded before scriptaculous, the page refuses to render at all. When you load them in the reverse order, the page renders fine, but lightbox breaks. The images load in a new window. I have lightbox working on an HTML based page just fine, so I know everything is set up right.
Anyone know of any work arounds?
http://wam.umd.edu/~mvandani/gallery.xml
http://lists.rubyonrails.org/pipermail/rails-spinoffs/2006-March/003158.html
Anonymous Nov 19th, 2006
Anonymous Nov 20th, 2006
Has anyone modifed this script to make the slideshow play automatically with playback controls such as “play”, “pause”, and “stop”?
Evson Nov 22nd, 2006
Think I know why some of you can´t get the lightbox to overlay flash files. The wmode param must look like this:
fo.addParam(“wmode”, “transparent”);
On some pages where I´ve searched for this issue they´ve incorrectly written
so.addParam(“wmode”, “transparent”);
No wonder it didn´t work out. After like 5 hours of testing and google searching I found this out. Good luck to ya all! I´m sure you´ll get it right.
THANKS alot for the great lightbox. Everybodu Must donate!!!! :) I will at least.
Evson Nov 22nd, 2006
Have to correct myself too. :)
What I wanted said is that if you have “var fo”, the addParam must start with “fo”, like this.
Flash content here
var fo = new FlashObject(“banner.swf”, “banner”, “900″, “120″, “6″, “#000000″);
fo.addParam(“quality”, “high”);
fo.addParam(“wmode”, “transparent”);
fo.write(“intro”);
on some pages they´ve mixed these “var fo” with “var so”. Make sure it´s equal and it´ll work out.
Anonymous Nov 22nd, 2006
Maiku Mori you are amazing!… i was about to kill someone cause every thing i tried… swfobject, params… etc. nothing worked. finally!… I LOVE YOU! … for people who are annoyed with the flash showing up on top of the overlay…
READ COMMENT #371
trust me.. it will work for you. best thing… all you have to do is copy and paste. yah! this makes me happy. sweet.
Nick R. Nov 25th, 2006
Great script. We have implemented some more javascript to create a media center using the lightbox2. When you roll your mouse over a thumbnail it will auto load the image to the left, then a user can click on the “left” side image to pop up the lightscript 2 feature. Here’s a link enjoy!
http://theindy.net/nick
Nick R. Nov 25th, 2006
p.s. We have two versions of this script implemented. #1 being the left larger image pop up, then if you click the [ view all pics ] at the top right you can see the comments and scroll . That’s all.
:)
great script again! love it.
Christian Nov 27th, 2006
Hi people,
I am trying to use this lightbox on my homepage with another js script. my menue bar. it works, but my menue-bar appears in front of the pictures with full opcacity. since i have no clue how to modify anything I would appreciate some help! please!
if I could change the position of the picture it woldn’t get in the way with my menubar also. maybe that would work?
thanks so much
João Carlos Nov 27th, 2006
Firefox:
with ‘transparent’ and z-index:1 … the flash already above the lightbox, what can i do?
my link: http://www.rallyedesign.com.br/ap-ldrover.html
thanks
João Carlos
Justin Nov 27th, 2006
I have a problem, my page loads, click on a link just opens the jpg in the browser. When I click “back” and then click the link everything works like it should. Any ideas on a work around for this?
Anonymous Nov 28th, 2006
@Justin (#400):
YES! Read all the comments for yourself!
Michael Dunn Nov 28th, 2006
This is a super script, my visitors love it as a gallery!
I put my files on a new server today, Loghtbox doesn’t seem to work at all on this server, the larger image show up in a full page, with no actions possible, except “back” to see the thmbnails. Anyone have any suggetsions? I’m going to ask my new server people also.
Thanks very much, and again a huge thanks for such an elegant image show.
Michael Dunn Nov 28th, 2006
This is a super script, my visitors love it as a gallery!
I put my files on a new server today, Lightbox doesn’t work at all on this server – the larger images show up in full pages, with no actions possible, except “back” to see the thumbnails. Anyone have any suggetsions? I’m going to ask my new server people also.
Thanks very much, and again a huge thanks for such an elegant image show.
Michael Dunn Nov 28th, 2006
Sorry folks, getting late here – I forgot to upload a couple of js files.
All working fine now.
Michael
Burhan Nov 30th, 2006
Gives a way to sort the Groups? If i will next & prev funktion can i sort this with a id? For example: rel=”lightbox[roadtripIDx]”
Example:
Galerie 1:
rel=”lightbox[roadtrip1]”
rel=”lightbox[roadtrip1]”
rel=”lightbox[roadtrip1]”
Galerie 2:
rel=”lightbox[roadtrip2]”
rel=”lightbox[roadtrip2]”
Galerie 3:
rel=”lightbox[roadtrip3]“
Burhan Nov 30th, 2006
Sorry, this works already.
Sorry for Bad English, you can delete my Comments.
Isaac Simon Dec 1st, 2006
Here’s how to open a Lightbox using Flash. This ONLY works for single Lightboxes. This will NOT work for the gallery function of Lightbox.
This script will ONLY work if you have already set your HTML page to use the Lightbox script.
Add this script inside your HEAD tag in HTML:
function FlashLightbox(sPicURL,Title) {
var biolink = document.createElement(‘a’);
biolink.href = sPicURL;
biolink.rel = “lightbox”;
biolink.title = Title;
myLightbox.start(biolink);
}
Now, code your FLASH object using:
yourinstance.onRelease=function(){
getURL(“javascript:FlashLightbox(‘path to image’,'title’)”);
}
All set! Lightbox is phenomenal, but I needed a way to open the lightbox with Flash. ENJOY!
Rick Dec 5th, 2006
Imagemaps: Thanks Jason, #140… but I’m having a problem getting both Imagemaps AND normal functionality on the same page. I created a new file called lightbox-map.js using ‘area’ vs ‘a’, however, of course when I load both scripts in my header the last one takes precedence. So I can always get either ImageMaps or normal images to work, but never both simultaneously.
Suggestions? Thanks. (wonderful script!)
W.K. Park Dec 7th, 2006
This is another modified Lightbox JS named Lightbox Plus by Takayu Otani.
http://serennz.sakura.ne.jp/toybox/lightbox/?en
* The image is expandable when the image size is larger than the current window size.
* The image is resized automatically to suit to the current window size.
* The echoic word image can be applied.
* The zoom ratio can be changed by mouse wheel.
* The zoomed image can be dragged.
Maarten Siersema Dec 9th, 2006
First of all, let me say that you script is really amazing! Thanks for sharing..
The flash and also form input “issue” can also be resolved with the following js script.
http://lowereast.nl/V2/templates/wch.js
It would be a really nice addition to the script to include the file.
Maarten
P.K. Dec 9th, 2006
Here’s a terribly non-standard hack that allows image maps and regular links to show up in Lightbox when on the same page.
Encapsulate the area tag in an href like:
Ugly right? Works in IE6, does not work (as I guess it shouldn’t) in Firefox. I haven’t figured out a real solution yet.
P.K. Dec 9th, 2006
Well, the code was stripped out of my comment.
In any case, just use an href and call lightbox as normal, then place that around each your area tags.
adamski Dec 12th, 2006
Hi guys, Ive got a problem. so far couldnt find the wright answer. What should i do, to make the picture display in the center position of the screen, no matter how big the screen is?
Thanks for in advance Your help.
Kristianus Dec 15th, 2006
Hi, thanks for this wonderful script, I have a good time customizing it for my website.
I want to ask something, is it going to be a further development to enable the Lightbox to lload swf movies or quicktime movs?
bart Dec 16th, 2006
Audio MP3 WAV WMA OGG Converter
Convert Audio Files MP3, WAV, WMA, OGG from One Format to Another Directly.
homepage: http://www.audio-converter.com
kim Dec 16th, 2006
M4A to MP3 Converter can convert M4A video or audio files to MP3 files.
M4A to MP3 Converter can also convert other media files to MP3 files, these media files may
include WAV, OGG, WMA, WMV, ASF, ASX, MPEG-1, MPEG-2, MPEG-4, MP4, M4A, AAC, MOV
homepage: http://www.m4a-to-mp3-converter.com/
gabby Dec 18th, 2006
love the script, but just curious..is there any way to make the images load resized to fit the viewers browser..and if not, what attribute in the css if anywhere…resizes the images? I have found a way to resize the images but the outside contaniner for the image stays the same large size as the original image. thanks.
2ADV Dec 18th, 2006
I love light box.
2advanced.jp
Yatsumoto Dec 18th, 2006
Thanyou ZAP for good script “Autoloader” LB is very GOOOD
Iresh Dec 27th, 2006
Cool Script, I will use this to my web , Thanks !
Luce Dec 28th, 2006
anyone know how to get lightbox v2.0 to appear in iframes…
i would like to have lightbox to load up in the parent page not inside my iframes when people click the images on my iframes…
Can anyone address this? The solution on here does not work for v2.0 of light box because i followed the instructions and cant get it to work
thank you very much for your time
jimro Dec 28th, 2006
Hi,
Very cool script.
I’ve added the possibility of using Lightbox with AREA tags. It works fine in both Firefox and IE6. But it’s not XHTML 1.0 strict valid because ‘rel’ attribute doesn’t exist for AREA tags.
I’ve tried to replace the “rel??? attribute by “class??? (in HTML and lightbox.js). It works very well in Firefox, but not in IE: the image opens up in a new page.
Please, how to solve that issue?
Thank you very much for your work and your time
Romuald Jan 8th, 2007
Grieve but in lightbox.css : #overlay { filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6; }
every three am not Valid ( Example http://www.euro-truck.biz/en in http://jigsaw.w3.org/css-validator )
how to solve that problem ? Thank you for in advance Your help.
Romuald
Skiman Jan 13th, 2007
Heya :)
Great little scrpit here. Thanks heaps for it.
I have an issue with ‘imagemaps’. Im using Lightbox in conjunction with a phpbb forum, to show images. When you click on a normal image link, Lightbox works fine. The issue im having can be seen here –
http://www.photographyschool.com.au/forum/viewtopic.php?t=3
The thumbnail and its respective code is provided by photobucket. I thought to use the thumbnail feature to keep forum speed efficient. I tried the suggested fixes for imagemaps but when i make those changes, Lightbox stops working altogether and just opens the image in a seperate window. This is the code supplied by photobucket for the clickanle thumbnail -
[URL=http://i114.photobucket.com/albums/n272/skiman101/test-800px.jpg][img]http://i114.photobucket.com/albums/n272/skiman101/th_test-800px.jpg[/img][/URL]
.. and this is the standard IMG code that works as part of the forum.
[img]http://i114.photobucket.com/albums/n272/skiman101/test-800px.jpg[/img]
Ive been looking for a solution for some days now and really hope that one your gurus will be able to help. Im a javascript n00b, so as many details as possible would be really great.
Thanks guys :)
Mickey Jan 15th, 2007
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
Jeff Jan 16th, 2007
Hi,
Does anyone know if its possible to make this lightbox work using the links from inside a flash swf?
Many thanks
Jeff
Dustin Jan 18th, 2007
Hi, I’ve got it to work in firefox and IE 7 but it opens in a new window in IE6 and below, what am i missing?
Many thanks….Dustin
Ivan Jan 19th, 2007
Hi guys,
Thanks for providing such a creative script.
I’ve done some testing and looks very nice, however, there seems to be a bug with displaying bigger images, mainly the transition effect is lagging, thus producing artifacts.
Another thing, “lightbox[group images]” breaks my %100 valid XHTML 1.1 code. W3C doesn’t like this. Can you please modify your code to comply with W3C standards?
Maybe, modify it like this “lightbox-slideshow”, I’m not a Java progammer, just a suggestion.
Thanks again.
Fido Jan 23rd, 2007
the flash buttons appear on the outside of the image, i believe itsd called the overlay
this is a great script but is there anywayt o fix that?
Cenobyte Jan 28th, 2007
You and your script own big time.
Newlukai Jan 29th, 2007
Hi there,
yesterday I downloaded LighBox 2.02 and got the problem that the lightbox is opened IN an iFrame and not on top frame.
Since I didn’t look for the solutions posted here I altered the script to fix my problem, and it works. So I thought it would be a good idea to share my modifications.
The modifications I made solve this problem top-down, so you have to include the javascripts on the frame that should display the lightbox. Therefore you don’t have to include the javascripts in the iFrames itself.
Additionally I tried to make it as easy-to-use as I could.
OK. I’ll explain how you implement my version. On the top frame that displays the lightbox include the scripts as usual. But the iFrame has to be defined with a ‘longDesc’:
Then you define you iframe.html:
That’s nearly all. Here are the modifications to lightbox.js:
Introduce a flag in the configuration part:
var deepSearchForLinks = true;
Add these three functions at the end of the script (but before the definition of initLightbox()):
//
// getAnchors(documentToSearchIn)
//
//
function getAnchors(documentToSearchIn) {
var result = new Array();
if(deepSearchForLinks) {
var frames = getFrames(documentToSearchIn);
for(i = 0; i
Lumu Jan 30th, 2007
@ Newlukai
Hello,
At first thank you for your tip! But I think your code you have sent us is incomlpet.
Please can you send us the three functions.
Greats
Lumu
HecticBen Jan 30th, 2007
Re: #249
Thanks Oleg, you helped me out a bunch!
Moose Jan 31st, 2007
Has Anybody actually gotten this to work:
——
#407 Isaac Simon
December 1, 2006 @ 5:58 pm
Here’s how to open a Lightbox using Flash. This ONLY works for single Lightboxes. This will NOT work for the gallery function of Lightbox.
This script will ONLY work if you have already set your HTML page to use the Lightbox script.
Add this script inside your HEAD tag in HTML:
function FlashLightbox(sPicURL,Title) {
var biolink = document.createElement(‘a’);
biolink.href = sPicURL;
biolink.rel = “lightbox”;
biolink.title = Title;
myLightbox.start(biolink);
}
Now, code your FLASH object using:
yourinstance.onRelease=function(){
getURL(“javascript:FlashLightbox(‘path to image’,'title’)”);
}
All set! Lightbox is phenomenal, but I needed a way to open the lightbox with Flash. ENJOY!
———
Please be detailed or provide a copy of a sample .fla and .html page to see how this was done would be great!
sophia Jan 31st, 2007
lightbox is amazing,I like it very much!thanks a lot!
but it can’t work in IE 7! it opens in a new window
why?
LIGHTBOX??!????,??????!
??IE7?????????,??????????
????
Pi Jan 31st, 2007
@sophia, look over the FAQ, that question has come up a lot
Jason Feb 2nd, 2007
I’m using this script on my agency site at http://www.getconcentric.com/portfolio.html
The portfolio itself is within a div that has overflow set to auto. The problem I’m having is that the scroll bar shows on top of the displayed images in lightbox…seams to only be a Firefox problem. Does anyone know how to fix this?.
David Feb 6th, 2007
Ya gotta love lightbox.
peter Feb 8th, 2007
hi
excellent script. really works ocut fine wit som minor adjustments.
just got one question:
everything looks nice in firefox on pc and safari on mac but in firefox on mac the caption bar flickers just after it appears.
does anyone else have that problem?
any good solutions to the problem?
http://www.peterlundgren.se
Nick Feb 8th, 2007
Hi there,
Excellent script, works nicely. I was wondering if the following is possible.
Your second example shows the overlay with the click through [Next tab] to the next picture and so on. How could you alter the code so that the script runs off one picture with a selection of images (like a gallery) contained within?
Thanks
Sophie Feb 12th, 2007
I have linked some of the images to external website. Has anybody found a way to specify a new target for the page to open in a new window?
Thanks.
Sophie
gbot Feb 14th, 2007
Hi there, anyone know what the opacity settings in the #overlay style is CSS are for? They don’t seem to affect the opacity of the grey/black background – what are they for? Is there a way to adjust the opacity of the background?
Thanks.
#overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
kepiting Feb 15th, 2007
nice script….
gus Feb 16th, 2007
Hi,
This lightbox is amazing! One question though. Is it possible to zoom in on the image within the modal window? I wish to use lightbox to display photos of mauscripts where it will be necessary to zoom in to make out the hand writing. Obviously this will require that the jpegs are quite high res but is there a zoom function with lightbox or would it be easy to add? Not too hot with javascript myself, I’m afraid.
Bailey Feb 21st, 2007
The script isn’t working for me… when I click the thumbnail it just opens up the image in the same window. Help!
Mike Feb 25th, 2007
Any idea on how to get Groups working with imagemaps?
As soon as the [groupname] tag is inserted, lightbox ceases to work.
Thanks.
Yossi Feb 26th, 2007
Help !!!
this is a fantastic script but how to use it in a iframe page.
for example : i have picture in a iframe and i would like to load this script in the parent page. http://www.fmipro.fr
Please HELP ME :(
Torben Lajer Feb 27th, 2007
I found my self in the position where I wanted to load an image with lightbox from an iframe, but with target = _top
The approach suggested by Sean K. is in my oppinion WAY to difficuelt.
Instead, implement the lightbox script in the _top page, as suggested by Sean K. as well. But when calling the script, it is way more simple to send a “virtual” a tag to the showLightbox function. Here is how ive done it:
Show image
function showImage(sImage, sTitle)
{
// Make a virtual link we can send to the original lightbox file.
var oLink = document.createElement(“a”);
oLink.title = sTitle;
oLink.href = sImage;
window.parent.showLightbox(oLink);
return;
}
Hope this can be useful to someone.
Yos Feb 27th, 2007
do you have a HTML exemple on the web ??
it will helpfull for me :)
look at this adress my problem : http://www.fmipro.fr/index2.html
see image on the right, when you click on it, it open the lightbox script in iframe page and not in the main page :(
Yos Feb 27th, 2007
thanks Torben Lajer
but there is no showLightbox function in the new lighbox.js V2
other idea ?
Tblaster Mar 4th, 2007
Thanks for a great script! For those of you having troubles with the fact that it dosen’t work if you click an image link before the page has finished loading, then include the following on you page:
function noLeftClick() {
if (event.button==1) {
alert(‘Loading … ‘);
}
}
{ document.onmousedown=noLeftClick; }
function enable() {
document.onmousedown= null;
}
Tblaster Mar 4th, 2007
And remember to include the following in the onload of you body:
enable();
les Mar 5th, 2007
One of the templates I am using with flash content is causing a
problem!
Basically, I am using “lightbox” – to display photographs.
Here you can see it working fine – on one of my “class” sites that
doesnt have flash content.
http://www.hillsideprimaryschool.co.uk/2p/docs/art.htm
I have run into this issue before and its always just been a case of
adding “WMODE = transparent” into the flash parameters. (as others have pointed out above)
However, the problem I have with this one, is the flash is loaded from
Javascript. I dont think it would be too much of a problem for someone
with javascript knowledge to edit – but for me – its double dutch!
The javascript itself is located here:
http://www.hillsideprimaryschool.co.uk/5p/swfobject.js
and the code to load the swf file is:
var so = new SWFObject(“flash_main_01.swf”,
“flash_main_01″, “600″, “150″, “6″, “#FFFFFF”);
so.write(“flashcontent”);
ie the swf parameters would need to be added to the above, and the js
file edited acordingly to add WMode transparent.
http://www.hillsideprimaryschool.co.uk/5p/art2.htm is the offending
page!
Anyone have any ideas?
steve Mar 6th, 2007
lez,
working thru that issue now… i’ll post the results. i have a version of lightbox.js that contains all the swfobject support and it works fine but the overlay problem hasn’t yet been remedied…
stay tuned…
steve Mar 6th, 2007
Bingo. Use the code from I believe it’s post 371:
Open up your lightbox.js and make the following additions:
Line ~314 right before “hideSelectBoxes();”
Add:
// hides flash movies that peek through the overlay
var objects = document.getElementsByTagName(‘object’);
for (i = 0; i != objects.length; i++) {
objects[i].style.visibility = ‘hidden’;
}
var embeds = document.getElementsByTagName(‘embed’);
for (i = 0; i != embeds.length; i++) {
embeds[i].style.visibility = ‘hidden’;
}
var iframes = document.getElementsByTagName(‘iframe’);
for (i = 0; i != iframes.length; i++) {
iframes[i].style.visibility = ‘hidden’;
}
and ~ line 558 right before “showSelectBoxes();”
add:
// show flash movies again
var objects = document.getElementsByTagName(‘object’);
for (i = 0; i != objects.length; i++) {
objects[i].style.visibility = ‘visible’;
}
var embeds = document.getElementsByTagName(‘embed’);
for (i = 0; i != embeds.length; i++) {
embeds[i].style.visibility = ‘visible’;
}
var iframes = document.getElementsByTagName(‘iframe’);
for (i = 0; i != iframes.length; i++) {
iframes[i].style.visibility = ‘visible’;
}
This fix supports all content embedded via object, embed, and iframe tags. If you’re using SWFOBJECT to embed your flash stuff (like I am), you’re still supported, as all SWFOBJECT.JS does is write the stuff for you.
Very pleased. Thanks Maiku for digging that fix up. :)
Wilson Mar 7th, 2007
Hi there.. I created my own AJAxified photo album using asp. I call it The Photobox. I incorporated Lightbox on it. I’m planning to release this soon as soon as I polished the admin section. It doesn’t need a database. Also it lacks an automated thumbnailer so I still manage to create thumbnail manually using a freeware Thumbnail creator program. The interface is similar to Photostack.org’s. See it in action: http://wilsonroial.uni.cc and click Photobox.
Brandy Mar 8th, 2007
Using Firefox 2.0 on Mac OS X, if there is an element with a visible scroll bar underneath the lightbox window (such as a textarea or an overflowing div), the scrollbar shows through the window. Perhaps something should be added to the script to give the property “overflow: none” to elements on the page with scrollbars.
Les Mar 8th, 2007
Thanks fir that Steve. I must admit, I did read through but missed that!
However I did find a much simpler solution that works!
Above the so.write(“flashcontent”);
Simply add:
so.addParam(“wmode”, “opaque”);
and hey presto!
Works on FF, Opera IE6 and IE7
jonathan Mar 8th, 2007
Great script. One question, is it possible to get the images to loop within its groop?
Simon Mar 11th, 2007
I’ve used Lightbox to add a very small gallery element to my website, but I’ve a query with regards to the loading.gif image placement.
On the first image to be enlarged (and it seems only the first), the loading.gif image is shifted ever so slightly to the right.
Any help would be appreciated.
Simon.
Lazlo Mar 18th, 2007
Hi!
First of all, sorry for my English :)
My webpage has 3 frames (not iframes), and you know, this lightbox effect works only in the “self” page. But I would like to fade in black all frames.
How can I solve the problem?
THX!
icefake Mar 19th, 2007
Hello, I need to know how I can modify the code line where the “Image 1 of 2″ is.
I’d like to have the possibility to change that frase in a nother for example “Immagine 1 di 2″ in italian language.
Thank you all!
Snowfiend Mar 20th, 2007
Hey there, I’ve created a site that uses lightbox and it works totally fine with my WAMP setup on my machine, but when I uploaded the whole directory to my mediatemple grid-server space it completely doesn’t work, it’s like it’s not even there. Anyone know about lightbox not working with mediatemple?
sWitt Mar 20th, 2007
thank you, Lokesh…
you deserve many rewards!
a 1000 kharma points for now :)
sWitt @ meanpony
http://www.meanpony.com
Ben Mar 21st, 2007
regarding the “BIOLINK” function to call lightbox from within Flash button – i got the function to work fine within HTML
for example just calling the function from a regular href:
Test Link
Ben again Mar 21st, 2007
UPDATE! okay, for those of you trying to load lightbox from WITHIN flash, comment number #407 works PERFECTLY – but ONLY if you view from a webserver – NOT locally…
flash 8 does not allow javascript to be called from local machines… i simply uploaded to my site – and it works perfectly…
thanks!
28stieren Mar 22nd, 2007
# 462 icefake
do a search in your editor. search for the following (or part of it):
Element.setInnerHTML( ‘numberDisplay’, “image ” + eval(activeImage + 1) + ” of ” + imageArray.length)
It should be somewhere around line 439
QUESTION:
Has anyone figured out how to link to a whole map of images? I have read the above comments, but I just can’t fugure it out…
please help me.
Marcel
http://www.28stieren.nl
28stieren Mar 23rd, 2007
#467 28stieren
nevermind. I found it.
very handsome script by the way!
Stephan Mar 25th, 2007
Guys, I’m not at all getting this script to work…
Seems like the styles.css file is missing from the download…
I need help setting this up urgently please
Stephan
Kevin Miller Mar 26th, 2007
As promised:
http://stickmanlabs.com/lightwindow/
Hope someone finds it useful.
MCH Mar 29th, 2007
Hello,
I’m experiencing a strange problem. When I view pages using this script locally images are always displayed in the center of the screen. However, when I upload these files to a web server and view these same pages over the internet the overlay does not cover the entire page and images are not centered. Any help would be appreciated.
Thanks
Lavern Gingerich Mar 31st, 2007
Your script is GREAT!
I do have a problem though at http://www.smokymtbarbecue.com. My Godaddy SSL box at the bottom of my site stays in front of my photos and the transparent background. Can you help?
steve Apr 10th, 2007
Great Script!
how do you get the lightbox ( v2.02) to close when you click on it?
similar to the effect of http://www.lokeshdhakar.com/projects/lightbox/
I’ve been trying to edit the source file to do this but i’m lost
Thanks
Robert Apr 12th, 2007
Hello
Have somebody thought about a combination with the onmouceover Javascript.command .
So that you dont have to click on a pic, only to go over?
For a small semple, i were very pleasre
Robert
jenn Apr 22nd, 2007
hi there:
i just found an image host who hosts the light box script and your image light box’d for free…
http://www.inselpix.com
i just thought i’d share it with you all! :)
j
Johnny Apr 23rd, 2007
Does anyone have a work around for using lightbox JS with iframes. Im at all familiar with javascripting so layman’s description would be greatly appreicated.
louis May 7th, 2007
my Flash floating on top problem was resovled using the wmode= transparent. I put it everywhere I could becuase in some places it would work in Firefox but not IE. The follow format resolved both browsers issues:
Simon Jun 6th, 2007
Hi there, really nice script, I have a problem that I have seen others post about but haven’t found an answer yet.
the link to the page where I use it is
http://www.structured.se/eriks.html (among others) and everything works peachy in my computer when tested locally, but when run from the server where the site is located it won’t find the images, just stays in the loading screen,
also I know this is an older version of lightbox but I happen to prefer this one to the newer one.
On another note is that I have trouble linking to images without the lightbox as well, so if anyone have the time to look at my codes and give me a slap if I messed up somewhere that would be appreciated.
Vikram AC Jun 13th, 2007
I am having problem with displaying along with Google Map.
Any solution ?
xilanko Jun 19th, 2007
I wish to let users save images from my gallery. how do i allow this ?
beside that i am very happy with LB. Tankx
http://www.bikers.co.il/motocross-16062007/motocross-16062007_1.asp
Fred Jun 22nd, 2007
http://www.latinamodelmagazine.com/ Click on link then click on the link to the photos are. Look for blinking arrow pointed to text link.
I cannot get the bottom xclose button to work. I went through this entire blog and all the code. I’m lost need help.
Thanks in advance
acp@latinasinc.com
Vishwanath Jun 29th, 2007
Lokesh, thanks for this awesome script. This was real easy to deploy thanks to your crystal clear instructions as well!!!
Rob Sep 19th, 2007
I believe I’m having a conflict between the function on my site for rollover images and the lightbox. If I remove the function, the rollovers stop working on my navigation links, but if I leave it in then the lightbox won’t open images correctly. It won’t resize the images to fit and text appears behind the image. Any idea how I could fix this?
atc Jan 31st, 2008
how to call Swf file from lightbox
Britni Jun 10th, 2008
I love this script !
BUT , i have a bit of a problem,
I’ve been asking everybody I can about this, and nobody seems to know the answer.
I’m using freewebs and I’m trying to use Lightbox 2.03a on it, but I can’t seem to figure out how to install it..
could somebody, ANYBODY PLEASE help me with this,
I’m trying to design a site for my photography,
Please Help :)
Britni
Habeeb Jul 4th, 2008
Hi,
Is there any way to display caption in the right side of the image?
Thanks
Habeeb
Akthari Oct 14th, 2008
Hi I need a ligthbox that will allow me to do the following on my firstpage,i have a single image-when visitor click on that image,i want it to open a lightbox, and then to have multiple other images that load afterwards.
(I only want to display one image, and after someone clicks, I want it to open a lightbox where people can click on Next or Previous to move through the remaining 4 or 5 images on my page.)
Reply me ASAP.
Thanks in advance.
Thanks & Regards
Akthari Begum.M
tobi Dec 3rd, 2008
Hello!
i need help, please! i can’t see (and click) any NEXT oder PREVIOUS Link. Only the CLOSE Button is shown and works fine. I use Joomla 1.5.8 and the zOOm Media Gallery 2.5.1 RC4 – I think this is the latest version?!
have a look:
http://www.megastar-events.de/component/option,com_zoom/Itemid,40/catid,5/
thank you!
tobi Dec 3rd, 2008
sorry,
i’m using not Joomla 1.5.8, i’m using the “old” version 1.0.15….
;)
hi Dec 11th, 2008
hi,
lightbox is dispalaying fine.but the drop down in the parent window disappears.
help me
Arjun Mar 23rd, 2009
hi lokesh
i am a web designer and web animator, i am making my 1st site as my freelance work. its a commercial site and i will get small amount for making that site. i wanted to ask u that is there is any charge or cost i have to pay to use your lightbox script in that site.
johan May 12th, 2009
hey!
I tried various solution for loading the image outside the iframe. Can’t get it to work. Can somebody make the salution downloadable in an example?
I would be very greatfull.
I’m using Plogger with lightbox skin so preferable only some changes to the .js or .css file of lightbox.
thanx!
nick May 30th, 2009
I’ve read above, but am having trouble getting the lightbox captions (title tags) moved over to the alt or similar tag to hack around the title tooltip popup. Everything I try seems to break the .js lightbox functionality. Any help?
nick May 31st, 2009
* found this fix for 2.0.4: [http://www.saurdo.com/01/03/using-html-in-a-lightbox-description]
The exact javascript file you need to edit is in the “/js/” folder and is named “lightbox.js”. The line you will need to edit is line 218 and 223 in Lightbox v2. In different versions it may vary. If you do not see the word “title” anywhere on those lines then doing a search for “title” should yield your results.
You should see something like this:
if ((imageLink.rel == ‘lightbox’)){
// if image is NOT part of a set, add single image to imageArray
this.imageArray.push([imageLink.href, imageLink.title]);
} else {
// if image is part of a set..
this.imageArray =
$$(imageLink.tagName + ‘[href][rel="' + imageLink.rel + '"]‘).
collect(function(anchor){ return [anchor.href, anchor.title]; }).
uniq();
while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
}
Simply change the attribute “title” on both of your lines to the attribute of your choice. I have even highlighted it for your convenience. Once finished you may save and exit. The next step is to edit your HTML to correspond to your new attribute. This is as easy as changing “title” to “id” in your img tag.
Your HTML tag should now look like this (if you used the ID attribute):
Image
Now you’re done. You may now use HTML in your lightbox description. However, you still have to deal with writing all that gibberish. If your images are dynamically handled by a PHP script you’ll be happy to hear that there’s a little function called “htmlentities()” that will deal with all that for you. I use the exact function in my gallery script.
If you’re unfortunate enough to be coding your gallery entirely in HTML without the help of a server side language I have created a little program that might help you out. I made it in Quickscript in fact!
Here is the source code for my little htmlentity encoding program:
if($_POST){
$code = $_POST['code'];
echo ‘Enter HTML here:
‘.$code.’
‘;
echo ‘Result:’.htmlentities($code).”;
}
else{
echo ‘
Enter HTML here:
‘;
}
You may use the program on my website by going here. If you’d like to use it on your own server you’ll need to edit the bits with my URL in it. That part was necessary to add because I was using quickscript and there was no absolute path for it to follow since it was retrieving the code from the database.
Now you are truly done! You are now free to use the HTML you encode into html entities in your Lightbox descriptions without having any nasty titles or having to use a lightbox alternative. If you have any quetions feel free to contact me.
carte visite Dec 24th, 2009
it worked just fine for me, thank you so much
K-Qha Jan 12th, 2010
I found this lightbox just a few hours before. While the v2 seems more sophisticated in some way, I prefer this one because the prototype.js’ 120k++ size seems a lil bulky for me.
The problem I have to face with this one is AJAX compatibility, since initLightbox would only work on the initial opening of the page, not when dynamic image links acquired with AJAX. I found my wayaround after taking a peek at lightbox.js. Here is the steps:
1. comment out line 285 – 295 (which perform “on-the-fly” anchor modification)
2. comment out the last line which says addLoadEvent(initLightbox); to prevent initialization (in FF it works just fine with this line uncommented but I find that IE thinks differently :p)
3. in your AJAX div area (the div u used to load AJAX content), put this line AFTER your ):
initLightbox();
4. the last one, in EVERY anchor you produced using AJAX, put this in the onClick event:
showLightbox(this);return false;
i.e:
And… voila!! Have fun with your AJAX gallery+lightbox :D
P.S: Sorry if this cheapskate trick is already posted by someone before. Just trying to share :)
K-Qha Jan 12th, 2010
Oopps… it looks like my post are being filtered out -.-”
…
Step 3: in your AJAX div area (the div u used to load AJAX content), put this line AFTER your closing div ([/div]):
[script]initLightbox();[/script]
Step 4: the last one, in EVERY anchor you produced using AJAX, put this in the onClick event:
showLightbox(this);return false;
i.e:
[a href="yourimage.jpg" onClick="showLightbox(this);return false;"][img src="thumbnail.jpg"][/a]