Jump to content

- - - - -

Bxgallery thumbnails missing in chrome browser


This topic has been archived. This means that you cannot reply to this topic.
12 replies to this topic

#1   mattjt83

  • Members
  • 519 posts

Posted 26 February 2012 - 00:37

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?


#2   mattjt83

  • Members
  • 519 posts

Posted 28 February 2012 - 03:55

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.


#3   NodsDorf

  • Members
  • 1,285 posts

Posted 28 February 2012 - 04:19

Nice catch, good thinking on the quick fix.

#4   wooshman

  • Members
  • 19 posts

Posted 12 March 2012 - 13:35


Beautiful !!

#5   multimixer


    Lemons or Melons ?

  • Partner
  • 4,752 posts

Posted 07 June 2012 - 05:09

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

#6   lei_tx

  • Members
  • 21 posts

Posted 05 July 2012 - 02:51

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

#7   multimixer


    Lemons or Melons ?

  • Partner
  • 4,752 posts

Posted 05 July 2012 - 04:04


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?

#8   lei_tx

  • Members
  • 21 posts

Posted 05 July 2012 - 14:29


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

#9   multimixer


    Lemons or Melons ?

  • Partner
  • 4,752 posts

Posted 05 July 2012 - 14:36

Try this, just for testing

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

#10   lei_tx

  • Members
  • 21 posts

Posted 05 July 2012 - 17:30

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!

Edited by lei_tx, 05 July 2012 - 17:30.

#11   varina

  • Members
  • 37 posts

Posted 10 July 2012 - 22:53

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?


#12   doc_uk

  • Members
  • 12 posts

Posted 04 January 2013 - 00:50

Try this, Varina

In the BXgallery js, find:-

Try changing the last line to :-

#13   Dani Alex

Dani Alex
  • Members
  • 4 posts

Posted 30 March 2013 - 19:27

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


and replace with:

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

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