I want to use two jQuery plugins on one html page. I have got each plugin to work when only one plugin is included, but only one works when both are included.

The two plugins in question are Lightbox and the Cycle Lite plugin. 

Code in header:

2. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
3. <script type="text/javascript" src="js/prototype.js"></script>
4. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
5. <script type="text/javascript" src="js/lightbox.js"></script>
6. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
7. <script type="text/javascript" src="js/jquery.cycle.lite.1.0.js"></script>
8. 
   
9. <script type="text/javascript">
10. $(function(){
11.     $('#banner').cycle({
12. timeout: 8000
13. });
14. });
15. </script>

With this code, Cycle Lite works but Lightbox does not. If I remove this line:

1. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

then Lightbox works but Cycle Lite doesn't. So I presume it is a conflict between the javascripts that are loading?

Could someone shed some light on this, please. I'm sure it's straight forward... if you know. But javascript and jQuery is something I don't know much about... yet. Clearly.

Thanks in advance. H