Hi, thanks for the great plugin!

I used it for the page with embeded flash application and have some issue - flash app reloads after I watch image with lightbox.
I found that problem is in $("select, embed, object").hide();, so I commented it and everything works fine for me. I don't know the reverse side of this fix and it will be good if somebody solve it in correct way and commit to the tree.

Rather than 'loading', 'nextLink', 'overlay', etc all the class names and ids should be prefixed with 'lightbox_' or 'lb_' or similar so won't conflict with anything else using the same names.

The init start of the script doesn't respect the fileLoadingImage and fileBottomNavCloseImage vars and it keeps trying to look in the same file location instead of the direct link i give it in the start of the file on the loading of jquery

prev next not showing up

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E; MS-RTC EA 2)
Timestamp: Thu, 1 Dec 2011 13:33:49 UTC

Message: Access is denied.

Line: 287
Char: 7
Code: 0
URI: http://www.[site].co.uk/src/jquery.lightbox.js

Note: Message me for [site] and working example.

I've been asked 100 times if i've been asked once if jquery lightbox could support iframes for remote content, so I guess I should finally add it.

It would be nice if we could configure minimal image container width, it's currently fixed at 350 pixels.

The demo of jQuery lightbox works with jQuery 1.4, which is long out of date. Take a pass through the library and get compatible with jquery 1.9.

Overlay is not works under Google Chrome. The Fix is:

Change is lightbox.css (line 93)

overlay{

opacity: 0.6;
}
to

overlay{

opacity: 0.6 !important;
}
Have a nice day

When using methods like getPageSize(), it's lazy to return an array of 4 numbers. For readability, objects should be returned instead of arrays, with property names that make sense i.e.
pageSize.documentWidth
vs
pageSize[1]

Hi, just to let you know, Safari is reporting the wrong number of images.
Check:
http://www.carn-uk.com/products/stratospherhi
Click the colour boxes underneath Female / Male options
IE etc displays 1 of 2 correctly.
Safari (only) displays 1 of 4 and then displays the 2nd image 3 times.
Any ideas?

function end() { disableKeyboardNav(); $('#lightbox').hide(); $('#overlay').fadeOut(); $('select, object, embed').show(); };

Especially this part $('select, object, embed').show(); reveals select boxes that were supposed to be hidden, I commented this out for now, but I realize these items are hidden for a reason.
My suggestion would be adding a class like .ligh-box-active to the body tag
then in the css file add the lines
.lightbox-active select, .lightbox-active objext, .lightbox-active embed{display;none !important}

Picture tells everything: http://img137.imageshack.us/img137/6678/screenshot20100902at104.png

Cheers!

Hey there, one problem I've run into with all lightbox implementations is there are some images defined in the JS. It turns out the locations use a relative path so it doesn't always work in a dynamic CMS system.

One change I made to your script was to not have the js load the image. Instead, I set an element with an ID and then can use the CSS to specify the image. For example, here's the CSS changes for the loading and close links.

loadingLink

{
display: block;
width: 32px;
height: 32px;
background: transparent url(../images/loading.gif) no-repeat; /* Trick IE into showing hover */
margin: auto;
}

closeLink

{
width: 66px;
height: 22px;
background: transparent url(../images/closeLabel.gif) no-repeat; /* Trick IE into showing hover */
}

Any chance you could make it so that all the images Prev, Next, Loading, Close can be defined in the CSS and the JavaScript doesn't try to put the paths together at all.

I'd submit my changes as a patch, but I need some time to set my dev environment up with Github. I'm a Git noob.

I've seen a problem with resize of large horizontal images when both sizes exceeds document dimensions. Infact at line 202 of version 0.5 the code is executed only if there isn't a height overflow.
My solution is to consider the diagonal as discriminant. Es.: (rows from 197 to 206)

var dI = initialPageWidth/initialPageHeight;
var dP = imgPreloader.width/imgPreloader.height;

if((imgPreloader.height > initialPageHeight) || (imgPreloader.width > initialPageWidth)){
    if(dI > dP){
        newWidth = parseInt((initialPageHeight/imgPreloader.height) * imgPreloader.width);
        newHeight = initialPageHeight;
    } else {
        newHeight = parseInt((initialPageWidth/imgPreloader.width) * imgPreloader.height);
        newWidth = initialPageWidth;
    }
}

This seems to work for me.

Bye, LoP

This is because enableKeyboardNav() is only called when more than one image (called from updateNav())

When are you going to update the Download package to maybe a .6 or something. The .5 is dated and I see you have made changes since that time.

Currently, the height and width of the #lightboxImage and #outerImageContainer are set based on the page height/width and image height/width. Sometimes its producing the following result:

I did set the maximum height and width forcefully (line 233, 234):
newWidth = newWidth > 800 ? 800 : newWidth; newHeight = newHeight > 600 ? 600 : newHeight;

But it'd be nice if this issue would be solved with a better approach.

Try this code:

<a href="http://farm2.static.flickr.com/1036/1092054380_6040129664_d.jpg" class="lightbox-2" rel="flowers" title="Photo by Warren Krewenki">
<img src="http://farm2.static.flickr.com/1036/1092054380_6040129664_t_d.jpg" height="40" alt="" /></a>

<a href="http://farm2.static.flickr.com/1257/1092054504_0857149719_d.jpg" class="lightbox-2" rel="flowers" title="">
<img src="http://farm2.static.flickr.com/1257/1092054504_0857149719_t_d.jpg" height="40" alt="" /></a>

The second image has blank title. But when you click on the first image then on next button the caption will be "Photo by Warren Krewenki" and not blank.

I didn't see the point in forking this for a little fix, but here's the issue:

a#prevLink:hover, a#prevLink:visited:hover { background: url(../src/prev.gif) left 50% no-repeat; }
a#nextLink:hover, a#nextLink:visited:hover { background: url(../src/next.gif) right 50% no-repeat; }

Basically, these hovers don't always work unless you tell it it's an anchor.

These are the original lines:

prevLink:hover, #prevLink:visited:hover { background: url(../images/prev.gif) left 50% no-repeat; }

nextLink:hover, #nextLink:visited:hover { background: url(../images/next.gif) right 50% no-repeat; }

So you want:

a#prevLink:hover, a#prevLink:visited:hover { background: url(../images/prev.gif) left 50% no-repeat; }
a#nextLink:hover, a#nextLink:visited:hover { background: url(../images/next.gif) right 50% no-repeat; }

The index.html mentions the references to closelabel.gif and loading.gif as being near the top. They're near the bottom :). It'd be helpful to have those pulled out and moved to the top for easy reference/modification as needed. Thanks!

This might be tricky, based on older browser support, but it would make transitions smoother.