使用FancyBox加載內聯內容

嗯，我只是寫這篇文章，希望可以幫助其他人可能遇到同樣的問題。使用FancyBox加載內聯內容

供應商網站上的示例有點含糊，我假設了以下情況。

你有一個href N到一些內容的#id的鏈接。

<a href="#content-div" class="fancybox">Open Example</a>

和你有一個div來保存內容。

<div id="content-div" style="display: none">Some content here</div>

然後你只需通過一個1班輪運行的fancybox。

$(".fancybox").fancybox();

自然，你會認爲的fancybox將複製的內容和改變display: none到display: block，一切都會好的。

但是這不會發生。
它仍然加載的內容，但內容是隱藏的，你有一個空白Fancybox。 *cry*

來源

2010-10-18 Marko

121

解決方法非常簡單，但是花了我大約2小時半頭髮找到它。

只需包裝您的內容與（冗餘）div有display: none和鮑勃是你的叔叔。

<div style="display: none"> 
    <div id="content-div">Some content here</div> 
</div>

瞧

來源

2010-10-18 20:59:41 Marko

這非常例子是在現場的fancybox處理 - 看看例子5 http://fancybox.net/blog – 2010-10-19 12:10:27

@Bobby傑克 - 是的，但他們不」讓它變得非常明顯。如果你環顧網絡，很多人都會遇到和我一樣的問題 - 所以希望這能幫助別人。 – Marko 2010-10-19 20:05:55

它幫助我老兄..我也瘋了..謝謝分享 – mysterious 2011-09-21 12:58:23

我花了很多時間一個很好的協議試圖弄清楚這一點，我做的方式正在經歷的例子的index.html/style.css中自帶打包帶的fancybox安裝。

如果您查看用於演示網站的代碼，並基本上覆制/粘貼，您會沒事的。

爲了得到一個內嵌的fancybox工作，你需要有這個出現在您的index.html文件代碼：

<head> 
    <link href="./fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" /> 
    <script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');</script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 

    $("#various1").fancybox({ 
      'titlePosition'  : 'inside', 
      'transitionIn'  : 'none', 
      'transitionOut'  : 'none' 
     }); 
    }); 
    </script> 
    </head> 

<body> 

    <a id="various1" href="#inline1" title="Put a title here">Name of Link Here</a> 
    <div style="display: none;"> 
     <div id="inline1" style="width:400px;height:100px;overflow:auto;"> 
        Write whatever text you want right here!! 
     </div> 
    </div>

切記要準確瞭解哪些文件夾你的腳本文件都放在以及您在Head標籤中指向的位置;他們必須對應。

我希望這會有所幫助。

來源

2011-09-22 23:15:11 tandy

只是我發現WordPress用戶，

因爲它的聲音，如果你的DIV將返回基於說頭，將常用鏈接了一個新的帖子頁面某些AJAX內容可以明顯看出，一些教程會說由於您在同一頁面上返回發佈數據而返回false，並且返回會阻止頁面移動。但是，如果您返回false，則還會阻止Fancybox2執行此操作。我花了幾個小時試圖弄清那個愚蠢的簡單事情。

因此，對於這些類型的鏈接，只要確保href屬性是希望選擇的散列（＃）div，並且在JavaScript中，請確保您不會返回false，因爲您不再需要。

簡單，我知道^ _^

來源

2012-11-02 21:59:12

使用FancyBox加載內聯內容

回答

相關問題