4

I'm working with Foundation 4 framework. I've been trying to include the Orbit slide into my website, but I can't seem to get it to work.

So I followed the steps in Foundation documentation. I've included all necessary scripts

<script type="text/javascript" src="js/vendor/custom.modernizr.js"></script>
<script type="text/javascript" src="js/foundation.min.js"></script>
<script type="text/javascript" src="js/foundation/foundation.orbit.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
       $(document).foundation();
</script>

Then I tried to add a simple slideshow

<ul data-orbit>
       <li>
              Test1
       </li>
       <li>
              Test2
       </li>
       <li>
              Test3
       </li>
</ul>

But, instead of generating a slideshow all I get is an unnumbered list. I triple checked to make sure I didn't misspell anything. Here's an example of what I get.

Gregor Menih
  • 5,036
  • 14
  • 44
  • 66
  • Did you ever solve this problem? I'm having the same issue, only difference is my issue is occurring in the context of WordPress + Foundation. – vtacreative May 09 '13 at 18:05
  • I have! The answer lies in the answer I picked. I placed modernizr **only** in the tag while the rest of the tags were right before the end tag. – Gregor Menih May 09 '13 at 18:55

4 Answers4

4

In my expirience Foundation's scrips are a little messy, so try to do the following:

  1. place modernizr inside the <head>

  2. reference the following js at the end of your <body> just before the </body> tag :

    <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
    $(document).foundation(); 
</script>

That way you load Zepto in modern browsers, and jquery in the old ones, then you load Foundation, and then you tell the document to grab the format. There's no need to load the orbit js, as it is inside the min version of Foundation.

The code is documented at http://foundation.zurb.com/docs/javascript.html

ezabaw
  • 625
  • 2
  • 8
  • 21
  • I followed js instructions, so I've done that already. It doesn't work though, that's why I also added the orbit script. – Gregor Menih Apr 11 '13 at 06:22
  • try adding the zepto js below jquery, and don't forget to call foundation after zepto and jquery – ezabaw Apr 11 '13 at 16:47
  • add as well foundation.orbit.js after foundation.min.js, only foundation.min.js isn't enough – dan Apr 11 '13 at 20:43
0

I also had this problem.

The the prot fix that ezabaw used worked for me.

The orbit.js is required for this feature.

TCasa

TCasa
  • 1
0

Dan and TCasa are right. Do not forget foundation.orbit.js . It's essential.

So put this just before the </body> end tag:

<script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
</script>
<script src="js/foundation.js"></script>
<script src="js/foundation.orbit.js"></script>   // <-- Don't forget this one
<script>
    $(document).foundation();
</script>

Make sure the paths are right too. I used Foundation in combination with Compass so my paths were : js/foundation/foundation.js and js/foundation/foundation.orbit.js.

Good luck

Dave Snijder
  • 31
  • 2
0

There is an easier way. The Slider needs to be initalized after the page is fully loaded.

For me, after following all aforementioned steps in other answers the following worked

<script>
    $(document).ready(function() {   $(document).foundation(
    //add custom options to orbit
     'orbit', {
     animation: 'slide',
     timer_speed: 1000,
     pause_on_hover: true,
     animation_speed: 500,
     navigation_arrows: true,
     bullets: true


    );});
</script>

The additional custom options can be found here Link to Foundation Docs

A working example is here (helped me solving this issue)

os_1
  • 105
  • 5