سؤال

I have a problem with a direction aware hower effect. On a test page is working fine, but when I'm embedding the thumbs into the big site is not working. Please assist! you can check it at http://www.psyhealth.ro/test/index.html. I;ve started from the code posted on : http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/

here below you can see my actual code:

<link rel="stylesheet" type="text/css" href="css/patratele.css" />
    <script src="js/modernizr.custom.97074.js"></script>
    <noscript><link rel="stylesheet" type="text/css" href="css/noJS.css"/></noscript>
</head>
<body>
                        <ul id="da-thumbs" class="da-thumbs">
                <li>
                    <a href="#">
                        <img src="images/7.jpg" />
                        <div><span>text 1</span></div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/9.jpg" />
                    <div><span>text 2</span></div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/10.jpg" />
                    <div><span>text 3</span></div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/11.jpg" />
                    <div><span>text 4</span></div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/12.jpg" />
                    <div><span>text 5</span></div>
                    </a>
                </li>
                <li>
                    <a href="h#">
                        <img src="images/1.jpg" />
                    <div><span>text 6</span></div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/2.jpg" />
                    <div><span>text 7</span></div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/3.jpg" />
                    <div><span>text 8</span></div>
                    </a>
                </li>

            </ul>

    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.hoverdir.js"></script>    
    <script type="text/javascript">
        $(function() {

            $(' #da-thumbs > li ').each( function() { $(this).hoverdir({
                hoverDelay : 75
            }); } );

        });
    </script>

the same code works perfect in the standalone page, but in the big site it does not work.

هل كانت مفيدة؟

المحلول

Try

You are using many version of fancybox and also 2 version of jQuery Library . Use only one version .

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top