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

它＆＃34;工作＆＃34;，但你可以猜到我得到了 The requested content cannot be loaded. Please try again later.错误消息。

修改

嗯，我已经管理了窗口来加载内容，但仍然在努力让图库工作。

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配置中的实际设置会有所不同。希望这有帮助！

如何使用输入类型<按钮>启动fancybox图库？

1 个答案: