在fancybox中使用引導手風琴

我只是試着讓bootstrap手風琴摺疊事件觸發內部花式框。但我不知道如何做到這一點....我有tu使用jQuery生活嗎？要麼...？在fancybox中使用引導手風琴

<a class="fancybox" rel="group" href="/Content/Image/Facteur/1.jpg"> 
    <img class="thumbnail img-responsive" src="~/Content/Image/Facteur/tn/1.jpg"> 
</a> 
<div style="display: none;"> 
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo"> 
     simple collapsible 
    </button> 
    <div id="demo" class="collapse in">...</div> 
</div> 

<script> 
    $(document).ready(function() { 

    $(".fancybox").fancybox({ 

     beforeShow: function() { 
      this.title = '<div class="myTitle">' + $(this.element).next('div').html() + '</div>'; 
     }, 
     helpers: { 
      title: { 
       type: 'inside' 
      }, 
      media: {} 
     } 
    }); 
}); 

</script>

來源

2014-02-15 user2669371

爲''div style =「display：none;」>'添加一個ID，並在'href'內定位該ID，如'href =「＃mytargetID」' – JFK

不確定要了解。我無法設法通過fancybox中的按鈕觸發點擊事件。沒有崩潰。我仍然需要fancybox來顯示JPG。那麼如何將href指向div可以幫助我？ – user2669371

也許我沒有得到。 fancybox的標題是手風琴嗎？ – JFK

OK，我看到的問題是，你要複製的下一個div到的fancybox title。它只複製元素而不復制其屬性（自舉手風琴功能），因此您必須同時傳遞其數據和事件。

然後重命名目標的ID（可摺疊）元件（內部的fancybox title），以避免ID重複（與隱藏元件），所以

嘗試此代碼：

var newTitle; 
$(document).ready(function() { 
    $(".fancybox").fancybox({ 
     beforeShow: function() { 
      // set variable to next div element 
      newTitle = $(this.element).next('div') 
      // clone it with properties 
      .clone(true, true) 
      // change ID to avoid ID duplication 
      .find("#demo").attr("id", "demo2").end() 
      // change the target to new ID 
      .find(".btn.btn-danger").attr("data-target", "#demo2").end() 
      // show as html 
      .html(); 
      // override fancybox title 
      this.title = '<div class="myTitle">' + newTitle + '</div>'; 
     }, 
     helpers: { 
      title: { 
       type: 'inside' 
      }, 
      media: {} 
     } 
    }); 
});

參見JSFIDDLE

來源

2014-02-17 22:35:19 JFK

哇！哇！謝謝！！ – user2669371

在fancybox中使用引導手風琴

回答

相關問題