Question

我正在尝试使用prettyPhoto和bootstrap创建一个简单的灯箱库。出于某种原因，当我点击图像缩略图时，它只是在空白图像页面而不是js中打开它。

Chrome开发工具给了我这个：

Uncaught TypeError: undefined is not a function - bootstrap.min.js:6
Uncaught ReferenceError: jQuery is not defined - jquery.prettyPhoto.js:7
Uncaught ReferenceError: $ is not defined - portfolio.html:10

这已经困扰了我几个小时，任何帮助非常感谢！谢谢！

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Kim Pirring Design</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script language="JavaScript" type="text/javascript" src="js/bootstrap.min.js"></script>
    <script language="JavaScript" type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
    <script language="JavaScript" type="text/javascript" charset="utf-8">
        $(document).ready(function(){
        $("a[rel='prettyPhoto']").prettyPhoto();
      });
    </script>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/prettyPhoto.css">

 </head>

 <body>
    <div class="container">
        <h1>Kim Pirring Design</h1>
        <div class='navbar navbar-inverse'>
         <div class='navbar-inner nav-collapse' style="height: auto;">
        <ul class="nav">
          <li><a href="index.html">Home</a></li>
          <li class="active"><a href="portfolio.html">My Work</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="resume.html">Resume</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
          </div>
         </div>

       <ul class="thumbnails">
                <li class="span3">
                        <a class="thumbnail" rel="prettyPhoto" href="images/fullscreen/1.jpg"><img class="group1" src="images/fullscreen/1.jpg" title="Image Title" /></a>
                    </li> <!--end thumb -->
                    <li class="span3">
                        <a class="thumbnail" rel="lightbox[group]" href="img/pics/2.jpg"><img class="group1" src="img/pics/2.jpg" title="Image Title" /></a>
                    </li> <!--end thumb -->
                    <li class="span3">
                        <a class="thumbnail" rel="lightbox[group]" href="img/pics/3.jpg"><img class="group1" src="img/pics/3.jpg" title="Image Title" /></a>

            </ul><!--end thumbnails -->



 <footer>
        <p>&copy; Kim Pirring 2013</p>
  </footer> 
 </div><!-- .container -->


 </body>
</html>

Answer 1

看来jQuery没有加载。检查外部脚本是否指向正确的位置。

bootstrap中的prettyPhoto没有加载灯箱

1 个答案: