Conflict between jQuery plugin LavaLamp and jQuery cycle

Question

I am having problems with what I suspect is a conflict between jQuery plugin LavaLamp and jQuery plugin cycle. The lavalamp worked well until I added the cycle all script

URL for the working lavalamp menu is http://www.eastover.plus.com/consultantnet

URL for the lavalamp menu with jQuery cycle is http://www.eastover.plus.com/consultantnet/slideshow.html

Does anybody know what I am doing wrong?

Answer 1

The problem is that you're including the jQuery script files more than once. Specifically, what's causing your problem is that you're loading jQuery once after the LavaLamp plugin has been loaded, thereby overwriting the definition of $ that had been extended with a plugin.

<!-- jQuery is first included here; $ is defined -->
<script type="text/javascript" src="sitefiles/jquery.js"></script>
<script type="text/javascript" src="sitefiles/easing.js"></script>
<script type="text/javascript" src="sitefiles/easingfix.js"></script>

<!-- then your LavaLamp plugin is included here; $.fn.LavaLamp is defined -->
<script type="text/javascript" src="sitefiles/lavalamp.js"></script>
<script type="text/javascript" src="sitefiles/imagecycle.js"></script>
...

<!-- Now, later on, jQuery is included again; $ is overwritten
     and $.fn.LavaLamp is lost -->
<script type="text/javascript" src="js/jquery.min.js"></script>

Answer 2

You have 2 lines which include jquery.js. You can have only 1. Also you have a wrong naming in this line: <ul id="1" class="lavaLamp">. You can rename it to something like id="menu1".