jQery seems to be blocked inside a Fancybox

[chromax]

Simple JS or jQuery not working in a fancybox. Even if you put it in
callbackOnShow.

Here is a clean simple sample: http://www.chromax.de/portfolio/test/example/index3.html

It’s a very simple jQuery

<script type="text/javascript">
$(document).ready(function() {
$('#hideh1').click(function() {
$
('.content1').toggle();
$
('.content2').toggle();
});
});
</script>

and it is not working in a fancybox. Even when you put it in a iFrame.
Also if you do it
without jQuery, just simple JS.

I urgently need a inline content switch in a fancybox!

[JFK]

I just replied to your inbox with the solution
please publish it ... I am out of time

[chromax]

Big thanks goes to JFK.
He brighten up my brain, and so my life! ;-)
The solution can be so damn simple...

Here is what he wrote:

-----------------------------------------------------------

I guess the issue is because fancybox cannot interpret relative css
references correctly like: $("#hideh1").click(function() you should
use absolute references like:
$("a#hideh1").click(function()

additionally you shouldn't use the same id twice within your html (no
matter one is hidden)

so I re-wrote your code and works perfectly:


the script:

<script type="text/javascript">
$(document).ready(function() {
// jquery function outside fancybox
$('a#hideh1').click(function() {
$('div.content1out').toggle();
$('div.content2out').toggle();
});
//Activate FancyBox
$("a#group").fancybox({
'hideOnContentClick': false,
// jquery function within fancybox
// each css element with absolute reference
'callbackOnShow': function() {
$("a#hideh2").click(function() {
$("div.content1fancy").toggle();
$("div.content2fancy").toggle();
});
},
// re-initialize the hidden div
'callbackOnClose': function() {$("div.content2fancy").hide();}
});
});
</script>


the css:

<style type="text/css">
#hideh1, #hideh2 {cursor: pointer;}
div.content2out,
div.content2fancy {display:none;}
</style>


the html:

<a id="hideh1">do a change</a>
<div class="content1out"><h1>Der TEST11</h1></div> <div
class="content2out"><h1>Der TEST22</h1></div>

<a id="group" href="#chromax">in fancybox</a>

<div id="chromax" style="display:none;">
<a id="hideh2">show it</a>
<div class="content1fancy"><h1>Der TEST11</h1></div>
<div class="content2fancy"><h1>Der TEST22</h1></div> </div>

cheers


-----------------------------------------------------------


And after that hint, I also get the easySlider to work inside the
fancybox!

Just write $("div#slider").easySlider({

and not $("#slider").easySlider({

when you call it with 'callbackOnShow'

[PKP]

Someone please help me adding a wowslider inside fancybox as content. Navigation doesn't work inside fancybox.

[JFK]

@PKP : your request has nothing to do with this thread, open your own question.

BTW, you are asking help for a customized solution .... rather hire a developer