jQuery Lightbox Version 0.3
NOTE: jQuery Lightbox v0.3 is a very old release. I’ve recently released version 0.5 and highly suggest you download that release as it fixes many bugs that exist in v0.3 as well as introduces a host of new features.
Nearly 50 days after the last release, jQuery Lightbox has made it to v0.3, a stable version which should be ready to be used anywhere you’d like. There haven’t been any major changes to the codebase, mainly just bug fixes. Here’s a brief list of issues that have been addressed:
- Overlay image wasn’t properly resizing with the browser window.Fixed by changing the width of #overlay from a pixel width, to simply 100%
- Clicking close would generate scrollbars in Firefox V2.0.0.5Fixed by modifying the style associated with the close button.
- Clicking the “Next” and “Previous” buttons could render the lightbox in a constant state of loading.Issue diagnosed as jQuery firing multiple instances of the .click() method on mouse down. Workaround was to introduce an “in progress” variable to all transitions, preventing multiple requests to load an image. I’m not 100% happy with this method, but it works well for now.
- Browsing through images of similar sizes could cause the lightbox to not show a new image.Fixed by removing conditional resizing of the lightbox. Now hDiff and wDiff are disregarded attempts to resize the box. A horizontal and a vertical resize are requested on each image load. This should have no negative effects on image galleries.
- Several other small bug fixes surrounding CSS.
With this, jQuery Lightbox should now act as a fully functional lightbox replacement. The next steps in the process will be to rewrite portions of the code with jQuery’s “Write less, do more” philosophy. On top of that, there have been several requests to add “Slideshow” functionality.
I don’t think a slideshow will ever make it into the codebase, unfortunately. This script was written to be a lightbox replacement, and I think it does that rather well. Writing a script to work alongside of this could be done in a few simple lines of jQuery, and I may even provide them somewhere in the future, but they won’t be in the main lightbox.js codebase.
As always, comments are welcome, and encouraged. Please let me know any experience you may have with this, as the drive is on now to really get this written as some solid jQuery code.
Cheers!
Download jquery-lightbox-0.3.zip
September 18th, 2007 at 7:46 am
Hello warren,
In your 0.3 version I see that you declare fileLoadingImage and fileBottomNavCloseImage but later on in your initialize method inside lightbox.js (line 35) you are using hardcoded values for these two images.
Should you use the already declared variables…?
Just bring it to your attention.
Stratos
September 18th, 2007 at 6:33 pm
[…] to beat a dead horse, but it’s been figured out. Thanks man! jQuery + Lightbox = jQuery Lightbox Version 0.3. It was brought to my attention yesterday by Warren himself, and I would appreciate it if you took […]
September 18th, 2007 at 8:56 pm
Hi there,
I’ll publish a Wordpress plugin for the jqLightbox next week or so. However, I have another request. I would like to apply the lightbox on images that are AJAXed from the server. Since these images are inserted later in the tree, the initialize() method does not catch them initially.
For the original Lightbox I used to call myLightbox.updateImageList(). For jqLightbox, calling Lightbox.initialize() however breaks the script since the DIVs are appended on each call.
ould you maybe provide a separate method for updating the image list.
Another suggestion would be to use the jQ Dimensions plugin for e.g. getPageSize().
Moreover, a unique name for your jQuery-based Lightbox would be nice in order to get people finding it via Google.
Cheers,
Torben
September 18th, 2007 at 10:31 pm
Sad but true - all of these issues except the #overlay resizing issue have been solved in the past two days since my last post in the v0.2 thread. We’ve also found a solution to make prev/next links working without the need for a additional variable. You should definitely have a look at it - either download a complete copy including the Drupal module from http://drupal.org/project/jlightbox or retrieve it via CVS form http://cvs.drupal.org/viewvc.py/drupal/contributions/modules/jlightbox/?pathrev=DRUPAL-5
Regarding the current script for Drupal, we’ll try to keep it as much comparable as possible to the original Lightbox script by Lokesh Dakar. So Torben’s updateImageList() issue should actually be solved, too. The hard-coded image file paths are fixed, too. When all bugs are fixed, there will be time to rewrite the script to make use of even more jQuery functions.
It would be great, if we could join forces for upcoming versions. I’d like to invite everyone to sign-up on Drupal.org and post bugs and patches to the jLightbox issue queue - even if you are not (yet
using Drupal at all.
September 19th, 2007 at 1:30 pm
Hi !
First of all, thanks for doing this, as I’m pretty sure I couldn’t have done it myself, since I really needed a jquery version of the LightBox for a website I’m creating for a client.
But I have a problem with IE6 (not tested in IE7 yet) :
1. I have an error signaled in the status bar : line 41, car 3 : “non valid argument” ?
2. Then it sort of breaks my page and (apparently) prevents my other js to be loaded, which means that some of my scripts don’t work anymore and my page is broken…
=> I have sort of solved this by calling the lightbox in the last position, but then I have two other bugs :
1. line 116, car 5 : “console is undefined” : as far as I remember, “console”
doesn’t exist in IE… ?
2. it won’t load the big version of my picture to which I’m linking… (it does the same in Opera)
Any idea how to solve these ?
I don’t want to user thickbox, as it doesn’t do exactly the same thing and my client absolutely loves LightBox…
The page were the bugs happen :
http://www.pouipouidesign.net/test/cba/detailcas.htm
Thanks a bunch in advance !!
Marie
September 19th, 2007 at 1:39 pm
Ok, so, I did a bit more testing :
If I comment line 116 [console.log(Lightbox.activeImage);], it loads the image (both in IE and Opera) but the line 41, car 3 bug comes back (”non valid argument”)…
Is the line 116 mandatory ?
How can I get the line 41 bug to disapear and the whole thing to work properly ?
Thanks again !
Marie
September 20th, 2007 at 5:17 am
Hi,
I had to remove the console.log call in the changeImage function to get it working with Camino and Firefox 2.0.0.7…..
Never the less great stuff !!!
Greetings,
paradoxix
September 22nd, 2007 at 2:28 pm
Works great in modern browsers, but I found a javascript error in IE 6 that is undefined console. Also there is some wonkyness with the actual side bar scroller during loading and transitioning between images. It moves the browser’s scroll bar in and out of the page. That’s the only bug I can find in this version.
September 24th, 2007 at 11:31 am
Looks great! I did a quick modification of your code to move the prev/next buttons to the bottom like http://www.phatfusion.net/lightbox/index.htm (which is written in mootools).
You can grab my modifications from http://www.borism.net/code/lightbox/lightbox.zip
September 25th, 2007 at 10:20 am
Congratulation for this lovely jQuery plugin !
I was waiting for this, good job
Is it possible to have a packed version ?
I tried using http://dean.edwards.name/packer/ without success…
September 28th, 2007 at 8:37 am
Hello!
I’ve seen your post on the getk2 forum for this adaptation of lightbox. I try to install it on my own k2 installation on my blog.
I’ve found some problems :
1) If I want to use the jquery version that come with k2, I’ve a js error
To make it work, I’ve to change in lightbox.js all “$” by “jQuery”. Don’t know why… Is there other solution?
2) The fileLoadingImage and fileBottomNavCloseImage (l16 and 17) don’t change a damn thing like Stratos Gerakakis said.
3) It would be better if the page would’nt go to top when hiding flash objects. The original lightbox hide the flash objects but leave a blank so the page doesn’t move.
September 28th, 2007 at 9:16 am
And I have the same problem that I have initially with the prototype and scripatculous version and that have been solved before I test the jQrery version. I think I will kept the scriptaculous version until this have been fixed.
October 4th, 2007 at 5:34 am
I’ve found the error coming in IE.
on line 43
$(’#outerImageContainer’).css({width: ‘250px’, height: ‘250px;’});
just remove the “;” from inside the css declaration, and get:
$(’#outerImageContainer’).css({width: ‘250px’, height: ‘250px’});
That was choking all IE
October 18th, 2007 at 2:25 am
Does not work in IE6 or 7 when you use anything other than
‘$(’#gallery a’).lightBox();’
For example:
‘$(’a.lightbox’).lightBox();
throws this errors:
Line 79: settings.imageArray[…].0 is null or not an object.
October 18th, 2007 at 2:51 am
I’ve found the problem.
The problem occured in IE 6/7 when there was only one image present.
Not sure if this is the best way, but it fixes the error.
Line 79.
Here is the fix:
// In some cases IE get the full path and in another get just the relative path. So, use match to verify is better instead the operator !=
while ( !settings.imageArray[settings.activeImage][0].match(objClicked.getAttribute(’href’))) {
settings.activeImage++;
if(settings.imageArray.length == settings.activeImage)
break;
}
if(settings.imageArray.length == 1)
settings.activeImage = 0;