如何添加隱藏塊和切換按鈕到fancybox標題？

我想在每個fancybox圖片下面有一個按鈕，當點擊時顯示一個隱藏塊。如何添加隱藏塊和切換按鈕到fancybox標題？

我做了一個簡單的切換的例子，但它並不裏面的fancybox工作：

$(document).ready(function() { 
    $("button").click(function() { 
     $("p").toggle(1000); 
    }); 

    $(".fancybox") 
     .attr('rel', 'gallery') 
     .fancybox({ 
     beforeLoad: function() { 
      this.title = $(this.element).attr('caption'); 
     } 
    }); 
});

http://jsfiddle.net/azuron/koy9x64v/19/

來源

2014-11-23 Viktor Erepanov

您的代碼顯示沒有嘗試創建您所解釋的內容，並且您想要執行的操作尚不清楚。 – MrUpsidown 2014-11-23 21:23:30

這就是我想創建的 [鏈接]（http://jsfiddle.net/koy9x64v/20/） – 2014-11-24 06:30:51

首先，你可能反而設置文本只（不包含HTML標籤）要切換一個（HTML5）內data屬性，如：

<a href="image01.jpg" data-caption="text to hide and seek" class="fancybox">open image</a>

二，打造的fancybox的title從beforeLoad回調中，並添加toggler按鈕，如：

beforeLoad: function() { 
    var _caption = 
     "<button class='toggler'>toggle</button>" + 
     "<div style='display:none' class='caption'>" + 
     $(this.element).data("caption") + "</div>"; 
    this.title = _caption; 
}

注意，你將創建你所需要的_caption變量而不是內部的HTML結構將其寫入data屬性中。另外請注意，我們將類添加到創建的元素，以便稍後操作它們。

第三，綁定click事件觸發afterShow回調像內的.toggle()方法：

afterShow: function() { 
    $(".fancybox-title").on("click", ".toggler", function() { 
     $(".caption").toggle(400); 
    }); 
}

通知我們使用在其委託的形式.on()方法。

而且最後但並非最不重要的，倒不如設定的fancybox 標題type作爲inside一個清晰的佈局，從而增加像助手API選項：

helpers: { 
    title: { 
     type: "inside" 
    } 
}

見JSFIDDLE

來源

2014-11-24 07:40:30 JFK

非常感謝你這就是你需要的！一切正常！ – 2014-11-24 08:06:31

如何添加隱藏塊和切換按鈕到fancybox標題？

回答

相關問題