Открытие ссылки с узла Рафаэля в лайтбоксе

Question

Я использую fancybox для моих лайтбоксов.

Мне нужно открыть ссылку с элемента raphael (в этой демонстрации circle).

Обычно вы можете создать ссылку и стиль его так:

<a id="test" href="ajax.html">Click Me</a></li> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#test').fancybox({ 
     'width'   : '75%', 
     'height'   : '75%', 
     'autoScale'  : false, 
     'transitionIn' : 'none', 
     'transitionOut' : 'none', 
     'type'   : 'iframe' 
    }); 

усложнять окружности в его собственном файл JavaScript, который объявлен после FancyBox является:

<script src="./fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script> 
<script src="demo02.js" type="text/javascript" charset="utf-8"></script> 

Сокращенным версия demo02.js выглядит так:

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", 
     }); 
    }, 
... 

Поэтому я попробовал несколько способов стилизовать е ссылку. Одна наивная попытка состояла в том, чтобы просто добавить идентификатор теста к attr.

Я также попытался следующие:

$(circle.node).fancybox({ 
$('circle.node').fancybox({ 
$('#circle.node').fancybox({ 
$('#canvas.circle.node').fancybox({ 
$('#Demo.circle.node').fancybox({ 

И никто из них не работает. Ссылка всегда открывается как новая ссылка, а не в причудливую рамку.

Что я делаю неправильно и что мне нужно сделать, чтобы исправить?

Answer 1

Исправлено.

Вместо использования HREF атрибута, я назвал FancyBox непосредственно из обработчика OnClick для узла дает мне это:

var circle = this.paper.circle(150, 120, 100); 
    circle[0].style.cursor = "pointer"; 
    circle.attr({ 
     fill: "green", 
     stroke: "#333", 
     "stroke-width": 10, 
    }); 
    circle.node.onclick = function() { 
     $.fancybox({ 
      'href'   : 'ajax.html', 
      'width'   : '75%', 
      'height'  : '75%', 
      'autoScale'  : false, 
      'transitionIn' : 'none', 
      'transitionOut' : 'none', 
      'type'   : 'iframe' 
     }); 

     if (circle.attr("fill") == "red") { 
      circle.attr("fill", "green"); 
     } else { 
      circle.attr("fill", "red"); 
     } 
    }; 

, который работает!