Latest News: (loading..)

Archived

This topic is now archived and is closed to further replies.

mattjt83

Bxgallery thumbnails missing in chrome browser

13 posts in this topic

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?

BeckyLiu likes this

Share this post


Link to post
Share on other sites

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.

burt and NodsDorf like this

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@@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?

Share this post


Link to post
Share on other sites

Try this, just for testing

 

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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());

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites