Hi,

If the slideshow images are a bit heavy to load, they show up one below the other before javascript kicks in to fix them.

The solution is to:

1) In styles.slideshow.css, set .flexslider height to something a bit higher than the size of the images:

.flexslider {
  height: 200px;
}

2) Hide the images while they load:

.flexslider img {
  display: none;
}

3) In slider.options.js, show the images after document is ready:

$('.flexslider img').css('display', 'block !important');
$('.flexslider img').show();

Hope this helps!

Kind regards,
Nick

Comments

david_p’s picture

david_p commented
Version: 7.x-3.x-dev » 7.x-3.0-rc1
Status: Closed (fixed) » Active

Hi Nick,

I tested this on the rc1 version of AT Commerce, but didn't work. The first image on the slide is displayed right, but the second one doesn't show up, leaving just the empty space of the header. It seems that afterward images are displayed alternately (one shows up, one doesn't).

Any thoughts, please let me know; I have no idea how to fix this. Thanks for taking the time to help us out!

-David

Anonymous’s picture

Anonymous (not verified) commented

This works for me in Chrome and Firefox (when I set the height one pixel above the actual slide show image size). The images no longer stack and the slideshow starts after the images have been loaded.

However, in IE 9 I get no images at all. Just a blank space of the correct size for the slideshow.

(Well, I also have the problem in IE9 that without this code the slideshow images stack above each other and the slideshow never starts. I can't see what I'm doing wrong since with AT Commerce 7.x-2 the slideshow was working in all browsers, including IE9. I guess this needs to go to another thread.)

Anyone have any idea what might be wrong?

Thanks!

Anonymous’s picture

Anonymous (not verified) commented
Issue summary: View changes

css => js