Zoom Menu & Fancy Box for Images
<p>I am using a menu with thumbnail image zoom when mouse over. Also have fancy box for my product images. The product images are set to pop-up overlay that doesn't work, from a little investigation I figured out that the script from my menu bar was causing the fancy box overlay from opening. Any ideas how i can combine the two so that each work properly? </p>

<p>for image I am using - fancy Box</p>

<p>for navigation bar menu i am using- Slide Down Box Menu</p>

<p>Any help with this would be great.</p>

<hr>

<h2>Slide Down Box Menu Script below</h2>

<pre><code>$(function() {

            $('#sdt_menu &gt; li').bind('mouseenter',function(){
                var $elem = $(this);
                $elem.find('img')
                     .stop(true)
                     .animate({
                        'width':'170px',
                        'height':'170px',
                        'left':'0px'
                     },400,'easeOutBack')
                     .andSelf()
                     .find('.sdt_wrap')
                     .stop(true)
                     .animate({'top':'140px'},500,'easeOutBack')
                     .andSelf()
                     .find('.sdt_active')
                     .stop(true)
                     .animate({'height':'170px'},300,function(){
                    var $sub_menu = $elem.find('.sdt_box');
                    if($sub_menu.length){
                        var left = '170px';
                        if($elem.parent().children().length == $elem.index()+1)
                            left = '-170px';
                        $sub_menu.show().animate({'left':left},200);
                    }   
                });
            }).bind('mouseleave',function(){
                var $elem = $(this);
                var $sub_menu = $elem.find('.sdt_box');
                if($sub_menu.length)
                    $sub_menu.hide().css('left','0px');

                $elem.find('.sdt_active')
                     .stop(true)
                     .animate({'height':'0px'},300)
                     .andSelf().find('img')
                     .stop(true)
                     .animate({
                        'width':'0px',
                        'height':'0px',
                        'left':'85px'},400)
                     .andSelf()
                     .find('.sdt_wrap')
                     .stop(true)
                     .animate({'top':'25px'},500);




            });
        });
    &lt;/script&gt;
</code></pre>
