Download embedded content using fancybox in wordpress

Question

I am trying to load embedded content using Fancybox into a custom Wordpress page template. The lightbox shows, but displays the next error, not the inline content.

Error: "The requested content could not be downloaded. Please try again later."

Here is the javascript I am using:

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

Here is the HTML I want to render using Fancybox.

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

Please note that I am trying to do this in a custom Wordpress page template. Any help would be greatly appreciated.

Answer 1

You need to change the 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 the content from the <a> tag, you must 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 also updated this example:

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

Answer 2

Try using the content argument for Fancybox.

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

Markup:

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