Single Page Application and Inline Fancybox not working properly - html

Question

I'm trying to make a SPA and use the Hot Towel template with Durandal. So far I have successfully added a Fancybox to my spa and it shows a image
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8486/8225588056_d229e8fe57_b.jpg" title="Porth Nanven (MarcElliott)">
<img src="IMAGEPATH" alt="" />
</a>
$(document).ready(function () {
$(".fancybox-thumb").fancybox({
openEffect: 'elastic',
closeEffect: 'elastic',
helper: {
title: {
type: 'outside'
},
thumbs: {
width: 50,
height: 50
}
}
});
$('#label').click(function () {
$('#inline').fancybox();
});
});
This is working not that properly but okay;)
Now I want to have a own inline in the fancybox like this:
<div id="inline" style="display:none;width:500px;">
<p>
<a id="add_paragraph" title="Add" class="button button-blue" href="javascript:;">Add new paragraph</a>
Close
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
Now when I click: <a class="fancybox-thumb" href="#inline">Inline</a>, I do get the fancybox with my info. But the url is set back to localhost:2321/#inline so I'm redirected back to home but I do see the fancybox.
How can I solve this, so that the fancybox is shown an the right page in my SPA and stays there?

Answer 1

I have got this working ;)
THis is what I did,
HTML:
<a class="fancybox-link">Inline</a>
<div style="display: none">
<div id="inlineContent" style="width:1000px;">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
<a id="add_paragraph" title="Add" class="button button-blue" href="javascript:;">Add new paragraph</a>
Close
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
Javascript:
$("a.fancybox-link").click(function (e) {
$.fancybox({
content: $('#inlineContent').html(),
type: 'inline'
});
return false;
});
Bye bye

Answer 2

If you already initialized fancybox
$(".fancybox-thumb").fancybox({
openEffect: 'elastic',
closeEffect: 'elastic',
helper: {
title: {
type: 'outside'
},
thumbs: {
width: 50,
height: 50
}
}
});
then you can use the same script for both your images AND your inline content, so the link for the image(s) :
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8486/8225588056_d229e8fe57_b.jpg" title="Porth Nanven (MarcElliott)"><img alt="" src="http://farm9.staticflickr.com/8338/8224516167_bc7a5f6699_m.jpg" /></a>
and the link for the inline content :
<a class="fancybox-thumb" data-fancybox-type="inline" href="#inline">Inline</a>
Notice that we added the data-fancybox-type="inline" attribute to define the type of content for this specific item.
Your inline html structure can remain the same :
<div id="inline" style="display:none;width:500px;">
<p>
<a id="add_paragraph" title="Add" class="button button-blue" href="javascript:;">Add new paragraph</a>
Close
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
See JSFIDDLE