Geek Answers Handbook

Foundation Orbit does not initialize

I work with Foundation 4. I tried to include an orbit slide on my site, but I can’t get it working.

So, I followed the steps in the Foundation documentation . I have included all the 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 slide show

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

But instead of creating a slide show, all I get is an unordered list. I checked three times to make sure I didn't miss anything. Here is an example of what I get.

+4
source share
4 answers

In my experience, the Foundation Scripts are a bit dirty, so try the following:

  • place modernizr inside <head>

  • refer to the following js at the end of your <body> immediately before the </body> :

     <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>

This way you download Zepto in modern browsers, and jquery in the old ones, then download Foundation, and then you tell the document to capture the format. There is no need to load the js orbit, as it is inside the minimal version of Foundation.

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

+4
source

I also had this problem.

The prot fix used by ezabaw worked for me.

This function requires orbit.js.

TCasa

0
source

Dan and Tsasa are right. Do not forget foundation.orbit.js . It is important.

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

 <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 correct. I used Foundation in combination with Compass, so my paths were: js / foundation / foundation.js and js / foundation / foundation.orbit.js.

Good luck.

0
source

There is an easier way. The slider should be activated after the page is fully loaded.

For me, following all the above steps in other answers, working

 <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>

Additional user parameters can be found here. Link to basic documents.

Working example here (helped me solve this problem)

0
source

More articles:


All Articles