Triggering Fancybox within SVG

[Stephen Moy]

Hi there,

For the most part my Fancybox (v2.1.5) is all setup and working, so when an anchor is clicked the relevant Fancybox is displayed.

However, I have an SVG when has several shapes (paths) within it. The graphic is a pie chart, so when each 'segment' is clicked I'd like a Fancybox to open displaying information for that 'segment'. However I can't get this to work. I've tried applying an href to the path, that didn't work. And also wrapping the paths in anchors and setting the relevant href or xlink:href but not of this works. If I change the ID within the href to a URL, like http://www.bbc.co.uk, that works fine though. So the link does work in principle.

There are no console errors when viewing the page but on clicking an anchor with an ID in the href I get the following error:

jquery.fancybox.js:288 Uncaught TypeError: element.prop(...).match is not a function
    at SVGAElement.<anonymous> (jquery.fancybox.js:288)
    at Function.each (jquery-1.12.0.min.js:2)
    at Function.open (jquery.fancybox.js:245)
    at SVGAElement.run (jquery.fancybox.js:1953)
    at HTMLDocument.dispatch (jquery-1.12.0.min.js:3)
    at HTMLDocument.r.handle (jquery-1.12.0.min.js:3)

I've heard Fancybox v3 might have some new features to allow this to work out the box but unfortunately I can't really upgrade as the current fancybox.js is a core file of a platform that has several html apps running off it. So updating that could break everything that currently works - also, I don't think this client will pay for it!

So does anyone have an idea on how to get this to work? I had the Fancybox's working within an html image map (map/area) but I can't apply hover styles to that and also the clickable areas aren't as accurate as the SVG.

Cheers,

Steve

[Stephen Moy]

I got some help with this on StackOverflow and now everything seems to work ok. I thought I'd update this post incase someone else is looking for a similar solution but also maybe someone can shed some light on why this works as it looks quite similar to how I normally setup Fancybox. While I don't fully understand it, the issue seemed to be based around "Strangely, jQuery prop('class') returns object on svg elements, but fancyBox expects string".

So as I normally load my Fancybox like this: `$(".fancybox").fancybox({ FB OPTIONS HERE });`

It was recommended I change the call to this, which seems to work...

var fbOpts = {

margin: [20,40,20,40],

padding: [20,20,0,20],

openEffect: 'fade',

//openEasing: 'easeInQuad',

openSpeed: 400,

title: false,

scrolling : 'no', // turns off scrolling in box.

fitToView : false, // allows box to overflow out of viewport.

autoSize: false, // needs to be turned on for width/maxWidth to work.

height: 'auto', // if autoSize is set to 'false', this needs to be 'auto' so height matches content.

width: '100%',

minHeight: 0,

maxWidth: 900,

helpers: {

overlay: {

 showEarly : false

}

}

};

$(document).ready(function() {

$('.fancybox').on('click', function() {

$.fancybox.open($.extend({}, fbOpts, {href : $(this).attr('href')}));

});

});

As far as I can tell, this hasn't broken what originally worked either, can anyone elaborate a little on when the .open seems to fix the issue?

Thanks again!