Fancybox中沒有顯示圖像

我無法讓fancybox在我正在構建http://www.nomadicdrift.com/test/kaniwa#events的網站上顯示其相應的圖像。這是我在WordPress平臺上設置的一個自定義頁面組合主題。Fancybox中沒有顯示圖像

如果您按照活動部分的鏈接，您會在位置等圖庫中看到1個圖形項目。我將這個圖像設置爲fancybox圖庫，但是當您點擊它時，它會打開fancybox界面，但不會在圖像中放置圖像，即使它應該。所以這就是問題......圖像不會出現在fancybox中，而是我看到的只是框架。

下面是我在顯示HTML：

<figure> 
<a class="fancybox" data-fancybox-type="Fashion Show de Paris, France" href="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/NM2.jpg"> 
<img class="attachment-evento wp-post-image" width="231" height="191" title="NM" alt="NM" src="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/NM2-231x191.jpg"> 
</a> 
<figcaption> 
<a class="fancybox" data-fancybox-type="Fashion Show de Paris, France" href="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/CEDESAN.jpg"> </a> 
<h4>Fashion Show de Paris, France</h4> 
</figcaption> 
</figure>

我不跟，我用來獲取輸出，因爲我覺得問題出在其它地方的PHP要你厭煩。

***我試圖在網站上建立一個簡單的標準fancybox畫廊，但它給了我同樣的問題，導致我相信問題比html標記更深。我也成功地將這個標記用於另一個網站上的一個縮略圖fancybox圖庫。

我想也許這是由於我使用的.js文件中的一些衝突。我試着一個接一個地卸載所有的插件/插件（不是太多），而且仍然有相同的結果。我在functions.js文件中擁有所有我個人的javascript，這是我使用標準$("a.fancybox").fancybox();將fancybox插件稱爲fancybox插件的地方。

我已經在其他網站上安裝過此插件，並已廣泛搜索答案，所以任何幫助非常感謝。

感謝，肖恩

來源

2012-09-27 seansean11

那麼，你的代碼可能看起來語義正確對於一個fancybox，但不是。你有的問題是，fancybox使用data-fancybox-type屬性來確定它應該打開什麼type的內容（在你的情況是一個圖像庫），但「時裝秀巴黎，法國」不說任何fancybox所以內容的type未知或未定義，因此爲空框。

該屬性的有效選項應該是image，iframe，ajax，html或inline。可能你打算使用data-fancybox-group="gallery_name_here"。查詢https://stackoverflow.com/a/9037826/1055987瞭解更多信息。

你可以嘗試刪除data-fancybox-type屬性（預留的fancybox） - 或 - 在重命名的東西像

data-description="Fashion Show de Paris, France"

...供自己使用，所以不會有衝突的fancybox。

順便說一句，你有另外一個問題是，你的z-index頭（#header）比的fancybox z-index（這大約是8010默認情況下）高（9998），所以我會建議您降低#header的z-index ，否則fancybox關閉按鈕將放在它後面。

Saludos a la tierra del buencafé。

來源

2012-09-27 07:26:17 JFK

非常感謝JFK ... Saludos de la sierra Lenca。我的問題就是這樣。我使用了一個屬性「data-fancybox-type」而不是「data-fancybox-group」。總是那些讓你失望的小錯誤。我本可以花費無數時間試圖弄清楚這一點。現在，它已關閉，以瞭解如何讓fancybox在打開時將我帶到頁面的頂部。 – seansean11

你能嘗試

<figure> 
    <a class="fancybox" data-fancybox-type="Fashion Show de Paris, France" href="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/NM2.jpg"> 
     <img class="attachment-evento wp-post-image" width="231" height="191" title="NM" alt="NM" src="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/NM2-231x191.jpg"> 
    </a> 
    <figcaption> 
     <h4>Fashion Show de Paris, France</h4> 
    </figcaption> 
</figure>

如果只能留下一個<a class="fancybox"/>

來源

2012-09-27 02:39:52

正如我在下面解釋的，我相信我的代碼在1縮略圖設置fancybox畫廊從語義上是正確的。你給我上面的代碼仍然有相同的沒有圖像的問題。有關更多信息，請參閱此鏈接：http://stackoverflow.com/a/9136987/1544587。我認爲問題在於別處。不過謝謝。 – seansean11

刪除孤立的：

<a class="fancybox" data-fancybox-type="Fashion Show de Paris, France" href="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/CEDESAN.jpg"> </a>

來源

2012-09-27 02:43:35

這實際上會消除我的第二張圖庫。我正在從一個縮略圖設置一個畫廊。這解釋了標記http://stackoverflow.com/a/9136987/1544587。我已經建立了另一個語義相同的站點，但它出於某種原因起作用。這讓我感到困惑。 – seansean11

你能比較一下代碼嗎？ –

Fancybox中沒有顯示圖像

回答

相關問題