Single Page Application And Inline Fancybox Not Working Properly
I'm trying to make a SPA and use the Hot Towel template with durandal. So far I have succesfully added a Fancybox to my spa and it shows a image 
<aclass="fancybox-link">Inline</a><divstyle="display: none"><divid="inlineContent"style="width:1000px;"><h2>Lorem ipsum dolor sit amet</h2><p><aid="add_paragraph"title="Add"class="button button-blue"href="javascript:;">Add new paragraph</a> <ahref="javascript:$.fancybox.close();">Close</a></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'             
            });
            returnfalse;
        });
Bye bye
Solution 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) :
<aclass="fancybox-thumb"rel="fancybox-thumb"href="http://farm9.staticflickr.com/8486/8225588056_d229e8fe57_b.jpg"title="Porth Nanven (MarcElliott)"><imgalt=""src="http://farm9.staticflickr.com/8338/8224516167_bc7a5f6699_m.jpg" /></a>and the link for the inline content :
<aclass="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 :
<divid="inline"style="display:none;width:500px;"><p><aid="add_paragraph"title="Add"class="button button-blue"href="javascript:;">Add new paragraph</a> <ahref="javascript:$.fancybox.close();">Close</a></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>See JSFIDDLE
Post a Comment for "Single Page Application And Inline Fancybox Not Working Properly"