Question

我试图找出一种方法，我点击一个图像和一个花哨的框出现3个按钮，当我点击任何按钮，我得到一个画廊使用花式框。那可能吗？我想要一个Fancy box 1：iFrame - ＆gt; Fancybox 2：One Image gallery

我读到了某个地方，而其他人说不是，每个人都给予不同的帮助吗？

Answer 1

如果您使用的是fancybox v2.x，就像使用按钮和图片库将fancybox绑定到您的盒子一样简单，因此，要使用按钮启动fancybox，请创建一个类似HTML的

<a class="fancybox" href="#buttonsContainer"><img src="images/01t.jpg" alt="" /></a>

..... 通知我们将inline内容定位为id="buttonsContainer"。然后隐藏 html内容可以像

<div style="display: none;">
 <div id="buttonsContainer">
  <a class="fancybox myButton" href="images/01.jpg" data-fancybox-group="gallery01" title="gallery 01">open gallery 01</a>
  <a class="fancybox myButton" href="images/02.jpg" data-fancybox-group="gallery02" title="gallery 02">open gallery 02</a>
  <a class="fancybox myButton" href="images/03.jpg" data-fancybox-group="gallery03" title="gallery 03">open gallery 03</a>
 </div>
 <div>
  <a class="fancybox" href="images/04.jpg" data-fancybox-group="gallery01" title="gallery 01"></a>
  <a class="fancybox" href="images/05.jpg" data-fancybox-group="gallery02" title="gallery 02"></a>
  <a class="fancybox" href="images/06.jpg" data-fancybox-group="gallery03" title="gallery 03"></a>
  <a class="fancybox" href="images/07.jpg" data-fancybox-group="gallery01" title="gallery 01"></a>
  <a class="fancybox" href="images/08.jpg" data-fancybox-group="gallery03" title="gallery 03"></a>
 </div>
</div>

注意我们已设置为部分，一个用于按钮（buttonsContainer），另一个用于图库。

自定义fancybox脚本可以像

一样简单

$(document).ready(function(){
 $(".fancybox").fancybox();
}); // ready

...这对于包含按钮的框和图像库都适用。

请参阅WORKING DEMO

Fancybox在一个奇特的盒子上

1 个答案: