Cufon and JQUERY conflict (can't get both fancybox and “drop down menu” to work together)

Question

So excuse me for being really new to this....but I shall try my best to detail the prob.

I have a script running on page for fancybox which is this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>


<!-- Add fancyBox -->
<link rel="stylesheet" href="css/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.0.4"></script>

<!-- Optionaly add button and/or thumbnail helpers -->
<link rel="stylesheet" href="css/jquery.fancybox-buttons.css?v=2.0.4" type="text/css"     media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-buttons.js?v=2.0.4"></script>

<link rel="stylesheet" href="css/jquery.fancybox-thumbs.css?v=2.0.4" type="text/css"     media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-thumbs.js?v=2.0.4"></script




ul class="list">

    <li>
        <a class="various fancybox.iframe"     href="http://www.topholidayrecipes.com">Iframe</a>
    </li>

</ul>


<script type="text/javascript">
$(document).ready(function() {
    $(".various").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none'
    });
});
</script>

NOW PROB IS THIS SCRIPT -->

* This script causes my drop down menu (that uses cufon replace function) to be static. And I need this script for the fancy box, but adding this disables the animation affect of the drop down.

The buttons located at the top right of the page works originally at: www.topholidayrecipes.com

And here is a page that uses the fancy box (link located in the recipes box named "iframe") but here the menu is static: http://topholidayrecipes.com/artichokes-recipes.html

Please help me with this.....I will be very grateful : )

Answer 1

You have a little bug in your js code:

._shadowBox()

that is creating this error:

Error: 
shadowBox is not a function
Source File: http://topholidayrecipes.com/artichokes-recipes.html
Line: 717

and that breaks the rest of your js code (the animation affect of the drop down included).

Maybe you forgot to delete that line after unloading shadowbox and moving to fancybox

Answer 2

yes i tried by removing those lines of codes, but i discovered i dont need those codes anyways. what i discovered is this line of code in particular that seems to cause problems directly with the drop down:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

i have even downloaded the javascript from google directly and called it in my page another way using:

<script type="text/javascript" src="js/jquery.google.js"></script> 

they both run the same thing and the fancy box works as it should. but i noticed that it is this particular line used for the fancybox that's causing problem with my dropdown menu. as soon as i remove this line of code the drop down works!