title: Bootstrap and FancyBox: Take the img ALT attribute and use it as a caption?
body: <p>I'm using Bootstrap with the Fancybox plugin and trying to get a thumbnail ALT attribute and use it as a caption below the photo like so: <a href="http://jsfiddle.net/2LXNh/" rel="nofollow">FancyBox demo</a></p>
  
  <p>However, taking that idea and implementing it with my Bootstrap demo gets the code working fine except that the ALT attribute is nowhere to be <a href="http://ogmda.com/3dms-public/gallery.php" rel="nofollow">seen in action</a>. Note: Only testing the first photo of my gallery at the moment.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;a class="thumbnail fancybox" rel="lightbox" href="http://placehold.it/400x400.png"&gt;
      &lt;img class="img-responsive" alt="First title here" src="http://placehold.it/200x200" /&gt;
      &lt;div class="text-center"&gt;
          &lt;small class="text-muted"&gt;Image Title&lt;/small&gt;
      &lt;/div&gt; &lt;!-- text-center / end --&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>The script at the bottom of my page is:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
      $('.fancybox').fancybox();
  });
  &lt;/script&gt;
  
  &lt;script&gt;
  
  $(".fancybox").fancybox({
      beforeShow : function() {
          var alt = this.element.find('img').attr('alt');
  
          this.inner.find('img').attr('alt', alt);
  
          this.title = alt;
      }
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>What am I doing wrong?</p>