Fancybox在一個奇特的盒子上

Question

我想找出一種方法，我點擊一個圖像和一個奇特的盒子出現3按鈕，當我點擊任何按鈕，我得到一個畫廊使用奇特的盒子。 這可能嗎？ 我想要一個花式框1：iFrame - > Fancybox 2：一個圖像庫

我看了一個地方，其他人說它不是，每個人都給不同的任何人都可以幫忙嗎？

Answer 1

如果您正在使用的fancybox版本2.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