Bxgallery thumbnails missing in chrome browser

[♥mattjt83]

Has anyone else noticed that if their product has multiple images (using osC 2.3.1) that the thumbnails are not visible when viewing a product if you are using the Chrome browser? You can still cycle through them if you click the main image though. Any fixes going around that anyone knows about?

[♥mattjt83]

Apparently the <li> that are generated by the script that hold the thumbnail images use the thumbnail image to determine their own size. In the Chrome browser those <li> have a height of 0px so everything gets messed up. I added this to my stylesheet and now all is well again:

 

ul.thumbs img {height:50px;}

 

Obviously something needs to be properly fixed in the bxgallery script or chrome itself but this works for now.

[NodsDorf]

Nice catch, good thinking on the quick fix.

[wooshman]

@mattjt83

 

 

Beautiful !!

[multimixer]

I had a case where the new manual height definition got overwritten by the inline "height:0" for chrome, so I had to make the selector stronger, add the height to the "li" and use !important, like this

 

#piGal ul.thumbs li{height: 91px !important;}

 

It looks like not all chrome browsers behave the same way

[lei_tx]

it works on IE8 and FF13.0.1, but not chrome.

I'm using Google Chrome 20.0.1132.47 m, both of above methods not work. anybody can offer a better solution?

 

 

p.s., i'm using WIN7

[multimixer]

@@lei_tx

 

Are you sure that you apply the css to the correct element? I mean, in case you have a template or your html is different for some reason, you could be shooting to nothing

 

Als, other posibility, there are some other rules overwriting your css

 

Do you have a url to see?

[lei_tx]

@@multimixer

 

yea stylesheet.css here it is http://www.chinahcs.com/stylesheet.css

search piGal and you will see newly added code #piGal ul.thumbs li{height: 75px !important}

 

Thanks for your help

[multimixer]

Try this, just for testing

 

#piGal ul.thumbs li, #piGal ul.thumbs li img{height: 75px !important; width: 75px !important;}

[lei_tx]

oh... I didn't change anything after did this: #piGal ul.thumbs li{height: 75px !important} but it works now.

I just accessed http://www.chinahcs.com/stylesheet.css from Chrome browser directly.

it indeed flushed the browser cache in this way, I guess.

before that, I used ctrl+F5, tryed many times. i guess ctrl+F5 does not really works sometimes.

 

Thank you multimixer and sorry for the trouble I brought to u.

 

Best wishes!

[varina]

There must have been some sort of change in Chrome because a few months ago my gallery display was working fine.

 

Is there a way to make the height float? Our thumbnail heights vary (we keep our widths the same).

Right now I have it set for 200px so the large ones don't over lap, but that puts a lot of blank space in between the smaller ones, so it looks odd.

Anyone have any ideas on how I could fix that?

 

Thanks

-Varina

[doc_uk]

Try this, Varina

 

In the BXgallery js, find:-

 $this.css({
'float':'left',
'cursor':'pointer'
});
$this.height($img.height());

 

Try changing the last line to :-

//$this.height($img.height());

[Dani Alex]

For thumbnails to display correctly cross-browser find in jquery.bxGallery.1.1.min.js:

 

css({'float':'left','cursor':'pointer'})

 

and replace with:

 

css({'cursor':'pointer', 'display':'inline'})

 

Tested in latest versions of: Internet Explorer, Firefox, Google Chrome, Opera and Safari