Ouverture d'un lien à partir d'un noeud Raphael dans une lightbox

Question

J'utilise fancybox pour mes besoins en lightbox. J'ai besoin d'ouvrir un lien à partir d'un élément raphael (dans cette démo, un circle).

Normalement, vous devriez créer un lien et le style comme ceci:

<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' 
    }); 

Pour compliquer les choses le cercle est dans son propre fichier javascript qui est déclaré après fancybox est:

<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> 

Le abrégé La version de demo02.js ressemble à:

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

J'ai donc essayé plusieurs façons de styler e le lien. Une tentative naïve consistait simplement à ajouter l'identifiant du test à l'attr.

J'ai aussi essayé ce qui suit:

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

Et aucun d'entre eux travaillent. Le lien est toujours ouvert comme un nouveau lien et non dans la boîte de fantaisie. Qu'est-ce que je fais de mal et que dois-je faire pour le corriger?

Answer 1

L'a corrigé.

Au lieu d'utiliser l'attribut href, j'ai appelé fancybox directement à partir du gestionnaire onclick pour le noeud me donner ceci:

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

Ce qui fonctionne!