4

カスタムワードプレスページテンプレートで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>

カスタムワードプレスページテンプレートでこれを実行しようとしていることに注意してください。どんな助けでも大歓迎です。

4

2 に答える 2

4

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>タグのコンテンツのみを表示する場合は、次のモードでライトボックススクリプトを変更する必要があります。

同じ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-16T16:58:02.013 に答える
0

Fancyboxのcontent引数を使用してみてください。

$(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-16T17:00:03.000 に答える