3
Vote

Main image isn't displayed in IE8

description

Hi,

great gallery. But I can't get it running in IE8. Can you take a look at http://bonsoft.easysoftware.cz/index.php?option=com_content&view=category&layout=blog&id=19&Itemid=205#ad-image-0 ?

IE console doesn't show any error. I tried to delete all parameters, but with no result.

Anybody know why?

comments

escope wrote Jun 12, 2012 at 1:14 PM

I just found out, that there isn't conflict with other JS, but with CSS framework BootStrap...

bjornbak wrote Jun 14, 2012 at 4:37 PM

I have the same problem.

I have discovered that the problem is that image_width and image_height are both 0 when _getContainedImageSize: function(image_width, image_height) is called.

I've made changed the method to the following to patch the problem:
_getContainedImageSize: function(image_width, image_height) {
  if(image_height > this.image_wrapper_height) {
    var ratio = image_width / image_height;
    image_height = this.image_wrapper_height;
    image_width = this.image_wrapper_height * ratio;
  };
  if(image_width > this.image_wrapper_width) {
    var ratio = image_height / image_width;
    image_width = this.image_wrapper_width;
    image_height = this.image_wrapper_width * ratio;
  };
    if (image_width == 0) {
        image_width = this.image_wrapper.width();
    }
    if (image_height == 0) {
        image_height = this.image_wrapper.height();
    }

  return {width: image_width, height: image_height};
},
This way if 0 size is returned the image is scaled to the size of ad-image-wrapper non-proportional but at least it's are shown.

I don't know why the size is 0 in the first place but our partner uses a heavy collection of drupal responsive css.

bjornbak wrote Jun 14, 2012 at 4:40 PM

Our partner uses the css style max-width: 100% a lot I suspect that there might be a connection..

PhilippeOVH wrote Jan 16, 2013 at 2:21 PM

Bug found in preloadImage method:
Replace line:
image.size = { width: this.width, height: this.height };
By:
image.size = { width: $(this).width(), height: $(this).height() };
To fix IE bug (with IE9 for me)

madriverweb wrote May 17, 2013 at 6:00 AM

PhilippeOVH, I experienced this same problem with IE8. (I do not have a computer with IE9 and I can't upgrade due to another program needing IE8.) Your fix seemed to work with the slide show, but not reliably when thumbnails are clicked. In some cases the main image appeared at 28px wide. I could not discern a pattern, and once refreshed, they cached at the appropriate size. Can you duplicate this condition and recommend a fix, perhaps in the CSS if not in the js? We unfortunately didn't notice until our site was launched and everything works fine in Chrome and Firefox. As in a comment above, we use responsive code and suspect that may be related. The problem occurs on this and other pages of the Gallery, http://susancsiegel.com/artwork.php?keyword=watercolors#ad-image-0.

vchaoho wrote May 31, 2013 at 4:30 AM

i have the same problem,PhilippeOVH's solution works,.ie8 & 9 is fine

DeBol wrote Jan 8, 2014 at 9:53 AM

I've found a perfect fix for the issue:

In jquery.ad-gallery.js

replace this line:
var size = this._getContainedImageSize(image.size.width, image.size.height);

with this one:
var size = this._getContainedImageSize(img.width(), img.height());

This will solve the problem with the main image loaded very small for the first time mentioned by vchaoho