FancyBox returns「請求的內容無法加載，請稍後再試。」與鏈接

我正在使用Fancybox顯示內聯內容（與圖像鏈接到一個新頁面的分區）。模式中的div和圖片顯示效果很好，但點擊圖片進入新頁面時，我會收到「請求的內容無法加載，請稍後再試。」錯誤。FancyBox returns「請求的內容無法加載，請稍後再試。」與鏈接

的的fancybox的javascript如下：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".fancybox").fancybox().hover(function() { 
      $(this).click(); 
     }); 
     $("#fancybox-outer").fancybox().mouseleave(function() { 
       $("#fancybox-overlay").click(); 
     }); 
    }); 
</script>

並適用於HTML的下列片段：

<li class="fancybox-outer"> 
    <a id="inline" href="#hover-image_0" class="fancybox"> 
     <img src="http://website.com/file/id:63" style="margin-top: 32px" /> 
    </a> 
    <p><a href="http://website.com/template/view/18">1G2A</a></p> 
    <div style="display: none;"><div id="hover-image_0"><a href="http://website.com/template/view/18"><img src="http://website.com/file/id:64/ext:.png" class="img" /></a></div></div> 
</li> 

<li class="fancybox-outer"> 
    <a id="inline" href="#hover-image_1" class="fancybox"> 
     <img src="http://website.com/file/id:60" style="margin-top: 32px" /> 
    </a> 
    <p><a href="http://website.com/template/view/17">17</a></p> 
    <div style="display: none;"><div id="hover-image_1"><a href="http://website.com/template/view/17"><img src="http://website.com/file/id:61/ext:.png" class="img" /></a></div></div> 
</li>

有誰看到什麼可能導致的問題，或者我需要糾正呢？

謝謝！

更新：2012年1月19日 - 我執行我的服務器作爲第一個答案（http://estorkdelivery.com/example/example.html）在相同的測試，發現我得到了相同的響應返回。所以它似乎與我的服務器有關。

我仍然需要這個問題的幫助。有人有主意嗎？

謝謝！

更新：2012年1月28日 - 我一直在努力找到一個解決這個問題，但我已經用完了時間，去了一個完全不同的解決方案。我保持這個問題是開放的，以防其他人在相同的錯誤中運行或最終找到解決方案。謝謝！

來源

2012-01-18 Yazmin

你的方法有很多問題：

首先承擔未記住的fancybox得到來自href屬性的任何選擇的約束它，因此該鏈接的內容

<a class="fancybox" href="{target}" ...

應綁定到的fancybox通過以下腳本爲了工作

$('.fancybox').fancybox();

很明顯，但在你的方法，打開fancybox內的鏈接（，其目標是雅虎例如）不綁定到fancybox本身;它會嘗試再次啓動Fancybox，但是沒有指出這次的內容應該是什麼，因此錯誤「請求的內容無法加載，請稍後再試。」換句話說，鏈接（在內聯內容中）<a href="http://yahoo.com" ...未綁定到fancybox。

裏面的fancybox鏈接能正常工作和加載內容動態（不被綁定到的fancybox）的唯一方法是在當前的內容是外部html文件和的fancybox type設置爲iframe（不是你的情況下）

二，你打開一個圖像，這樣的fancybox的type設置爲image默認，但你假裝加載不同類型的內容在同一盒（雅虎實例），這將需要設置type到iframe等選項如width和height。

三，因爲使用的是內嵌的內容，請注意在v1.3.x現有錯誤及其解決方法，以避免進一步的問題，you can learn more here

最後，我不只是說教在這裏，它更像是關於你的問題發生了什麼的解釋......但好消息是，你只需要添加更多的代碼行，使其按照你想要的方式工作：

1：您需要爲您想要第二次打開的每種類型的內容創建一個fancybox腳本（除了現有的內容之外），所以在你的例子中你想點擊fancybox裏面的圖片，並打開雅虎......然後創建這個腳本

$('.fancyframe').fancybox({ 
'type':'iframe', 
'width': 600, //or whatever you want 
'height': 300 
});

2：內隱藏的內聯內容設置類的鏈接，所以這段代碼：

<div style="display: none;"> 
<div id="hover-image_0"> 
    <a href="http://www.yahoo.com"><img src="1_b.jpg" class="img" /></a> 
</div> 
</div>

現在看起來應該

<div style="display: none;"> 
<div id="hover-image_0"> 
    <a class="fancyframe" href="http://www.yahoo.com"><img src="1_b.jpg" class="img" /></a> 
</div> 
</div>

照此爲每個隱藏的內聯內容。如果你想在fancybox中打開另一種類型的內容，只需相應地創建一個腳本。你的代碼的其餘部分是OK（我並不介意火的fancybox懸停）

旁註：像谷歌，雅虎，jQuery的網站和其他一些不會的fancybox打開。還要確保你有合適的DOCTYPE fancybox正常工作（您的示例頁面沒有任何）。有關說明，請參見Unable to load google in iframe in fancybox。

來源

2012-01-29 09:09:21 JFK

哇！ ''同時確保你有適當的DOCTYPE for fancybox正常工作' – 2014-09-19 08:49:15

我只是重新創建你的測試我的本地機器上，它爲我工作正常（我跑這從的fancybox的演示文件夾中安裝）：

