Why isn't Foundation 4 Orbit working for me?

Question

I'm not sure as to why my implementation is not working. I have followed the documentation on the foundation 4 site but can not figure out why it's not working. All that shows up are the cursor dots that change the position of the pictures in the Orbit. Also, I have the correct css/html/js folder paths.

Here's what my mark up looks like:

<!DOCTYPE html>
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title> Foundation 4</title>

  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
  <link rel="stylesheet" href="foundation-4/css/normalize.css" />
  <link rel="stylesheet" href="foundation-4/css/foundation.css" />

  <script src="foundation-4/js/vendor/custom.modernizr.js"></script>

</head>
<body>

  <!-- body content here -->

  <nav class="top-bar">
    <ul class="left">
        <li class="name"><font color="white"><a href="vm.php">Va</a></font></li>
    </ul>
    <ul class="right">
        <li class="name"><font color="white">Home</font></li>
    </ul>
  </nav>
  <br>

<!-- ======================== ORBIT===================== -->

<div class="orbit-container"> 
   <ul data-orbit="" class="orbit-slides-container">
    <li>
      <img src="3.jpg">
      <div class="orbit-caption">IMAGE 3</div>
    </li>
    <li class="active">
      <img src="1.jpg">
      <div class="orbit-caption">IMAGE 1</div>
    </li>
    <li>
      <img src="2.jpg">
      <div class="orbit-caption">IMAGE 2</div>
    </li>
    <li>
      <img src="3.jpg">
      <div class="orbit-caption">IMAGE 3</div>
    </li>
    <li>
      <img src="1.jpg">
      <div class="orbit-caption">IMAGE 1</div>
    </li>
  </ul>

  <!-- Prev/Next Arrows -->
  <a href="#" class="orbit-prev">Prev<span></span></a>
  <a href="#" class="orbit-next">Next<span></span></a>

  <!-- Slide Numbers -->
  <div class="orbit-slide-number">
    <span>1</span> of <span>3</span>
  </div>

  <!-- Timer and Play/Pause Button -->
  <div class="orbit-timer">
    <span></span>
    <div class="orbit-progress" style="width: 100%; -webkit-transition: width 10s linear;"></div>
  </div>

</div>

<!-- Orbit Bullet Slide Indicator -->
<ol class="orbit-bullets">
  <li data-orbit-slide-number="1"></li>
  <li data-orbit-slide-number="2" class="active"></li>
  <li data-orbit-slide-number="3"></li>
</ol>

<!-- =======ORBIT END======= -->


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

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

  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.orbit.js"></script>
  <script src="js/foundation/foundation.alerts.js"></script>
  <script src="js/foundation/foundation.clearing.js"></script>
  <script src="js/foundation/foundation.cookie.js"></script>
  <script src="js/foundation/foundation.dropdown.js"></script>
  <script src="js/foundation/foundation.forms.js"></script>
  <script src="js/foundation/foundation.joyride.js"></script>
  <script src="js/foundation/foundation.magellan.js"></script>
  <script src="js/foundation/foundation.orbit.js"></script>
  <script src="js/foundation/foundation.placeholder.js"></script>
  <script src="js/foundation/foundation.reveal.js"></script>
  <script src="js/foundation/foundation.section.js"></script>
  <script src="js/foundation/foundation.tooltips.js"></script>
  <script src="js/foundation/foundation.topbar.js"></script>
  <script src="js/foundation/foundation.interchange.js"></script>
  <script>
    $(document).foundation();
  </script>


</body>
</html>

Also, here is a screen shot of the errors I am getting in google chrome.

http://s1228.photobucket.com/user/Ebadly/media/random/ScreenShot2013-11-15at112428AM_zpsdfc35907.png.html

When you load your page right click -> Inspect Element (Google Chrome). Do you see any errors? — Dawood Awan, Nov 15 '13 at 19:14
Is this `foundation-4` folder on your server, and the path is correct? — Teemu, Nov 15 '13 at 19:14
@DawoodAwan - I have a lot of errors saying "failed to load resource" — Ebad Saghar, Nov 15 '13 at 19:20
@DawoodAwan - I posted a link to the screen shot in my edited post above. — Ebad Saghar, Nov 15 '13 at 19:32
@DawoodAwan - I added the "foundation-4" prefix to all the js file paths, still not showing up. — Ebad Saghar, Nov 15 '13 at 19:40
The only error I am now getting is: "Uncaught TypeError: Object # — Ebad Saghar, Nov 15 '13 at 19:42

