jQuery Lightbox Version 0.4
Filed in: javascript, jquery Add comments
NOTE: This is an older release. Version 0.5 has been released, and it acts better as a true jQuery plugin. It is recommended that you download Version 0.5 to get all of the new improvements.
New in this release:
- Added loading/close images as variables
- Added resize speed variable
- Migrated resize event into one animation, instead of two
- Removed stray console.log() calls
- Fixed updateImageList so more images can be added via AJAX calls
I believe all the bugs in this release should be fixed. It should operate fine in place of the original lightbox.js without any real problems. I’d appreciate if you could leave a comment with notes of any problems you have, so this can be cleared up quickly.
Come and get it!
Cheers!
September 29th, 2007 at 3:57 am
Hi there,
thanks for this release. Essentially, it seems to work quite nicely. However, v0.4 of the jQuery Lightbox is not compatible with jQuery v1.1.4, which is the default version shipped with Wordpress 2.3. If it is not too much work, it would be nice to have it backward compatible in order to ease migration for all those WP users out there.
And I don’t really like the resizing as a single animation. I’d appreciate to have it configurable through a variable whether to have the original behaviour or the new one. I guess most of the folks intending to use this great script appreciate the look of the old Lightbox but hate the bloated Prototype/Scriptaculous lib. Hence, it would be nice to have a clone that is as close to the original as possible…
What about renaming it using the usual jQuery plugin naming conventions to: “jquery.lightbox.js”?
Finally, a packed/minified version would be nice to have.
Cheers,
Torben
October 1st, 2007 at 2:59 am
Can you tell me how to use updateImageList because I don’t found it in lighbox .js
October 2nd, 2007 at 1:33 am
Warren, after a quick diff of 0.4 to the latest development snapshot of jLightbox module, it seems that you still haven’t ‘upgraded’ your version. As mentioned before, the version hosted on Drupal.org contains several bugfixes. Additionally, the code has been fixed to allow javascript compression and, of course, there’s already a packed version of the script.
See the changelog: http://cvs.drupal.org/viewvc.py/drupal/contributions/modules/jlightbox/CHANGELOG.txt?revision=1.4&view=markup&pathrev=HEAD
As you can see, development is moving straight forward. It would be great if we could somehow join forces.
greetings,
Daniel
October 2nd, 2007 at 12:14 pm
Ok, I need to use Lightbox.initialize(); instead of updateImageList(), ins’t it?
October 3rd, 2007 at 7:06 am
Thx!
Had a problem with the jQuery.noConflict();
A simple find&replace $ with jQuery did the trick!
October 3rd, 2007 at 5:41 pm
I was desperate to find a real alternative of Lightbox for Jquery (without thickbox…)
Thanks for your Jquery clone of lightbox, great work !!!
October 3rd, 2007 at 6:45 pm
Can you please put a link to your website in the start of the .js file.
I’ve had to search for jquery lightbox a number of times now when trying to retrack down the source
-bruce
October 4th, 2007 at 4:35 pm
Do you plan on making the plugin compatible with IE6?
October 5th, 2007 at 10:11 am
Still having issues with IE6 sadly (line 43)
October 5th, 2007 at 10:33 am
in initialize:
bug:
$(’#outerImageContainer’).css({width: ‘250px’, height: ‘250px;’});
correct:
$(’#outerImageContainer’).css({width: ‘250px’, height: ‘250px’});
now ok in ie6
now i try to pack
October 5th, 2007 at 10:40 am
now ok. also in ie6. also compressed. (sorry for english)
compressed here :http://dean.edwards.name/packer/
bugs:
1)
};//bug row 119
2)
windowHeight);//bug row 326
3)
Array(xScroll,yScroll);//bug row 344
bye max
October 5th, 2007 at 10:41 am
sorry for previous post.
bug for ie6:
in initialize:
bad:
$(’#outerImageContainer’).css({width: ‘250px’, height: ‘250px;’});
good:
$(’#outerImageContainer’).css({width: ‘250px’, height: ‘250px’});
bye max
October 8th, 2007 at 12:24 am
Thanks for your hard work, this script works great. However, it’s still causing JS errors in the IE6 and IE7 status bar. Line 43…. How can this be fixed?
October 8th, 2007 at 7:35 pm
Have you tried it with IE7? IE7 states that there is an error on the page.
Great work
October 9th, 2007 at 11:15 am
Hi,
there is a little bug in line 42, you should write height: ‘250px’ instead of height: ‘250px;’
October 11th, 2007 at 4:36 am
Hi!I was havins a bug with IE7 and my K2 Theme : My rolling archive navigation disappeared when your lightbox script was inserted in the header. Delete line 42 : $(’#outerImageContainer’).css({width: ‘250px’, height: ‘250px;’}); fixed the problem.
October 16th, 2007 at 7:47 pm
http://leandrovieira.com/projects/jquery/lightbox/
October 17th, 2007 at 4:16 pm
Juan, thanks for that annoying detail, it really helped!
October 18th, 2007 at 4:06 am
Thanks for this great work
small bug in album mode: when one of the picture does not have a legend, the previous one is displayed…
Bug:
if(Lightbox.imageArray[Lightbox.activeImage][1]){
$(’#caption’).html(Lightbox.imageArray[Lightbox.activeImage][1]).show();
}
My correction :
var captionText = ”;
if(Lightbox.imageArray[Lightbox.activeImage][1]){
captionText = Lightbox.imageArray[Lightbox.activeImage][1];
}
$(’#caption’).html(captionText).show();
October 26th, 2007 at 5:23 am
Hello,
Your script is a life savior! I found an error in version 0.4 - in line 43 there is a “,” instead of “;” which causes problems mainly on IE
I have a problem with the script. When I load page contents via jquery’s .load method (the simple ajax) your script stops working
Could you help to investigate this problem (I’m a javascript newbie)? 
Thanks in advance!
October 30th, 2007 at 6:24 pm
I’m having this weird bug when opening my site from Safari, a black curtain appears on the top of the page and a lightbox empty window is displayed in the bottom..
November 1st, 2007 at 8:26 pm
Good job and many thanks for that.
Just to improve and smoothen the resize animation a little bit, replace
$(’#outerImageContainer’).animate({width: widthNew, height: heightNew},Lightbox.resizeSpeed,’linear’,function(){
Lightbox.showImage();
});
with
$(’#outerImageContainer’).animate({height: heightNew},Lightbox.resizeSpeed,’linear’,function(){
$(’#outerImageContainer’).animate({width: widthNew},Lightbox.resizeSpeed,’linear’,function(){
Lightbox.showImage();
});
});
in the “resizeImageContainer” function.
Best regards.
November 19th, 2007 at 2:43 pm
3 things:
1. I love this plugin! Keep up the great work!
2. Is there a way to keep the image centered (or just fix the whole page) if the user tries to scroll? I messed around a little with fixed and static positioning in the css file without success.
3. In IE 6/7, the bottom nav bar width is less than the width of the box above, so it looks odd. I notice this doesn’t happen on your example site, so maybe its something I am doing wrong. I excluded all other css files on my page and still have the same problem. Any idea what this could be?
Thanks,
Nick
November 19th, 2007 at 3:05 pm
Never mind… its a doctype issue
December 1st, 2007 at 7:09 pm
Hi, I have made some needed changes to your jQuery Lightbox script to stop a always present error in IE7 (the invalid argument on line 43) error (Thomas this is probably the one you were experiencing), as well as adding a automatic url detector thing for the images (Eg. fileLoadingImage and fileBottomNavCloseImage)
I can’t seem to find your email anywhere, so I’ve uploaded it to http://www.balupton.com/sandbox/jquerylightbox.zip
Thanks, and hope you submit my changes
December 1st, 2007 at 7:11 pm
That invalid argument fix needs to be applied to the version you are hosting, I just spent a hour or two hunting it down today! And many people have reported it here.
Anyway, I have made another change. This is so it will automatically detect the url for the images, so you don’t need to specify them manually.
var Lightbox = {
baseurl:”, /* set later */
blah blah blah
initialize: function() {
// set baseurl
this.baseurl = $(’script[src$=lightbox.js]’).attr(’src’);
this.baseurl = this.baseurl.substring(0, this.baseurl.length-String(’lightbox.js’).length);
// apply baseurl
this.fileLoadingImage = this.baseurl+this.fileLoadingImage;
this.fileBottomNavCloseImage = this.baseurl+this.fileBottomNavCloseImage;
December 1st, 2007 at 7:13 pm
That invalid argument fix needs to be applied to the version you are hosting, I just spent a hour or two hunting it down today! And many people have reported it here.
Anyway, I have made another change. This is so it will automatically detect the url for the images, so you don’t need to specify them manually.
var Lightbox = {
baseurl:”, /* set later */
blah blah blah
initialize: function() {
// set baseurl
this.baseurl = $(’script[src$=lightbox.js]’).attr(’src’);
this.baseurl = this.baseurl.substring(0, this.baseurl.length-String(’lightbox.js’).length);
// apply baseurl
this.fileLoadingImage = this.baseurl+this.fileLoadingImage;
this.fileBottomNavCloseImage = this.baseurl+this.fileBottomNavCloseImage;
December 4th, 2007 at 6:14 am
Hi,
I am having the same problem as “Hedi” above. In safari i get a back box at the top and an empty lightbox area at the bottom. Any ideas on how to stop this? If i reload the page it seems to fix it, but still not good!
Thanks
December 28th, 2007 at 11:22 am
@Rob, Heidi:
Try to load “lightbox.css” before “lightbox.js”. I had the same problem with Safari and this seems to be the solution.
February 29th, 2008 at 11:55 pm
Have problem with overlay layer when It work on IE 6. Overlay cannot resize to all screem width [ on scroll area ]
March 6th, 2008 at 9:21 am
Nice Script!
How can I move the Next and Previous buttons to the bottom and the Close button to the top? I think that would be more intuitive…
Thanks,
-Roman
July 19th, 2008 at 11:16 pm
Hi,
I am looking into placing the Next and Previous buttons on the bottom and Close on the top(in the right corner). I use the 0.4 version…can anybody help me with this? Where do I change it? I am slightly familiar with javascript, so any help with where I change/place the code making it work would be greatly appreciated? Thank you
Alexandra
September 5th, 2008 at 3:39 pm
Hi,
I want to know how can I remove jQuery Lightbox Plugin (balupton edition) from this light box?
thanks
dan
January 22nd, 2009 at 8:21 am
Please, need help.
How can I load the lightbox without having to click on the image for example??