单页应用程序和内联Fancybox无法正常工作 [英] Single Page Application and Inline Fancybox not working properly

问题描述

我正在尝试制作SPA，并使用带有杜兰达的热毛巾模板。
到目前为止，我已经成功地将一个Fancybox添加到我的水疗中心，并显示图像

fancybox-thumbrel =fancybox-thumbhref =http://farm9.staticflickr.com/8486/8225588056_d229e8fe57_b.jpgtitle =Porth Nanven（MarcElliott）>
< img src =IMAGEPATHalt =/>
< / a>

$ b $（document）.ready（function（）{
$（。fancybox-thumb）。fancybox（{
openEffect：'elastic'，
closeEffect：'elastic'，
helper：{
title：{
type：'outside'
}，
大拇指：{
宽度：50，
height：50
}
}
}）;

$（'＃label'）。click（function（）{
$（'＃inline'）。fancybox（）;
}）;

}）;

这是行不通的，但没关系;）

$ b $

 < div id =inline现在我想在像这样的fancybox中拥有自己的内联：风格= 显示：无;宽度：500像素; > 
< p> 
 & nbsp; 
< a href =javascript：$。fancybox.close（）;>关闭< / a> 
< / p> 
< p> 
 Lorem ipsum dolor sit amet，consectetur adipiscing elit。 
< / p> 
< / div> 
  

当我点击时：< a class =fancybox-thumb href =＃inline>内联< / a>
我的信息获取fancybox。但url被重新设置为localhost：2321 /＃inline，所以我被重定向回家，但我确实看到了fancybox。我该如何解决这个问题，以便fancybox在我的SPA中显示一个正确的页面并保持在那里？

Gr。 Leroy

解决方案

我已经得到了这个工作;）

我做了什么，

HTML：

 < a class = 的fancybox链路 >内嵌< / A> 
 
< div style =display：none> 
< div id =inlineContentstyle =width：1000px;> 
< h2> Lorem ipsum dolor sit amet< / h2> 
 
< p> 
 & nbsp; 
< a href =javascript：$。fancybox.close（）;>关闭< / a> 
< / p> 
< p> 
 Lorem ipsum dolor sit amet，consectetur adipiscing elit。 
< / p> 
< / div> 
< / div> 
  

Javascript：

 <点击（功能（e）{
 $ .fancybox（{
 content：$（'＃inlineContent'）。html（），code> $（a.fancybox-link 
 type：'inline'
}）; 
 return false; 
}）; 
  

再见

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

<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>
            &nbsp;
            <a href="javascript:$.fancybox.close();">Close</a>
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
</div>

No 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?

Gr. Leroy

解决方案

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>
                &nbsp;
                <a href="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'             
            });
            return false;
        });

Bye bye

这篇关于单页应用程序和内联Fancybox无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！