Hi, the first problem I see is that your theme loads its own jQuery library from /wp-content/themes/emmanuelTheme/scripts/jquery-1.3.2.js which is a much older one than the version 1.10 that is loaded by WordPress itself later.
But before solving this, you need to:
1. Enable the Inline Content option on Settings > Media and then
2. Use class “fancybox-inline” instead of “fancybox” for the STAFF link.
Thanks for the reply, the Inline Content on settings was set to images and inline, I have also replaced the class “fancybox” with “fancybox-inline” to no avail; it reloads the page with the object that is being targeted in the URL.
I am using jquery-1.3.2 for some additional functionality that is not supported by 1.10; however I am using no-conflict so that I can run both versions.
Thanks
For class=”fancybox-inline” to work, you need to activate the option “Inline Content” (right under FancyBox) on your Settings > Media admin page.
The option is checked: Enable FancyBox for: Images & Inline content, but it still is not functioning.
O wait, now I see you are still using version 1.3.4.9 in which there is no separate option for inline content yet. Any reason for not upgrading?
I upgraded a couple of weeks back an experienced some problems with it, I had to roll back to a previous version. I will have a look at updating with a will let you know how it works out.
Hi, I have updated to the latest version but it is no longer working at all, please see http://www.esfdev.co.uk/emmanuel/contact-lettings/venue-hire/ I have checked on images and the inline option in settings. Do you have any idea as to why it will stop functioning? Thanks
I do not think you can run two versions of jQuery together like that.
In any case, if you want to stick with version 1.3.4.9 it’s not a problem, just go back to using class=”fancybox” again…
But to go back to the original issue: it’s hard to debug. There is one Uncaught Exception occurring but it does not seem related to this particular issue. What I do notice is that your page source code ends like
</body>
</html> </div><!-- #content -->
</div>
</div><!-- #container -->
</div><!-- #pageWrapper -->
which is not valid… I think these closing div tags need to go before the wo_footer() call. Could you fix that?
Ok, now I see inside http://www.esfdev.co.uk/emmanuel/wp-content/themes/emmanuelTheme/scripts/jquery.tools.min.js there is a third jQuery version 1.4.2 embedded. This is the one causing issues I suspect.
Hi, It seems as though
<div id=”myform” width=”100px” height=”100px”>Content</div>
is removed from and replaced with
<div class=”fancybox-inline-tmp” style=”display: none;”></div>
and it cannot find the content to wrap?
Hi, I wrote a hack that determined when the staff button is hit to change the html contained within div.fancybox-hidden to the table and it seems to work fine now.
Hmmm… still I cannot explain why that content would disappear.
You might try replacing width="100px" height="100px"
(invalid, no px allowed there in fact width and height are not even valid attributes in HTML5) with style="width:300px;height:100px"
and see if that changes anything. But I would bet on that hidden/integrated jQuery 1.4.2 being the source of it all.