I created an inline SVG diagram where the boxes in the diagram are linked to (View) pages. I want the links to pop up in a colorbox using class="colorbox-node." The links work fine when outside of the SVG. I did manage to get the links contained within the SVG to pop up a colorbox, and it appears that they are successfully pulling the content, but they keep loading and throwing this error over and over:
Uncaught TypeError: undefined is not a function
d
x.dequeue.animate.complete
e.complete
c.fx.step
e
c.extend.tick
If I comment out the first .show() in the following line of jquery.colorbox-min.js, I can get the node to load, but not properly:
R.html(_.get("title")).show(),L.show(),s>1?("string"==typeof _.get("current")&&F.html(_.get("current").replace("{current}",z+1).replace("{total}",s)).show()
Any ideas about how to get this to work? I think using SVG and Colorbox Node together makes a lot of sense.
Thanks!
Comments
Comment #1
andileco CreditAttribution: andileco commentedI see from jQuery that the html() method is not available on XML documents...which I'm guessing is the problem because SVG is XML. Is there a method I could use to replace that?
Thanks again!
Comment #2
andileco CreditAttribution: andileco commentedComment #3
iLLin CreditAttribution: iLLin commentedYou can try manually calling the colorbox operation on click.
Comment #4
andileco CreditAttribution: andileco commentedThanks for your input, @iLLin. I was not able to get that to work, unfortunately. I've pasted a sample of my SVG below for anyone who wants to try this themselves:
Comment #5
iLLin CreditAttribution: iLLin commentedDid you resolve this? I am closing this down as I'm not sure how much more help I can give you. You may want to consider hiding your URL's in the body with CSS. Then on your map, applying some click method to click the URL that has the colorbox-node stuff attached on it. That is probably your best method if it was never figured out anyway.
Comment #6
andileco CreditAttribution: andileco commentedThanks, @iLLin. Here's what I ended up doing:
In my block with the SVG, I added the following JS above the SVG:
And then within the SVG, I added:
<a class="clickable" xlink:href="javascript:open_colorbox('/colorbox/foo/bar')" >
Thanks again!