Question

Fancybox允许我们根据隐藏的内嵌HTML

触发模态

<div id="inline1" style="width:400px;display: none;">
<p>Modal content 1</p>
</div>

但我无法弄清楚如何使几个内联DIV成为同一个画廊的一部分。

Fancybox说要添加rel =＆＃34; gallery＆＃34;图像使它们成为画廊的一部分，但同样不适用于DIV。

Answer 1

您应该将rel="gallery"添加到触发fancybox的锚点，无论这些锚定位于哪些（图像，内联div等），如：

html：

<a class="fancybox" href="#inline1" rel="gallery">open inline 1</a>
<a class="fancybox" href="#inline2" rel="gallery">open inline 2</a>
<a class="fancybox" href="#inline3" rel="gallery">open inline 3</a>

<div id="inline1" style="width:400px;display: none;">
    <p>Modal content 1</p>
</div>
<div id="inline2" style="width:400px;display: none;">
    <p>Modal content 2</p>
</div>
<div id="inline3" style="width:400px;display: none;">
    <p>Modal content 3</p>
</div>

js：

$(".fancybox").fancybox({
    //API options
});

参见 JSFIDDLE

另一方面，如果您只想要一个触发完整图库的锚点，而不是每个内联div都有一个锚点，那么您最好的选择是以编程方式触发fancybox：

html：

<a class="fancybox" href="#nogo">open gallery of inline divs</a>

<div id="inline1" style="width:400px;display: none;">
    <p>Modal content 1</p>
</div>
<div id="inline2" style="width:400px;display: none;">
    <p>Modal content 2</p>
</div>
<div id="inline3" style="width:400px;display: none;">
    <p>Modal content 3</p>
</div>

注意我们不需要rel属性，因为我们不对分组进行分组。

js：

$(".fancybox").on("click", function () {
    // set gallery targets
    var gallery = [{
        href: "#inline1"
    }, {
        href: "#inline2"
    }, {
        href: "#inline3"
    }];
    // triggers fancybox programmatically
    $.fancybox(gallery, {
        // API options here
    });
    return false; // prevents default and stops propagation 
});

参见 JSFIDDLE

Fancybox通过多个内联DIv

1 个答案: