花式盒子不行

Question

这是我的codepen： `

  

<script type="text/javascript"> 
$(document).ready(function() { 
   $(".fancybox").fancybox(); 
}); 
</script>

  <div class="container">
    <div class="row">
      <div class="col-sm-9" id="mainContent">

        <a class="fancybox" rel="group" href="img/1.jpg"><img src="img/1a.jpg" alt="" /></a>
        <a class="fancybox" rel="group" href="img/me2.jpg"><img src="img/me3.jpg" alt="" /></a>


      </div>
    </div>
  </div>

` http://codepen.io/anon/pen/gMbmzZ

我无法让这个奇特的盒子为我的生活而工作。我已经检查了css和javascript的文件路径，那些应该是好的。我还确保将jquery导入到我的html文件中。

无论我做什么，我都无法让它发挥作用。任何帮助都是适用的。