Question

I am trying to load inline content using Fancybox in a custom wordpress page template. The lightbox shows but is displaying the following error instead of the inline content.

The error: “The requested content cannot be loaded. Please try again later.”

Here is the javascript that I am using:

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

Here is the HTML which I want to display using the Fancybox.

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

Please note that I am trying to get this done in a custom wordpress page template. Any help will be greatly appreciated.

Answer 1

You have to change you HTML :

HTML:

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

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

If you want to keep the same html, and just display content from the <a> tag, you have to change the Lightbox script in this mode:

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

I updated the example as well:

Click here : http://jsfiddle.net/fU54x/840/