Foundation 4 Orbit Initialization Error

Question

I'm a bit new to Foundation 4 and the Orbit plugin, but I can't figure out why the orbit plugin will not initialize. I've got the compass version of foundation 4 installed.

The zepto.js and jquery.js are in javascripts/vendor/, and the foundation.orbit.js file is in javascripts/foundation/

Modernizr

<script src="javascripts/vendor/custom.modernizr.js"></script>

Orbit Plugin:

<!-- Orbit Slides and Object -->

<div class="slideshow-wrapper">
    <span class="preloader"></span>
<ul data-orbit>
  <li>
    <img src="placehold.it/1000x400" />
    <div class="orbit-caption">...</div>
  </li>
  <li>
    <img src="placehold.it//1000x400" />
    <div class="orbit-caption">...</div>
  </li>
  <li>
    <img src="placehold.it/1000x400" />
    <div class="orbit-caption">...</div>
  </li>
</ul>
</div>

The page can be found here: http://foundationtest.tx0rx0.com/tx0rx0/testpage.html

I've got modernizr in the head, and here's what the section looks like right before the last last body tag:

<!-- Javascript for Orbit Image Slider -->     
    <script>
            document.write('<script src=/javascripts/vendor/'
                + ('__proto__ ' in {} ? 'zepto' : 'jquery')
                + '.js><\/script>')
    </script>

<script src= "/javascripts/foundation/foundation.js"></script>
<script src= "/javascripts/foundation/foundation.alerts.js"></script>
<script src= "/javascripts/foundation/foundation.orbit.js"></script>

<!-- Initialize Foundation -->

<script>
    $(document).foundation();
</script>

I'm sure it's something simple, but I don't see it and a helpful nudge would be appreciated. Thank you.

Answer 1

I believe the path of your scripts is not right.

<script src= "/javascripts/foundation/foundation.js"></script>
<script src= "/javascripts/foundation/foundation.alerts.js"></script>
<script src= "/javascripts/foundation/foundation.orbit.js"></script>

And here

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

Check the slash.

<script src="javascripts/vendor/custom.modernizr.js"></script>

Here you don't have it. One of them must be wrong.

And the path of your second img. "placehold.it//1000x400" is has two slashes

EDIT I checked your site. Remove the first slash from your foundation js path

UPDATE Just remove this

<span class="preloader"></span>