prettyPhoto in bootstrap not loading lightbox

StackOverflow https://stackoverflow.com/questions/16257531

Question

I am trying to make a simple lightbox gallery, using prettyPhoto and bootstrap. For some reason, when I click on the image thumbnail it just opens it in a blank image page rather than with the js.

Chrome dev tools gives me this: 

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

This has been bugging me for hours, any help greatly appreciated! Thanks!

<!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>
Was it helpful?

Solution

It appears that jQuery is not loading. Check that your external scripts are pointing to the right place.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top