在wordpress中使用fancybox加載內聯內容

我想在一個自定義WordPress頁面模板中使用Fancybox加載內聯內容。燈箱顯示但顯示以下錯誤，而不是內聯內容。在wordpress中使用fancybox加載內聯內容

錯誤：「請求的內容無法加載，請稍後再試。」

這裏是我使用的JavaScript：

$(document).ready(function($) { 
    $('a[href="#contact"]').fancybox({ 
     helpers: { 
      overlay: { 
       opacity: 0.98, 
       css: { 'background-color': '#fff' } 
      } 
     } 
    }); 
});

這裏是我想用的fancybox顯示HTML。

<a href="#contact">Inline content over here.</a>

請注意，我正試圖在自定義wordpress頁面模板中完成此操作。任何幫助將不勝感激。

來源

2012-09-16 akshitsethi

其中的fancybox的版本您使用的？ – jimp

我正在使用Fancybox的最新版本。它是2.1 IMO。 – akshitsethi

你必須改變你的HTML：

HTML：

<a href="#contact">Inline content over here.</a> 
<div id="contact" style="display:none">Inline content over here</div>

例子：http://jsfiddle.net/fU54x/839/

如果你想保持相同的HTML，只是顯示來自<a>標籤的內容，您必須更改t他燈箱腳本在此模式下：

相同的HTML：

<a href="#contact">Inline content over here.</a>

JS：

$('a[href="#contact"]').click(function(){ 
    var $this = $(this); 
    $.fancybox({ 
     helpers: { 
      overlay: { 
       opacity: 0.98, 
       css: { 'background-color': '#fff' } 
      } 
     }, 
     content: $this.html() 
    }); 
});

我更新的例子還有：

點擊這裏：http://jsfiddle.net/fU54x/840/

來源

2012-09-16 16:58:02 AlexC

我不知道Fancybox會遵循內部URL。太好了！我的工作也是，但你的第一個例子不需要象我這樣的'content'參數就是更清潔的IMO。我喜歡。 – jimp

嘗試使用content argument Fancybox。

$(document).ready(function($) { 
    var inlineContent = $('#inlineContent').html(); 
    $('a[href="#contact"]').fancybox({ 
     content: inlineContent, 
     helpers: { 
      overlay: { 
       opacity: 0.98, 
       css: { 'background-color': '#fff' } 
      } 
     } 
    }); 
});

標記：

<a href="#contact">Link</a> 
<div id="inlineContent" style="display:none;">Inline content over here.</div>

來源

2012-09-16 17:00:03 jimp

在wordpress中使用fancybox加載內聯內容

回答

相關問題