Zurb数据清除不适用于小块网格

时间:2014-07-15 19:12:38

标签: javascript css zurb-foundation lightbox

我目前正在尝试将一个清除灯箱添加到嵌套的小方框网格中,但灯箱根本没有加载。页面继续加载,好像我没有做任何更改一样。我已经完成并尝试了一些CSS解决方案无济于事。我还确保我正在调用正确的JS文件。我正在使用基础5.3,我添加了我当前的代码。任何方向都将不胜感激。

<!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>

<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.min.css" />
<link rel="stylesheet" href="css/app.css" />

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

</head>
<body>
 <div class="row">
  <div class="large-6 large-centered columns">
      <h2>Our Featured Artists</h2>
            <p>Each Featured Artist has an  opportunity to speak at the conference to share his or her vision, perspective,  and techniques with conference attendees. It is truly an honor to be a CAC  Featured Artist and many past students artists who were featured at CAC have  gone on to brilliant careers in art.</p>
            <ul class="small-block-grid-3 clearing-thumbs" data-clearing>
              <li class="clearing-feature"><a href="img/big-bell.jpg"><img src="img/thumbs/bellingham.jpg" alt="Bellingham." class="th"></a></li>
              <li><a href="img/big-ferr.jpg"><img src="img/thumbs/ferrar.jpg" alt="Ferrar. " class="th"></a></li>
              <li><a href="img/big-gold.jpg"><img src="img/thumbs/goldwynn-post.jpg" alt="Goldwynn-Post." class="th"></a></li>

              <li><a href="img/big-harr.jpg"><img src="img/thumbs/harrod.jpg" alt="Harrod. " class="th"></a></li>
              <li><a href="img/big-jer.jpg"><img src="img/thumbs/jerome.jpg" alt="Jerome. " class="th"></a></li>
              <li><a href="img/big-larue.jpg"><img src="img/thumbs/larue.jpg" alt="LaRue. " class="th"></a></li>

              <li><a href="img/big-rew.jpg"><img src="img/thumbs/rewington.jpg" alt="Rewington. " class="th"></a></li>
              <li><a href="img/big-smith.jpg"><img src="img/thumbs/smith.jpg" alt="Smith. " class="th"></a></li>
              <li><a href="img/big-ta.jpg"><img src="img/thumbs/ta.jpg" alt="Ta. "          class="th"></a></li>
            </ul>
    </div>
    </div>
   <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>
   </body>

1 个答案:

答案 0 :(得分:0)

您必须在foundation.clearing.js

之后加载foundation.js
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.clearing.js"></script>

参考link

说明In order to get Clearing to build itself properly, you'll need to have JavaScript properly included.