CODEWITHSUNDEEP
orbitzurb-foundation-5
Jarg7
Jarg7

Reputation: 1628

zurb foundation orbital bug?

dunno whats going on with my image slider under the 'support' tab section its not showing up correctly, its cutting half of it off and looking weird. The main image slider is good. But, when you inspect element all of a sudden the 'support' orbital image slider looks normal. This is with the foundation framework.

here's a link to see the bug: http://www.omegadesignla.com/virtual/

and some html:

<div class="content" id="panel6">
   <div class="row">
       <div class="large-4 columns">
           <h3> OFLVS Contact Info:</h3>

<ul>
   <li>Student Support</li>

    <li>Parent Support</li>

    <li>Support links and resources</li>
</ul>

       </div>
       <div class="large-8 columns">
          <ul class="example-orbit" data-orbit>
              <li>
                <img src="imgs/flash3.jpg" alt="slide 1" />
                <div class="orbit-caption">
                  Caption One.
                </div>
              </li>
              <li>
                <img src="imgs/flash12.jpg" alt="slide 2" />
                <div class="orbit-caption">
                  Caption Two.
                </div>
              </li>
              <li>
                <img src="imgs/flash9.jpg" alt="slide 3" />
                <div class="orbit-caption">
                  Caption Three.
                </div>
              </li>
        </ul>
       </div>
   </div>
   <a href="#" class="button info round">Learn More</a>
   <a href="#" class="button success round">Sign Up</a>
  </div>

javascript:

$(document).foundation({
    tab: {
      callback : function (tab) {
        $(document).foundation('reflow');
      }
    },

  orbit: {
      pause_on_hover: false,
      timer_speed: 6000
  }

});

Upvotes: 0

Views: 300

Answers (1)

Pixelsmith
Pixelsmith

Reputation: 260

I think your error stems from the fact that the orbit slider is in the tab content section. I had a similar error with a range slider in a tab section.

Try reflowing the javascript in a JS file with a tab callback like so: 

$(document).foundation({
    tab: {
      callback : function (tab) {
        $(document).foundation('orbit', 'reflow');
      }
    }
  });

EDIT: I've corrected my answer and added a working fiddle.

Upvotes: 1

Related Questions