Dawood Awan · Accepted Answer · 2013-11-19T16:34:48.047

EDIT: THE FOUNDATION DOUMENTATION CONTAINS

<ul data-orbit="" class="orbit-slides-container">

REMOVE: ="" class="orbit-slides-container" It did the TRICK FOR ME: SO it becomes:

<ul data-orbit>

"Uncaught TypeError: Object # this is because jQuery has not loaded. Download jQuery from here http://jquery.com/download/

Link this jQuery file to your website

Even if the jQuery file is linked properly make sure it is loaded in the

<head></head> tags before loading the foundation javascript files

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title> Foundation 4</title>

  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
  <link rel="stylesheet" href="foundation-4/css/normalize.css" />
  <link rel="stylesheet" href="foundation-4/css/foundation.css" />

<script src="LINKTO JQUERY JS FILE"></script>
  <script src="foundation-4/js/vendor/custom.modernizr.js"></script>

</head>

EDIT:

<div class="row">
<div class="orbit-container"> 
   <ul data-orbit="" class="orbit-slides-container">
    <li>
      <img src="3.jpg">
      <div class="orbit-caption">IMAGE 3</div>
    </li>
    <li class="active">
      <img src="1.jpg">
      <div class="orbit-caption">IMAGE 1</div>
    </li>
    <li>
      <img src="2.jpg">
      <div class="orbit-caption">IMAGE 2</div>
    </li>
    <li>
      <img src="3.jpg">
      <div class="orbit-caption">IMAGE 3</div>
    </li>
    <li>
      <img src="1.jpg">
      <div class="orbit-caption">IMAGE 1</div>
    </li>
  </ul>
</div>
</div>

EDIT: TRY THIS

  <div class="large-12 columns">
            <div class="orbit-container">
                <ul data-orbit>
                    <li data-orbit-slide="headline-1">
                        <h2>Headline 1</h2>
                        <h3>Subheadline</h3>
                        <p>Pellentesque habitant morbi tristique senectus.</p>
                    </li>
                    <li data-orbit-slide="headline-2">
                        <h2>Headline 2</h2>
                        <h3>Subheadline</h3>
                        <p>Pellentesque habitant morbi tristique senectus.</p>
                    </li>

                </ul>

            </div>



        </div>

I downloaded it and wrote the correct path. Although I no longer have any errors at all, the Orbit is still not working. — Ebad Saghar, Nov 15 '13 at 19:59
in the snapshot you attached you see the Images are not showing aswell. Please check path to images — Dawood Awan, Nov 15 '13 at 19:59
the images and the file, containing the html code, are in the same folder. They're not in any subfolders — Ebad Saghar, Nov 15 '13 at 20:02
I don't know what the problem could be try enclosing your

in a — Dawood Awan, Nov 15 '13 at 20:05
Well the images showed up in list view, but the orbit isn't working. — Ebad Saghar, Nov 15 '13 at 20:08
@EbadSaghar try the code that I just added to my answer, remove your code for the Orbit and replace with this. Edit the URL to Images if necessary — Dawood Awan, Nov 15 '13 at 20:15
Nope, it came up blank. URL to images are fine, since they are in the same file that contains the markup — Ebad Saghar, Nov 15 '13 at 20:29
@EbadSaghar Check my Edit, I had same problem I removed this: ="" class="orbit-slides-container" from HTML. see EDIT — Dawood Awan, Nov 19 '13 at 16:22

score 0 · Answer 2 · answered Nov 15 '13 at 19:43

0

It's not going to work because there are AJAX calls being made to get the scripts.
You're going to have to use something like USBWebServer if you're going to develop/test locally.

answered Nov 15 '13 at 19:43

kei

20,157
2
35
62

I am currently using a mamp server to do this. – Ebad Saghar Nov 15 '13 at 20:00
Your URL should be on `localhost` then instead of `file:\\` – kei Nov 15 '13 at 20:04
I tested both ways, locally and using the mamp server. The screenshot was taken locally, I get the same results either way. – Ebad Saghar Nov 15 '13 at 20:06

Why isn't Foundation 4 Orbit working for me?

2 Answers2