title: Fancybox 2.1.5 navigation arrows and close button not showing up
body: <p>I'm trying to apply Fancybox 2.1.5 to a website and am only able to get it to partly work. The navigation buttons and close button will not show up at all. This is the coding for the html page that contains the website's images:</p>
  
  <pre><code>&lt;head&gt;
  &lt;!-- Add jQuery library --&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  &lt;!-- Add fancyBox --&gt;
  &lt;link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" /&gt;
  &lt;script type="text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="imgHolder"&gt;&lt;a class="fancybox" rel="group" href="img/gallery/set1/look1_lg.jpg"&gt;&lt;img id="look 1: top $79 / jacket $69 / pant $29" data-thumb="img/gallery/set1/look1_thumbnail.jpg" data-href="img/gallery/set1/look1.jpg" src="img/galleryPrototype3/semiPixel.png" alt="look 1" width="1060" height="800"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div class="imgHolder"&gt;&lt;a class="fancybox" rel="group" href="img/gallery/set1/look2_lg.jpg"&gt;&lt;img id="look 2: top $79 / jacket $69 / pant $29" data-thumb="img/gallery/set1/look2_thumbnail.jpg" data-href="img/gallery/set1/look2.jpg" src="img/galleryPrototype3/semiPixel.png" alt="" width="578"  height="800"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And this is the basic Fancybox jQuery script that I want to use:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $(".fancybox").fancybox();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>When the Fancybox jQuery script is inserted into the HTML document and I click on look1.jpg, a grey translucent overlay appears, but no image.</p>
  
  <p>When the Fancybox jQuery script is completely removed from the HTML document and I click on look1.jpg, the browser window turns an opaque dark grey with look1_lg.jpg displayed in the center, but no navigation arrows or close button. </p>
  
  <p>There are some other posts on the same issue that I have used to try and problem solve my issue. From those posts I've double checked the following and everything seems to be set up correctly: The Fancybox sprite and overlay png files are located in the same folder as the Fancybox CSS document, the Fancybox jQuery source code and stylesheet are linked up correctly, and the anchor tags for the 2 images both have "rel=group" applied to them. </p>
  
  <p>I am wondering if the way the site is coded overall has something to do with it? The site is also built with AJAX and bootstrap. The HTML page referenced above that contains the website's images is loaded into the website index page via AJAX. As a test I put the coding for that page in a standalone HTML file and fancybox worked perfectly, which makes me think that my guess is correct. If this is the case though, I have no idea how to fix the problem. For reference, this is the code for the website index page:</p>
  
  <pre><code>&lt;head&gt;
      &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
      &lt;link rel="stylesheet" href="css/galleryPrototype3.css"&gt;
      &lt;link rel="stylesheet" href="css/photoswipe.css"&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
  
      &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt; 
      &lt;script type="text/javascript" src="js/device.js"&gt;&lt;/script&gt; 
      &lt;script type="text/javascript" src="js/bootstrap.js"&gt;&lt;/script&gt;  
      &lt;script type="text/javascript" src="js/core.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/script.js"&gt;&lt;/script&gt; 
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="webSiteLoader"&gt;&lt;/div&gt;
  &lt;div id="glob-wrap"&gt;
      &lt;!--menu: This is the main navigation. It's been simplified here to include only the piece of navigation that refers to the html page referenced above--&gt;   
      &lt;nav id="mainNav" data-follow="location" data-type="navigation"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="/people"&gt;people&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;div class="_cover"&gt;&lt;/div&gt;
      &lt;!-- gallery holder: this holds the website's image gallery --&gt;  
      &lt;section id="galleryPrototype3"&gt;&lt;/section&gt;
      &lt;!-- content holder --&gt;  
      &lt;div id="content_pages" data-follow="location" data-type="switcher" data-flags="ajax"&gt;&lt;/div&gt;
      &lt;!-- category pages: This has been simplified to include only the line that refers to the html page referenced above --&gt; 
      &lt;div id="category_pages" data-follow="location" data-type="switcher"&gt;
          &lt;div data-id="people" data-source="peopleCategory.html"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I also tried placing the Fancybox jQuery script in the website index page rather than in the html page that contains the website's images. In that case as well when I click on an image the browser window turns an opaque dark grey with look1_lg.jpg displayed in the center, but no navigation arrows or close button. </p>
  
  <p>I'm at a loss, so any help will be appreciated!</p>