Hey,

 

I'll keep the story short.

 

I have 3 images that are used as buttons;

 

<input type="image" src="images/Ps.jpg" id="psbutton" alt="Photoshop" style="width:45px; height:35px; margin-right:5px;"/>
<input type="image" src="images/Dw.jpg" id="dwbutton" alt="Dreamweaver" style="width:45px; height:35px; margin-right:5px;"/>
<input type="image" src="images/Ai.jpg" id="aibutton" alt="Illustrator" style="width:45px; height:35px; margin-right:5px;"/>

 

On the page, I want 3 big boxes to appear depending on which button is clicked (I can do that using the fadeIn/fadeOut methods).

 

However the problem I am having is this;

 

In one of the boxes I have loads of images which have the "lightbox2" feature on them all. When I implement the box fadeIn/fadeOut depending on what button is clicked, the lightbox just stops working and loads the image on a new window. In my head I have this:

 

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox.js"></script>

<script type="text/javascript">
$(document).ready(function () { 
       $('#psbutton').click(function() {

               $('#pscontainer').fadeIn('slow');
			$('#dwcontainer').fadeOut('slow');
			$('#aicontainer').fadeOut('slow');
       });

	$('#dwbutton').click(function() {

			$('#pscontainer').fadeOut('slow');
			$('#dwcontainer').fadeIn('slow');
			$('#aicontainer').fadeOut('slow');
	});

	$('#aibutton').click(function() {
			$('#pscontainer').fadeOut('slow');
			$('#dwcontainer').fadeOut('slow');
			$('#aicontainer').fadeIn('slow');
	});

});


</script>

 

However to get the jQuery working, I need to put in a link to the libary:

 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

 

So, now my box swapping works but the lightbox doesnt with this code in the head;

 

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function () { 
       $('#psbutton').click(function() {

               $('#pscontainer').fadeIn('slow');
			$('#dwcontainer').fadeOut('slow');
			$('#aicontainer').fadeOut('slow');
       });

	$('#dwbutton').click(function() {

			$('#pscontainer').fadeOut('slow');
			$('#dwcontainer').fadeIn('slow');
			$('#aicontainer').fadeOut('slow');
	});

	$('#aibutton').click(function() {
			$('#pscontainer').fadeOut('slow');
			$('#dwcontainer').fadeOut('slow');
			$('#aicontainer').fadeIn('slow');
	});

});


</script>

 

Any help, im pretty confused here!

 

 

[/code]

Okay after some googling it seems that this was a common problem!

 

jQuery.noConflict();

 

Is placed at the start of the script, then all $ are replaced with jQuery

 

Simples