我不知道这是否是一个错误,或者是否只是 fancybox 不允许的东西。 是否可以拥有一个包含 HTML 元素的画廊? 我几个小时以来一直在尝试这样做,但找不到好的方法。
HTML:
<a href="#" class="fancy" data-fancybox-type="html" rel="fancy">See more</a>
<div class="content">my content 1</div>
<a href="#" class="fancy" data-fancybox-type="html" rel="fancy">See more</a>
<div class="content">my content 2</div>
<a href="#" class="fancy" data-fancybox-type="html" rel="fancy">See more</a>
<div class="content">my content 3</div>
JavaScript:
jQuery(".fancy").on('click', function(){
jQuery.fancybox({
content: jQuery(this).next().html(),
scrolling: 'no',
autoSize: false ,
height:250,
width:630,
padding:0
});
return false;
});
最佳答案
可以有一个 html
元素库,但是您需要首先了解它的确切含义。
如果您想要的是“我的内容 1”、“我的内容 2”和“我的内容 3”(如在你上面的代码中)在 fancybox 画廊中,那么你必须正确地构建你的 html。
首先,每个链接都应通过定位其 ID 来指向特定内容,例如:
<a href="#content1" class="fancy" rel="fancy">See more (content 1)</a>
...上面的行意味着您有 content 1
html,如下所示:
<div id="content1" class="content">my content 1</div>
...因此文本my content 1
将是图库中第一项的实际content
(共享相同rel
的链接) code> 属性将成为 fancybox 库的一部分)
您可以将所有目标内容分组到隐藏的 div
中,例如:
<div style="display:none">
<div id="content1" class="content">my content 1</div>
<div id="content2" class="content">my content 2</div>
<div id="content3" class="content">my content 3</div>
</div>
并让您的链接仅可见
<a href="#content1" class="fancy" rel="fancy">See more (content 1)</a>
<a href="#content2" class="fancy" rel="fancy">See more (content 2)</a>
<a href="#content3" class="fancy" rel="fancy">See more (content 3)</a>
查看画廊在此 JSFIDDLE 中的工作
另一方面,如果你使用data-fancybox-type="html"
属性,fancybox实际上会解析html代码,所以如果你有一个链接例如上面的例子
<a href="#content1" class="fancy" data-fancybox-type="html" rel="fancy">See more (content 1)</a>
... fancybox 的内容不会是上面提到的 jsfiddle 中的 my content 1
而是 #content1
因为 fancybox 会解析链接的 html
查看新 JSFIDDLE
关于jquery - 当内容为 html 时,Fancybox 无法生成幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21440979/