FancyBox requested content cannot be loaded. Using handlebars

Question

I'm trying to load some text from a div into a fancybox, this works fine when I name the divs by hand, e.g

<a class='fancybox' href="#inline">Lightbox</a>
<div id='inline' style="display: none;">test</div>

However when the id's are named using handle bars,

<a class='fancybox' href="#{{this}}">Lightbox</a>
<div id='{{this}}' style='display: none;'>test</div>

I get the error

"The requested content cannot be loaded. Please try again later."

Looking in Developer Tools I can see that the id's are identical

Screenshot from developer tools

Im using the following code to load the FancyBox

$(document).ready(function() {
  $(".fancybox").fancybox({
		fitToView	: false,
		autoSize	: true,
		closeClick	: false,
		openEffect	: 'none',
		closeEffect	: 'none',
		type        : 'inline',
	});
});

Answer 1

according to screen shot and as this fix the issue:

<a class="fancybox" href="#Media Ninja">...</a>
<div id="Media Ninja" style="display: none;">

should be:

<a class="fancybox" href="#Media-Ninja">...</a>
<div id="Media-Ninja" style="display: none;">

which means you should check the id variable to be one specific id pointing to a specific div tag.