Skip to content
This repository
Fetching contributors…

Cannot retrieve contributors at this time

file 111 lines (100 sloc) 4.802 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[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" />

<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />

<title>Foundation Orbit Testing</title>

<!-- Included CSS Files -->
<link rel="stylesheet" href="stylesheets/styles.css">

<script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
</head>
<body>

<div class="row">
    <div class="twelve columns">
      <p><a href="index.html">&laquo; Back</a></p>
      <h2>Foundation Orbit Testing</h2>
      <hr />
    </div>
  </div>

<!-- Test Foundation Components Here -->
  <div class="row">
    <div class="twelve columns">
   <h3>Orbit</h3>
   <h4 class="subheader">Orbit is an easy to use, powerful image slider built to be responsive, just like Foundation.</h4>


      <div class="row">
        <div class="four columns">
          <h4>Image Slider</h4>
          <p>This is an orbit slider that displays images.</p>
        </div>
        <div class="eight columns">
          <div id="featured">
            <img src="images/orbit-demo/demo1.jpeg" />
            <img src="images/orbit-demo/demo2.jpeg" />
            <img src="images/orbit-demo/demo3.jpeg" />
          </div>
        </div>
      </div>

      <div class="row">
        <div class="four columns">
          <h4>Content Slider</h4>
          <p>This is an orbit slider that displays content.</p>
        </div>
        <div class="eight columns">
          <div id="featuredContent">
            <!-- <img src="http://placekitten.com/2000/400" data-caption="#captionOne" />
<img src="http://placekitten.com/2000/400" data-caption="#captionTwo" />
<img src="http://placekitten.com/2000/400" data-caption="#captionThree" /> -->
            <div>
              <img src="http://placekitten.com/g/400/300" />
            </div>
            <div data-caption="#captionOne">
              <h4>This is a content slider.</h4>
              <p>Each slide holds arbitrary content, like text or actions.</p>
            </div>
            <div data-caption="#captionTwo">
              <h4>We can include text and buttons, like this!</h4>
              <p>We take no responsibility for what happens if you click this button.</p>
              <p><a href="http://www.youtube.com/watch?v=dQw4w9WgXcQ" class="button" target="_blank">Rock My World!</a></p>
            </div>
            <div data-caption="#captionThree">
              <h4>What? You didn't click it?</h4>
              <p>We'll give you the benefit of the doubt. Maybe you did, and now you're back!</p>
            </div>
          </div>
          <span class="orbit-caption" id="captionOne">Here is a caption...</span>
          <span class="orbit-caption" id="captionTwo">Here is a caption2...</span>
          <span class="orbit-caption" id="captionThree">Here is a caption3...</span>
        </div>
      </div>
   </div>
  </div>

<!-- Included JS Files -->
<script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.event.move.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.event.swipe.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
<script src="../vendor/assets/javascripts/foundation/app.js"></script>
  <script type="text/javascript">
    $(window).load(function(){
      $("#featured").orbit({
        slideNumber: true,
        stackOnSmall: true
      });

      $('#featuredContent').orbit({ fluid: '2x1' });
    });
  </script>
</body>
</html>
Something went wrong with that request. Please try again.