花式盒子上的花式盒子

Question

我试图找出一种方法，当我单击图像时会出现一个带有3个按钮的精美框，当我单击任何一个按钮时，都会使用精美框获得一个图库。 那可能吗？ 我想要一个花哨的盒子1：iFrame->花哨的盒子2：一个图片库

我在某处阅读，其他人则说不是，每个人都在给予不同的帮助？

Answer 1

如果您使用的是fancybox v2.x，就像将fancybox绑定到带有按钮和图像库的框一样容易，因此，要启动带有按钮的fancybox，请创建一个类似HTML

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

.....请注意 ，我们正在使用id="buttonsContainer"定位inline内容。 那么隐藏的 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

...这将同时适用于带有按钮的框和图像库。

参见工作演示