Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions /

Fancybox with inline content not working


Reply


3 Posts   10235 Views

Avatar
sashion

Community Member, 23 Posts

31 December 2010 at 2:59am

Hey guys,

i´ve some trouble with the jQuery fancybox showing me some inline content.
Pictures and iframes are no problem, but evertime I want to show some hidden text a fancybox opens with the complete content of the hole underlying html-site...
Anyone an idea?

This is the code snippet:

<a class="various1" href="#inline" title="Lorem ipsum dolor sit amet">Inline</a>

<div style="display: none;">
<div id="inline" style="width:200px;height:200px;overflow:auto;">
   This content is supposed to be displayed in my fancybox
</div>
</div>

Thx in advance.
Sash

Avatar
Invader_Zim

Community Member, 141 Posts

1 January 2011 at 3:01am

Well i think it's a matter of the id's Fancybox uses.
Here is a quick rewrite of your snippet, hope that works:

<a id="inline" class="various1" href="#inlinedata" title="Lorem ipsum dolor sit amet">Inline</a>

<div style="display: none;">
<div id="inlinedata">
This content is supposed to be displayed in my fancybox
</div>
</div>

Cheers,
Christian

Avatar
sashion

Community Member, 23 Posts

5 January 2011 at 3:18am

Hey Christian,

thx for you answer. Unfortunately that didn´t solve the problem.

I´ve found out that if I use jquery to replace the href after the silverstripe has loaded it works fine.

Here the snippet:

$("#various1").attr("href", "#inline");

Probably Silverstripe adds the base_tag in front of all intern links so that fancybox doesn´t know what to do with it.
Replacing href after silverstripe actions seems to work.

Cheers,
sash