JavaScript Forum

**edgray** · 10:18 AM

I'm working on a site right now that has a jQuery carousel and a jQuery lightbox (colorbox) for login purposes.

I can't get them to both work. It seems like the one that's called last in the document head works, the first one doesn't. The head code is:

HTML Code:

	<head>
		<title>**** // Jeans and Stuff</title>
		<link href="css/reset.css" type="text/css" rel="stylesheet" media="screen"/>			
		<link href="css/styles.css" type="text/css" rel="stylesheet" media="screen"/>
		<link href="css/slider.css" type="text/css" rel="stylesheet" media="screen"/>						
		
                <!-- colorbox -->
                <link media="screen" rel="stylesheet" href="css/colorbox.css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
		<script src="js/jquery.colorbox.js"></script>
		<script>
			$(document).ready(function(){
				//Examples of how to assign the ColorBox event to elements

				$(".login").colorbox();				
			
			});
		</script>
            <!-- carousel -->
	    <script src="js/jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script> 
	    <script src="js/jquery-ui-full-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>	
	    <script type="text/javascript" charset="utf-8"> 
    	    window.onload = function () {
    	        var container = $('div.sliderGallery');
       	     var ul = $('ul', container);
       	     
       	     var itemsWidth = ul.innerWidth() - container.outerWidth();
       	     
       	     $('.slider', container).slider({
       	         min: 0,
       	         max: itemsWidth,
       	         handle: '.handle',
       	         stop: function (event, ui) {
       	             ul.animate({'left' : ui.value * -1}, 500);
       	         },
       	         slide: function (event, ui) {
       	             ul.css('left', ui.value * -1);
       	         }
       	     });
       	 };
    	</script> 				
	</head>

So in the above example, the carousel works but the colorbox doesn't. When I put the colorbox code underneath the carousel, that works, but the carousel remains annoyingly static.

being no expert in javascript, I'm stuck. I have a hunch it's something to do with the differing versions of jQuery the two scripts are calling. Am I right or totally off here?

Any help would be much appreciated.

**stbuchok** · 03-02-2011, 01:14 PM

Move the script tags with the colorbox code below where you declare the external js files.

Also, you will have a ton of conflicts if you use two different versions of jQuery in the same page. Try removing the reference to jQuery 1.2 and see if the code works, or see if there is a newer version of the control that works with 1.4.

**edgray** · 03-02-2011, 02:31 PM

Quote:

Originally Posted by stbuchok

Move the script tags with the colorbox code below where you declare the external js files.

Also, you will have a ton of conflicts if you use two different versions of jQuery in the same page. Try removing the reference to jQuery 1.2 and see if the code works, or see if there is a newer version of the control that works with 1.4.

I thought it might be a conflict between the two versions of jQuery. Thanks, I'll give this a go.

**edgray** · 03-03-2011, 08:35 AM

I ended up adding this line to the carousel:

Code:

var J = jQuery.noConflict();

and then changing all of the "$" references to "J"

**stbuchok** · 03-03-2011, 03:26 PM

so when you do that which version of jQuery is it applying to, the 1.2 version or the 1.4 version.