FancyBox > IE8 & IE7 problems

Hello there,
I have a major problem with my Fancybox plugin on IE7 & IE8. the site is working excellent on Chrome, Firefox and Safai. As I was debugging the site I could see that the problem may be caused from the Fancybox Plugin since its the only one not working. In addition I get an error from IE: Invalid Argument. Line:8827 Char:5 This is the URL: http://attia.businesscatalyst.com/ this is my header code -

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>&#1506;&#1496;&#1497;&#1492; &#1504;&#1499;&#1505;&#1497;&#1501;</title>
    <link href="/styles/styles.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../fancybox/jquery.fancybox-1.3.4.css" media="screen" />
    <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico" />
    <link rel="stylesheet" href="http://www.fontface.co.il/fonts/1144.css.aspx" charset="utf-8" />
    <script src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="../fancybox/jquery.fancybox-1.3.4.pack.js">
    <script src="/includes/ice/ice.js" type="text/javascript"></script>
    <script src="js/slides.min.jquery.js"></script>
    <script type="text/javascript" src="/js/jquery.carouFredSel-5.5.0.js"></script>
    <!--[if IE 7]><link rel="stylesheet" type="text/css" href="/styles/IE7.css" /><![endif]-->
    <!--[if IE 8]><link rel="stylesheet" type="text/css" href="/styles/IE8.css" /><![endif]-->
    <!--[if IE 9]><link rel="stylesheet" type="text/css" href="/styles/IE9.css" /><![endif]-->
<script>

    $(function() {
        $( ".button" ).click(function() {
            $( "#contact" ).toggleClass( "active", 1000 );
            $( "#contact_container" ).toggleClass( "active", 1000 );
            return false;
        });
    });

            function goToByScroll(id){
                $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
        }

                $(function(){
            $('#pole1').slides({
                effect: 'fade',
                fadeSpeed: 750,
                crossfade: true,
                generateNextPrev: false,
                randomize: true,
                pagination: false,
                generatePagination: false,
                play: 5500
            });

            $('#pole2').slides({
                fadeSpeed: 750,
                effect: 'fade',
                crossfade: true,
                generateNextPrev: false,
                randomize: true,
                pagination: false,
                generatePagination: false,
                play: 4250
            });
            $('#pole5').slides({
                fadeSpeed: 750,
                effect: 'fade',
                crossfade: true,
                generateNextPrev: false,
                randomize: true,
                pagination: false,
                generatePagination: false,
                play: 6500
            });
            $('#pole6').slides({
                fadeSpeed: 750,
                effect: 'fade',
                crossfade: true,
                generateNextPrev: false,
                randomize: true,
                pagination: false,
                generatePagination: false,
                play: 4000
            });
            $('#pole7').slides({
                fadeSpeed: 750,
                effect: 'fade',
                crossfade: true,
                generateNextPrev: false,
                randomize: true,
                pagination: false,
                generatePagination: false,
                play: 3500
            });

        });
            $(document).ready(function() {
                $(".about1").fancybox({
                'titlePosition'     : 'inside',
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            });


        });

</script>
<link href="/stylesheets/modulestylesheets.css" rel="stylesheet" type="text/css" />

and this is an example of a Fancybox call -

         <div class="project">
<script>
            $(document).ready(function() {
                $("#ikea1").fancybox({
                                'autoScale'               :'true',
                'titlePosition'     : 'inside',
                'transitionIn'      : 'fade',
                'transitionOut'     : 'fade'
            });
                $.fancybox. resize();

        });
</script>
<a id="ikea1" href="#ikea2"> <span>&#1488;&#1497;&#1511;&#1488;&#1492; &#1510;&#1508;&#1493;&#1503;</span>
<div class="project_border"><img src="/Shopping Malls Images/Small/ikea_small.jpg" border="0" alt="" /></div>
</a>
<div style="display: none;">
<div id="ikea2" class="project_hidden" style="width: 600px; padding-bottom: 20px;">
<div class="project_image"><img src="/Shopping Malls Images/Large/ikea_large.jpg" border="0" alt="" /></div>
<div class="project_title">
<h3>&#1488;&#1497;&#1511;&#1488;&#1492; &#1510;&#1508;&#1493;&#1503;</h3>
</div>
<div class="project_description"><p class="p1" style="text-align: right;">&#1492;&#1495;&#1504;&#1493;&#1514; &#1492;&#1513;&#1500;&#1497;&#1513;&#1497;&#1514; &#1513;&#1500; &#1488;&#1497;&#1511;&#1488;&#1492; &#1489;&#1497;&#1513;&#1512;&#1488;&#1500; &#1514;&#1511;&#1493;&#1501; &#1489;&#1502;&#1514;&#1495;&#1501; &#1502;&#1505;&#1495;&#1512;&#1497; &#1492;&#1510;&#1502;&#1493;&#1491; &#1500;&#1510;&#1493;&#1502;&#1514; &#1488;&#1514;&#1488; &#1513;&#1489;&#1511;&#1512;&#1497;&#1497;&#1514; &#1488;&#1514;&#1488; &#1489;&#1502;&#1489;&#1504;&#1492; &#1513;&#1513;&#1496;&#1495;&#1493; 24 &#1488;&#1500;&#1507; &#1502;"&#1512;, &#1489;&#1489;&#1506;&#1500;&#1493;&#1514; &#1502;&#1513;&#1493;&#1514;&#1508;&#1514; &#1513;&#1500; &#1495;&#1489;&#1512;&#1514; &#1492;&#1504;&#1491;&#1500;"&#1503; &#1513;&#1500; &#1513;&#1512;&#1497; &#1488;&#1512;&#1497;&#1505;&#1493;&#1503; &#1513;&#1497;&#1499;&#1493;&#1503; &#1493;&#1489;&#1497;&#1504;&#1493;&#1497; &#1504;&#1491;&#1500;"&#1503;. &#1510;&#1508;&#1497; &#1500;&#1508;&#1514;&#1497;&#1495;&#1492;: 2014.</p>
<p class="p1" style="text-align: right;">&#1492;&#1495;&#1504;&#1493;&#1514; &#1514;&#1489;&#1504;&#1492; &#1506;&#1500; &#1513;&#1496;&#1495; &#1499;&#1493;&#1500;&#1500; &#1489;&#1503; 97 &#1491;&#1493;&#1504;&#1501; &#1513;&#1497;&#1499;&#1500;&#1493;&#1500; &#1489;&#1497;&#1503; &#1492;&#1497;&#1514;&#1512; &#1502;&#1512;&#1499;&#1494; &#1502;&#1505;&#1495;&#1512;&#1497;, &#1513;&#1496;&#1495;&#1497; &#1495;&#1504;&#1497;&#1492; &#1493;&#1514;&#1495;&#1504;&#1514; &#1514;&#1491;&#1500;&#1493;&#1511;.</p>
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>

can you please check this out for me and tell me what am I doing wrong?