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.
In my expirience Foundation's scrips are a little messy, so try to do the following:
<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