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
fancyboxand also 2 version ofjQueryLibrary . Use only one version .