<html> 
<head> 
<title>jQuery Fancybox Test</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script> 
<!-- Add fancyBox main JS and CSS files --> 
<script type="text/javascript" src="../source/jquery.fancybox.js"></script> 
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css" media="screen" /> 
</head> 
<body> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".fancybox").fancybox().hover(function() { 
      $(this).click(); 
     }); 
     $("#fancybox-outer").fancybox().mouseleave(function() { 
      $("#fancybox-overlay").click(); 
     }); 
    }); 
</script> 
    <li class="fancybox-outer"><a id="inline" href="#hover-image_0" class="fancybox"> 
     <img src="1_s.jpg" style="margin-top: 32px" /> 
    </a> 
     <p> 
      <a href="http://www.yahoo.com">Go to Yahoo</a></p> 
     <div style="display: none;"> 
      <div id="hover-image_0"> 
       <a href="http://www.yahoo.com"> 
        <img src="1_b.jpg" class="img" /> 
       </a> 
      </div> 
     </div> 
    </li> 
    <li class="fancybox-outer"><a id="inline" href="#hover-image_1" class="fancybox"> 
     <img src="2_s.jpg" style="margin-top: 32px" /> 
    </a> 
     <p> 
      <a href="http://www.google.com">Go to Google</a></p> 
     <div style="display: none;"> 
      <div id="hover-image_1"> 
       <a href="http://www.google.com"> 
        <img src="2_b.jpg" class="img" /></a></div> 
     </div> 
    </li> 
</body> 
</html>

來源

2012-01-18 16:52:27 Orin

我想在影響FancyBox顯示的代碼的其餘部分...這裏是網站鏈接：http://estorkdelivery.com/template – Yazmin 2012-01-18 16:59:00

我想我已經想通了什麼造成這個問題，至少對我而言。

問題似乎發生在您對與彈出類相同的某個元素上有一個類時。

例如：

<a class="popup" href="#">Open the popup</a>

而且你必須在相同的類名的彈出式的東西，比如：

<div class="popup">some text</div>

你會得到錯誤。試着改變的div類的東西像popup-window - 應該改正錯誤

在您的示例頁面，它的工作對我來說，如果我不要點擊。當你點擊時，你應該採取什麼頁面？你想要它只是去下一個圖像？

根據我的個人喜好，我不關心懸停時的激活。它變得非常混亂，特別是當大多數人去本能地點擊圖像時。但在你的情況下，它會打開懸停，然後他們本能地點擊，然後你得到錯誤。

當你正在使用通常適用的功能時，你會得到同樣的錯誤嗎？

如果你願意，試着給每個圖像一個圖庫名稱的實例像這樣：rel="gallery"，看看會發生什麼。你應該得到下一個/ prev箭頭，並且像你期望的那樣工作。

但說實話，我完全擺脫了懸停功能。或者至少擺脫mouseout（）這可能是最令人煩惱的部分。

只是用它來調用的fancybox操作：

$("a[rel=gallery]").fancybox();

這樣，你可以擺脫所有那些可能引起問題類的。

我希望有幫助。

來源

2012-01-27 16:51:01

感謝您的思想回應。我很感激。使用我設置的示例頁面，我沒有任何重複的類，如您所見，行爲仍在發生......或者我誤解了您的解釋。如果你看看代碼，你可以從內聯內容中看到每個圖片都應該鏈接到一個新頁面 - 例如一個去Google，另一個去雅虎。不幸的是，我必須按照要求的方式保持懸停和鼠標移出功能。 – Yazmin 2012-01-28 17:13:51

好吧，我要說的唯一的事情就是，我會盡量讓它回到你可以設置的最默認設置，並向後工作。 – 2012-02-01 22:59:45

-1

我與Fancybox有同樣的問題。 href和div id中不能有空格或特殊字符。如果您正在使用頁面標題，請使用URL slug。

來源

2012-09-24 13:32:36 Hassan

我剛剛遇到了這個問題。

事實證明，href網址是EXTRA區分大小寫。（如果可能的話）

無論雙重，三重檢查您的href網址，以確保您的案件完全正確。

來源

2013-06-17 19:20:31

我正在檢查所有可能性，並且碰到了@BrettBumeter提到的EXTRA區分大小寫問題。實際上，它「非常區分大小寫」，我不得不將URL（href）路徑從* .jpg修改爲* .JPG（或任何您的文件類型擴展名可能）。改變這個解決了我的問題。

來源

2013-10-21 11:57:18 baron

我的解決辦法是：

<script type="text/javascript"> 
    jQuery(document).ready(function() { 

     $(".fancybox").click(function() { 
      $.fancybox({ 
       'padding'  : 0, 
       'autoScale'  : false, 
       'transitionIn' : 'none', 
       'titleShow'  : false, 
       'showCloseButton': true, 
       'titlePosition' : 'inside', 
       'transitionOut' : 'none', 
       'title'   : '', 
       'width'   : 640, 
       'height'  : 385, 
       'href'   : this.href, 
       'type'   : 'iframe', 
       'helpers'  : { 
           'overlay' : {'closeClick': false} 
           } 

      }); 

      return false; 
     }); 
    }); 
    </script>

來源

2013-11-06 08:51:00