title: Having trouble adding lightbox to my site. Just getting a page with just the picture instead of the pop up
body: <p>Ok so I'm learning lightbox for the first time. I'm trying to use it with this bootstrap template I downloaded which made it easy to put in the images and customize the navbar. Right now when I click the image, it brings me to a page with JUST the image. No pop up. Right now I'm focusing on just gallery1.jpg if you look at the HTML. Am I missing something? Hope this isn't confusing, thanks.
  I am trying to use fancyBox for the lightbox add on.</p>
  
  <p>Do I have the javascript location typed up incorrectly? <a href="http://i.imgur.com/pCgZkKA.png" rel="nofollow">http://i.imgur.com/pCgZkKA.png</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;meta name="description" content=""&gt;
  &lt;meta name="author" content=""&gt;
  
  &lt;title&gt;4 Col Portfolio - Start Bootstrap Template&lt;/title&gt;
  
  
  &lt;!-- Bootstrap Core CSS --&gt;
  &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
  
  &lt;!-- Custom CSS --&gt;
  &lt;link href="css/4-col-portfolio.css" rel="stylesheet"&gt;
  
  &lt;!-- lightbox stuff --&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="js/source/jquery.fancybox.css?v=2.1.5" type="text/css"             media="screen" /&gt;
  &lt;script type="text/javascript" src="js/source/jquery.fancybox.pack.js?v=2.1.5"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $(".fancybox").fancybox();
  });
  &lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;!-- Navigation --&gt;
  &lt;nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color:#F60;"&gt;
      &lt;div class="container"&gt;
          &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-        example-navbar-collapse-1"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
      &lt;a class="navbar-brand" href="../startbootstrap4/index.html"&gt;&lt;img src="logonav.png"&lt;/a&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;
                      &lt;a href="index.html"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="gallery1.html"&gt;Gallery&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Contact&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- /.navbar-collapse --&gt;
      &lt;/div&gt;
      &lt;!-- /.container --&gt;
  &lt;/nav&gt;
  
  &lt;!-- Page Content --&gt;
  &lt;div class="container"&gt;
  
      &lt;!-- Page Heading --&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;h1 class="page-header"&gt;Gallery
  
              &lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /.row --&gt;
  
      &lt;!-- Projects Row --&gt;
      &lt;div class="row"&gt;
         &lt;div class="col-md-3 portfolio-item"&gt; 
         &lt;a class="fancybox" rel="group" href="images/gallery1.jpg" data-lightbox="fancybox" data-    title="untitled"&gt;&lt;img src="images/gallery1.jpg"&gt;&lt;/a&gt; 
         &lt;/div&gt;            
  
         &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;a href="#"&gt;
                  &lt;img class="img-responsive" src="images/gallery2.jpg" alt=""&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;a href="#"&gt;
                  &lt;img class="img-responsive" src="images/gallery10.jpg" alt=""&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;a href="#"&gt;
                  &lt;img class="img-responsive" src="images/gallery4.jpg" alt=""&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /.row --&gt;
  
      &lt;!-- Projects Row --&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;a href="#"&gt;
                  &lt;img class="img-responsive" src="images/gallery5.jpg" alt=""&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;a href="#"&gt;
                  &lt;img class="img-responsive" src="images/gallery3.jpg" alt=""&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;a href="#"&gt;
                  &lt;img class="img-responsive" src="images/gallery9.jpg" alt=""&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;a href="#"&gt;
                  &lt;img class="img-responsive" src="images/gallery8.jpg" alt=""&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /.row --&gt;
  
      &lt;!-- Projects Row --&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;a href="#"&gt;
                  &lt;img class="img-responsive" src="images/gallery7.jpg" alt=""&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;a href="#"&gt;
                  &lt;img class="img-responsive" src="images/gallery6.jpg" alt=""&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;a href="#"&gt;
                  &lt;img class="img-responsive" src="images/gallery11.jpg" alt=""&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 portfolio-item"&gt;
              &lt;a href="#"&gt;
                  &lt;img class="img-responsive" src="images/gallery12.jpg" alt=""&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /.row --&gt;
  
      &lt;hr&gt;
  
      &lt;!-- Pagination --&gt;
      &lt;div class="row text-center"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;ul class="pagination"&gt;
                  &lt;li&gt;
                      &lt;a href="gallery1.html"&gt;&amp;laquo;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="active"&gt;
                      &lt;a href="gallery1.html"&gt;1&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="gallery2.html"&gt;2&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="gallery3.html"&gt;3&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;4&lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                      &lt;a href="gallery2.html"&gt;&amp;raquo;&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;hr&gt;
  
      &lt;footer&gt;
          &lt;div class="row"&gt;
  
          &lt;/div&gt;
      &lt;/footer&gt;
  
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
  
  &lt;!-- jQuery --&gt;
  &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
  
  &lt;!-- Bootstrap Core JavaScript --&gt;
  &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>