Grow your CSS skills. Land your dream job.

Slideshow not working in toggle tabs

  • # January 21, 2013 at 4:16 pm

    Hi guys,

    Please take a look at a site I’m developing, you will see I am making use of the slideshow plugin flexslider. You will also see that the site has multiple tabs. If you look at the news section you will see the articles each have a slideshow, these work fine when the tab is open by default, but if the article tab is closed by default and then opened, then the slideshow images are all small and not working correctly. Any help?

    http://so-sorry.ch/

    Many thanks,
    Aaron

    # January 21, 2013 at 4:59 pm

    What you might want to try is to wait to initialize the slider until after the window is loaded. It looks like the widths of the list items in the slider are programmatically calculated. That calculation could be wrong if the image isn’t done loading yet. So it’s best to wait until it is loaded.

    $(window).load(function() {
    // load slider here
    });

    Or, make sure all those images have proper width/height attributes on them so the slider list items can be calculated correctly right away.

    # January 21, 2013 at 7:59 pm

    Try to define width and height on each image:

    <img width="600" height="337" src="...">

    Or, via CSS:

    .episode-video img {
    width:600px;
    height:337px;
    }
    # January 22, 2013 at 4:31 pm

    The problem is it’s a responsive layout, so there is no fixed width on the images only max-width: 100%

    # January 26, 2013 at 6:48 am

    Hey Aaron,

    when i checked your website, you seemed to have removed the slider. so can’t really pinpoint the problem.

    but what i think is happening is, when the tabs are hidden, the images inside it don’t get loaded

    http://jsfiddle.net/TFeVJ/

    so the image widths wouldn’t be calculated on windows load and hence the slide show doesn’t work

    but when the tab is open, the images would be loaded on windows load.

    what i would suggest is you can initialize the slide show once the tab is opened or use a script which checks if all the images inside the dom are loaded before firing a callback.

    i’ve made one for my personal site, you can use that if it fits your bill,

    https://github.com/hackerone/dynload

    # March 11, 2013 at 5:27 am

    Hey Aaron,

    Your problem might be the fact your using max-width: 100%.
    I have only had problems declaring max-width: 100%. Instead try doing something like this.

    .class {
    max-width: 960px; /** Put in whatever is the largest width it wil ever need to be **/
    width: 100%;
    }

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".