title: Jquery Dynamic fancy box
body: <p>Loading fancybox from Jquery how can I retrieve the contents of a div ID on a page and not the whole page. This is my code so fare which gets me the whole page:</p>
  
  <p>The index view(this links to the show view of styel):</p>
  
  <pre><code>&lt;div class="style_image"&gt; &lt;%=link_to (image_tag style.cover.pic.url(:normal)), style %&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The show view (I want to to appear in the fancybox):</p>
  
  <pre><code>&lt;div id="show_style"&gt;
  
      ALL THE CONTENT!
  
  &lt;/div&gt;
  </code></pre>
  
  <p>application.js:</p>
  
  <pre><code>$(function() {
  
  $(".style_image a").live('click', function(event) { 
  
      $(".style_image a").fancybox();
      return false;       
  
  });
  }); 
  </code></pre>
  
  <p>I have also tried the following with no success:</p>
  
  <pre><code>$(function() {
  
  $(".style_image a").live('click', function(event) { 
  
      $(".style_image a" + "#show_style").fancybox();
      return false;       
  
  });
  });
  </code></pre>
  
  <p>I'm not sure how this is done as there is little info on the <a href="http://fancybox.net/howto" rel="nofollow noreferrer">fancy box docs</a>.
  I wish this to be done dynamically not inline.</p>