如何使用输入类型 <button> 启动 fancybox 画廊？

Question

我正在尝试使用 fancybox 显示一系列内联 html 元素（图库）。

这是我触发 fancybox 的按钮：

<button type="button" class="btn btn-primary fancybox" data-fancybox href="myGallery">Example</button>

这是包含幻灯片的标记。

<section id="myGallery">
    <article rel="gallery1">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12">
                    <p>Slide One</p>
                </div>
            </div>
        </div>
   </article>
   <article rel="gallery1">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12">
                    <p>Slide Two</p>
                </div>
            </div>
        </div>
   </article>
</section>

这是我用来监听按钮点击的 javascript。

$('.fancybox').click(function (event) {
    $.fancybox({
         'type': 'inline',
         'openEffect': 'fade',
         'closeEffect': 'fade',
         'maxWidth': 500,
         'maxHeight': 400,
         'padding': 80
    });
});

它是 "working"，但是你可以猜到我得到了 The requested content cannot be loaded. Please try again later. 错误信息。

编辑

好吧，我已经设法 window 加载了内容，但仍在努力让画廊正常工作。

html

<button type="button" class="btn btn-primary fancybox" 
                      rel="gallery1"
                      data-fancybox-href="#myGallery">
    Example
</button>

<div id="myGallery">
    <article rel="gallery1">One</article>
    <article rel="gallery1">Two</article>
</div>

js

 $('.fancybox').fancybox({
     'type': 'inline',
     'openEffect': 'fade',
     'closeEffect': 'fade',
     'maxWidth': 500,
     'maxHeight': 400,
     'padding': 80
});

Answer 1

解决方案

这是我的解决方案，以防有人遇到同样的问题。

html

<button type="button" class="btn btn-primary fancybox" data-fancybox-href="#myGallery">
    Example
</button>

<section id="myGallery">
    <article class="inlinedata">
        <div class="container-fluid">
            <div class="col-xs-12">Slide One</div>
        </div>
    </article>
    <article class="inlinedata">
        <div class="container-fluid">
            <div class="col-xs-12">Slide Two</div>
        </div>
    </article>
    ...
</section>

js

$('.fancybox').click(function (event) {
    $.fancybox.open($('.inlinedata').get(), {
        'type': 'inline',
         'openEffect': 'fade',
         'closeEffect': 'fade',
         'showNavArrows': true,
    });
});

css

.inlinedata {
    display: none;
}

显然，您的 fancybox 配置中的实际设置会有所不同。希望这对您有所帮助！

如何使用输入类型 <button> 启动 fancybox 画廊？

How do I use input type <button> to launch a fancybox gallery?

jquery

fancybox-2