Laden von Inline-Inhalten mit Fancybox in WordPress

Ich versuche, Inline-Inhalte mit Fancybox in eine benutzerdefinierte WordPress-Seitenvorlage zu laden. Die Lightbox wird angezeigt, zeigt jedoch den folgenden Fehler anstelle des Inline-Inhalts an.

Der Fehler: “Der angeforderte Inhalt kann nicht geladen werden. Bitte versuchen Sie es später erneut.”

Hier ist das Javascript, das ich verwende:

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

Hier ist das HTML, das ich mit der Fancybox anzeigen möchte.

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

Bitte beachten Sie, dass ich versuche, dies in einer benutzerdefinierten WordPress-Seitenvorlage zu erledigen. Jede Hilfe wird sehr geschätzt.

Sie müssen Ihr HTML ändern:

HTML:

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

Beispiel: http://jsfiddle.net/fU54x/839/

Wenn Sie denselben HTML-Code beibehalten und nur Inhalte aus dem anzeigen möchten <a> Tag müssen Sie das Lightbox-Skript in diesem Modus ändern:

Gleiches 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()
    });
});

Ich habe das Beispiel auch aktualisiert:

Klick hier : http://jsfiddle.net/fU54x/840/

Versuchen Sie es mit der inhaltliches Argument zu Fancybox.

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

Auszeichnung:

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