jquery - 花式盒子上的花式盒子

Question

我试图找出一种方法，我单击图像并出现一个带有 3 个按钮的精美框，当我单击任何按钮时，我会使用精美的框获得一个画廊。那可能吗？我想要一个 Fancy box 1:iFrame-->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

...这对带有按钮的框和图像库都适用。

见工作演示