Foundation Orbit doesn't initialize
Question
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.
4 answers
solution1
4 ACCPTED 2013-04-10 20:51:39
In my expirience Foundation's scrips are a little messy, so try to do the following:
- place modernizr inside the
<head> 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
solution2
0 2013-08-10 17:57:47
I also had this problem.
The the prot fix that ezabaw used worked for me.
The orbit.js is required for this feature.
TCasa
solution3
0 2013-08-14 11:00:28
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
solution4
0 2014-01-19 14:16:45
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)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.