CODEWITHSUNDEEP
javascriptjquerycsszurb-foundation
Scully
Scully

Reputation: 1058

Orbit slider not loading on page refresh?

I'm having an issue with an Orbit slideshow, part of ZURB's Foundation.

http://visiondemo.com.au/tmp/

If you click on the header logo or land on the homepage by clicking a link, the slideshow loads perfectly. No issues. However, if you hit refresh, it's missing.

Also, when the page is refreshed and the slideshow is missing, resizing the window makes it magically appear.

Any ideas how I can get it loading at all times?

Cheers.

Upvotes: 1

Views: 1335

Answers (1)

ryeballar
ryeballar

Reputation: 30098

Hmm this answer will be quite a hacky way of doing things but I think it'll work for you in a way or another..

Firstly to fix the height: 0px problem in the data-orbit. Since you have chosen the content of your orbit to be an actual caption as well then, try to add this in a <style> tag or in your style.css. (#note this is only for the medium-up block only, supply your height for the small block).

.slideshow.show-for-medium-up > li {
    height: 421px !important;
}

now thats already good and working, you'll see your orbit now.. apparently another problem would appear. It would display the orbit before the content's .orbit-caption finishes styling the list. So append this small fix to your style.css

/* Orbit Fix */

    ul[data-orbit] {
        margin: 0;
        padding-left: 0;
        list-style-type: none;
    }

    /* initially, hide all slides... */
    ul[data-orbit] li,
    ul[data-orbit] .orbit-caption {
        display: none;
    }

    /* ...except for the first one */
    ul[data-orbit] li:first-child { display: block; }

    /* show slides once .orbit-container is loaded */
    .orbit-container ul[data-orbit] li,
    .orbit-container ul[data-orbit] .orbit-caption {
        display: block;
    }

UPDATE: I think thats because you show the image only when the screen is small, I recommend adding this, 

.slideshow.show-for-small-only img { 
     /* change the img height here */ 
     height: 200px; /* Change this as you see fit */
}

Upvotes: 3

Related Questions