background top

LightWindow IE6 bug – image size (resizeTo)

September 5th, 2008

LightWindow is an advanced “lightbox” JavaScript component that can be used for a wide range of media. We were simply trying to use it as an image gallery.  What we ran into is that every once in a while when clicking on a link to trigger the slideshow, LightWindow would fail to size the image properly in IE6.  This only seemed to happen in IE6 though reading through others experiences it seems like it may happen in IE7 as well although we never came across any problems with IE7.

When you run into a problem with someone elses tool it can be very difficult to solve the problem.  After an exhaustive search we were able to find the solution posted on a german blog at www.trilodge.de.  Although we don’t speak german it was obvious this was the solution to our problem.

Although this solution is already available from www.trilodge.de we know this will help any other developers who run into this issue as its hard to find the german solution being the blog is in another language.

The problem happens in the image loader.  It seems to think the image has loaded when it has not.  Therefore it is unable to get an accurate size.

To fix replace:

// We have to do this instead of .onload
this.checkImage[i] = new PeriodicalExecuter(function(i) {
	if (!(typeof $('lightwindow_image_'+i).naturalWidth != "undefined" && $('lightwindow_image_'+i).naturalWidth == 0)) {
 
		this.checkImage[i].stop();
 
		var imageHeight = $('lightwindow_image_'+i).getHeight();
		if (imageHeight > this.resizeTo.height) {
			this.resizeTo.height = imageHeight;
		}
		this.resizeTo.width += $('lightwindow_image_'+i).getWidth();
		this.imageCount--;
 
		$('lightwindow_image_'+i).setStyle({
			height: '100%', width: '100%'
		});
 
		if (this.imageCount == 0) {
			this._processWindow();
		}
	}
 
}.bind(this, i), 1);

With this:

// We have to do this instead of .onload
var ie = (document.all)?1:0;
this.checkImage[i] = new PeriodicalExecuter(function(i) {
	if(ie){ //THE BROWSER IS IE
		if ( $('lightwindow_image_'+i).complete && !(typeof $('lightwindow_image_'+i).naturalWidth != "undefined" && $('lightwindow_image_'+i).naturalWidth == 0)) {
			this.checkImage[i].stop();
 
			var imageHeight = $('lightwindow_image_'+i).getHeight();
			if (imageHeight > this.resizeTo.height) {
				this.resizeTo.height = imageHeight;
			}
			this.resizeTo.width += $('lightwindow_image_'+i).getWidth();
			this.imageCount--;
 
			$('lightwindow_image_'+i).setStyle({
				height: '100%', width: '100%'
			});
 
			if (this.imageCount == 0) {
				this._processWindow();
			}
			//alert('IE has been detected')
		}
	}
	else
	{//NOT IE, PROBABLY FF, OPERA, OTHER
		//this line works for all other browsers
		if ($('lightwindow_image_'+i).complete && !(typeof $('lightwindow_image_'+i).naturalWidth != "undefined" && $('lightwindow_image_'+i).naturalWidth == 0)) {
 
			this.checkImage[i].stop();
 
			var imageHeight = $('lightwindow_image_'+i).getHeight();
			if (imageHeight > this.resizeTo.height) {
				this.resizeTo.height = imageHeight;
			}
			this.resizeTo.width += $('lightwindow_image_'+i).getWidth();
			this.imageCount--;
 
			$('lightwindow_image_'+i).setStyle({
				height: '100%', width: '100%'
			});
 
			if (this.imageCount == 0) {
				this._processWindow();
			}
		}
	}
 
}.bind(this, i), 1);

If you have any other suggestions or ran into any other problems feel free to post them below and we would be happy to update the post to help others.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • TwitThis

Jeremy

Jeremy has a love hate relationship with computers , and in contemplative moments he has been known to muse on the fact that his life’s work is in reality a long string of 1’s and 0’s. When he’s not banging code into his keyboard at work, Jeremy is banging out beats for his band “Sad Skelton” that you can check out at www.sadskelton.com.

This entry was posted on Friday, September 5th, 2008 at 9:42 am and is filed under Devit!. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

8 Responses to “LightWindow IE6 bug – image size (resizeTo)”

  1. john Says:
    September 7th, 2008 at 7:33 pm

    be careful for them &s and >s – they got converted in the post

  2. Jeremy Says:
    September 8th, 2008 at 9:39 am

    Sorry about that. I’ve corrected them now. That’s something to always watch out for with these WYSIWYG editors. Had to change that stuff in the code view.

  3. Marc Says:
    September 8th, 2008 at 12:42 pm

    This opens in a new window full size and not in lightwindow. Is there anything I can do to make it open in a lightwindow?

  4. leon Says:
    July 15th, 2009 at 6:28 pm

    thanks for this – this bug has been following me like a dog.

    BTW you still have & and > in your post code

    Marc you just need to co a find and replace on & = & and > = > and it will work again

  5. Matthew Says:
    September 4th, 2009 at 4:15 pm

    Fantastic. thank you for this fix, I was pulling my hair out (what’s left of it) looking through the script to find this. Also yes your & and > are still not showing up correctly

  6. IK Says:
    January 5th, 2010 at 12:37 am

    Thank you, saved my day.
    BTW, the problem is still there with IE 8 as well.

  7. phobos Says:
    March 4th, 2010 at 9:18 am

    I wonder whether the code works, because the if and else statement are the same! Moreover, you’ve duplicated the code for nothing! It would be better to write:
    var imgLoaded;
    if(ie){
    imgLoaded = $(‘lightwindow_image_’+i).complete;
    }else{
    imgLoaded = (!(typeof $(‘lightwindow_image_’+i).naturalWidth != “undefined” && $(‘lightwindow_image_’+i).naturalWidth == 0));
    }
    if(imgLoaded){
    this.checkImage[i].stop();

    var imageHeight = $(‘lightwindow_image_’+i).getHeight();
    if (imageHeight > this.resizeTo.height) {
    this.resizeTo.height = imageHeight;
    }
    this.resizeTo.width += $(‘lightwindow_image_’+i).getWidth();
    this.imageCount–;

    $(‘lightwindow_image_’+i).setStyle({height: ‘100%’, width: ‘100%’});

    if (this.imageCount == 0) {this._processWindow();}
    }

  8. phobos Says:
    March 4th, 2010 at 9:21 am

    “this.imageCount–;” should be “this.imageCount–-;” (two times minus! Seems that your website has eaten it.)

Leave a Reply