title: Opening a link from a Raphael node into a lightbox
body: <p>I am using <a href="http://fancybox.net/" rel="nofollow noreferrer">fancybox</a> for my lightbox needs.</p>
  
  <p>I have a need to open a link from a <a href="http://raphaeljs.com/index.html" rel="nofollow noreferrer">raphael</a> element (in this demo a <a href="http://raphaeljs.com/reference.html#circle" rel="nofollow noreferrer">circle</a>).</p>
  
  <p>Normally you would create a link and style it like so:</p>
  
  <pre><code>&lt;a id="test" href="ajax.html"&gt;Click Me&lt;/a&gt;&lt;/li&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $('#test').fancybox({
          'width'           : '75%',
          'height'          : '75%',
          'autoScale'       : false,
          'transitionIn'    : 'none',
          'transitionOut'   : 'none',
          'type'            : 'iframe'
      });
  </code></pre>
  
  <p>To complicate things the circle is in it's own javascript file which is declared after fancybox is:</p>
  
  <pre><code>&lt;script src="./fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="demo02.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The abridged version of demo02.js looks like:</p>
  
  <pre><code>var Demo = {
      initialize: function() {
          var dim = this.getWindowDimensions();
          this.paper = Raphael("canvas", dim.width, dim.height);
          // set events
          (document.onresize ? document : window).onresize = function() {
              Demo.resize();
          }
  
          // add circle
          var circle = this.paper.circle(150, 120, 100);
          circle[0].style.cursor = "pointer";
          circle.attr({
              fill: "green",
              stroke: "#333",
              "stroke-width": 10,
              href: "ajax.html",
          });
      },
  ...
  </code></pre>
  
  <p>So I tried several ways to style the link. One naive attempt was to simply add the id of test to the attr.</p>
  
  <p>I also tried the following:</p>
  
  <pre><code>$(circle.node).fancybox({
  $('circle.node').fancybox({
  $('#circle.node').fancybox({
  $('#canvas.circle.node').fancybox({
  $('#Demo.circle.node').fancybox({
  </code></pre>
  
  <p>And none of them work. The link is always opened as a new link and not in the fancy box.</p>
  
  <p>What am I doing wrong and what do I need to do to correct it?</p>