♥mattjt83 Posted February 26, 2012 Share Posted February 26, 2012 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? Matt Link to comment Share on other sites More sharing options...
♥mattjt83 Posted February 28, 2012 Author Share Posted February 28, 2012 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. Matt Link to comment Share on other sites More sharing options...
NodsDorf Posted February 28, 2012 Share Posted February 28, 2012 Nice catch, good thinking on the quick fix. Link to comment Share on other sites More sharing options...
wooshman Posted March 12, 2012 Share Posted March 12, 2012 @mattjt83 Beautiful !! Link to comment Share on other sites More sharing options...
multimixer Posted June 7, 2012 Share Posted June 7, 2012 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 My community profile | Template system for osCommerce - New: Responsive | Feedback channel Link to comment Share on other sites More sharing options...
lei_tx Posted July 5, 2012 Share Posted July 5, 2012 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 Link to comment Share on other sites More sharing options...
multimixer Posted July 5, 2012 Share Posted July 5, 2012 @@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? My community profile | Template system for osCommerce - New: Responsive | Feedback channel Link to comment Share on other sites More sharing options...
lei_tx Posted July 5, 2012 Share Posted July 5, 2012 @@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 Link to comment Share on other sites More sharing options...
multimixer Posted July 5, 2012 Share Posted July 5, 2012 Try this, just for testing #piGal ul.thumbs li, #piGal ul.thumbs li img{height: 75px !important; width: 75px !important;} My community profile | Template system for osCommerce - New: Responsive | Feedback channel Link to comment Share on other sites More sharing options...
lei_tx Posted July 5, 2012 Share Posted July 5, 2012 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! Link to comment Share on other sites More sharing options...
varina Posted July 10, 2012 Share Posted July 10, 2012 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 Running osCommerce 2.3.1 with following contributions: Category Description, CKEditor, Customer Sort, Enhanced Contact Us, Mindsparx Admin, Modular Front Page, Modular SEO Header Tags, Multiple Products Manager, Remove Unused Images, Select Product Image Directory, Shipping Cost Estimator, Simple Checkout for 2.3.1, Store Mode, Theme Switcher, UPSXML Link to comment Share on other sites More sharing options...
doc_uk Posted January 4, 2013 Share Posted January 4, 2013 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()); Link to comment Share on other sites More sharing options...
Dani Alex Posted March 30, 2013 Share Posted March 30, 2013 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.