单页应用程序和内联 Fancybox 无法正常工作答案

【问题标题】：Single Page Application and Inline Fancybox not working properly单页应用程序和内联 Fancybox 无法正常工作
【发布时间】：2013-03-19 15:42:36
【问题描述】：

我正在尝试制作 SPA 并将 Hot Towel 模板与 durandal 一起使用。到目前为止，我已经成功地在我的水疗中心添加了一个 Fancybox，它显示了一张图片

<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();
        });

    });

这工作不太正常，但还可以；）

现在我想像这样在fancybox中有一个自己的内联：

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

点击时没有：<a class="fancybox-thumb" href="#inline">Inline</a> 我确实得到了带有我的信息的fancybox。但是 url 被设置回 localhost:2321/#inline 所以我被重定向回了家，但我确实看到了fancybox。我该如何解决这个问题，以便花式框在我的 SPA 中显示在正确的页面并停留在那里？

克。乐华

【问题讨论】：

$('#label').click() 是做什么的？我认为您不需要它，因为那是将fancybox 绑定到.fancybox-thumb 的目标……您不需要将#inline 绑定到fancybox，因为这是您的目标项目。
那来自其他东西，但在这种情况下没有做任何事情

标签： html fancybox-2 single-page-application durandal

【解决方案1】：

我已经搞定了；）

这就是我所做的，

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;
        });

再见

【讨论】：

这比它应该的要复杂得多......但至少你对此感到满意。
@JFK 你知道更好的方法吗？ ;)
查看我的答案以获得更简单的方法。

【解决方案2】：

如果你已经初始化了fancybox

$(".fancybox-thumb").fancybox({
    openEffect: 'elastic',
    closeEffect: 'elastic',
    helper: {
        title: {
            type: 'outside'
        },
        thumbs: {
            width: 50,
            height: 50
        }
    }
});

那么您可以为您的 images 和您的 inline 内容使用相同的脚本，因此图片的链接：

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

以及 inline 内容的链接：

<a class="fancybox-thumb" data-fancybox-type="inline" href="#inline">Inline</a>

请注意，我们添加了data-fancybox-type="inline" 属性来定义此特定项目的内容type。

你的 inline html 结构可以保持不变：

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

见JSFIDDLE

【讨论】：