title: Twitter bootstrap-modal for images
body: <p>I have a page which includes details of the registered users.
  Every html table includes 80-90 users.
  For every user there is a $username variable.
  I normally show their pictures in a table like the code below.</p>
  
  <pre><code>print "&lt;a href=\"small-avatar-$username.jpg\" target=\"_blank\"&gt;
  &lt;img src=\"big-avatar-$username.jpg\"&gt;
  &lt;/a&gt;";
  </code></pre>
  
  <p>But the user can open images in a new tab. I want to show big avatars easily.
  My first choice was <strong>lightbox-jquery</strong>. But because i use <strong>twitter-bootstrap</strong> in my site, i decided to use default bootstrap and jquery features.</p>
  
  <p>I saw that there is "bootstrap-modals". When user clicks link, i don't plan to show anything more than i big picture.</p>
  
  <p>I tried this:</p>
  
  <pre><code>print "&lt;a href=\"#$username" data-toggle=\"modal\" class=\"img-modal\" &gt;
          &lt;img src=\"small-avatar-$username.jpg\" &gt;&lt;/a&gt;";
  print '&lt;/td&gt;';
  </code></pre>
  
  <p>.</p>
  
  <pre><code>print "&lt;div id=\"$username\" class=\"modal\"&gt;";
         &lt;img src=\"big-avatar-$username.jpg\"&gt;
  print "&lt;/div&gt;";
  </code></pre>
  
  <p>.</p>
  
  <pre><code>&lt;script type="text/javascript" id="js"&gt;
          $('#username').modal();
  &lt;/script&gt;
  </code></pre>
  
  <p>I suppose putting <code>$('#username').modal();</code><br>
  for every user to my page will make HTML file huge.</p>
  
  <p>But then I tried class name of anchor like this: <code>$('.img-modal').modal();</code><br>
  But this didn't work.</p>
  
  <p>What would you recommend in this situation?</p>