Jquery conflict means my 2 pieces of functionality refuse to work together. I've tried switching the order of the scripts and replacing $ function to Jquery function. Doesn't seem to fix the problem!
<div id="mainICONZ" class="iconz">
<ul class="iconz">
<li><img src="images/icon-1.png" rel="#mies1"></li>
<li><img src="images/icon-2.png" rel="#mies2"></li>
<li><img src="images/icon-3.png" rel="#mies3"></li>
<li><img src="images/icon-4.png" rel="#mies4"></li>
</ul>
</div>
<div class="simple_contact3" id="mies1">all over the content</div>
<div class="simple_contact3" id="mies2">all over the content</div>
<div class="simple_contact3" id="mies3">all over the content</div>
<div class="simple_contact3" id="mies4">all over the content</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script> !-->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- <script>
// What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready
jQuery(document).ready(function() {
$("img[rel], a[rel]").overlay({expose: '#fff'});
});
</script>
<script type="text/javascript"> OTHER SCRIPT HERE!! </script>
Did you try this:
jQuery.noConflict();
and then replace $ with jQuery.