Fancybox won't work in page with imported header/footer content

[Jesslz]

Hi -

I am using fancybox to display some images, here is an example of my
code:

global.js

$(function() {

// FANCY LIGHTBOX
$(".fancypage").fancybox({
'titleShow' : false,
'width' : '18%',
'height' : '50%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});

$(".fancyimg").fancybox({
'titleShow' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});


});

my html page:

<a href="#.jpg" class="fancyimg" id="hl_product">
<img style="border-width: 0px;" alt="CBD312" src="#.jpg"
class="img_product" id="img_product" />
</a>

This all works great under normal conditions. My problem occurs when
I import header and footer content using: Stream strm =
Client.OpenRead.

If I remove the header and footer content that is acquired by the use
of stream, fancybox works fine. Otherwise, it either opens the image
in a new tab, or does nothing when I click. My guess was that there
might be a jquery conflict from what I was importing, but I have not
been able to find a solution.

Any ideas are greatly appreciated.

Thanks!

[Jesslz]

I further discovered that this problem only occurs when I import
headers and footers. My idea was there might be a jquery conflict,
but I haven't been able to find a jQuery fix that works for me.

[RavanH]

I'd first suggest to use no-conflict wrappers (and document.ready)
just to be safe:

jQuery(document).ready(function($){

$(".fancypage").fancybox({
'titleShow' : false,
'width' : '18%',
'height' : '50%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});

$(".fancyimg").fancybox({
'titleShow' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});

});