jQuery I have 2 jquery scripts, only one at a time works =(

[pixysnot]

I am using the slider gallery (from here) and a lightbox called Pretty Photo (from here).

My webpage that I am working on is here. You will notice that the slider gallery works, but the lightbox does not.

I then made another very similar page (right here) and took out the slider gallery to get the lightbox to work.

So as you can see, I can get them each to work, but not on the same page at the same time. I'm sure it's something little and silly preventing them from cooperating but I don't know Javascript so this is above my head. I don't know anyone skilled/willing enough to help me. Some people said to check my global... something-or-others or my functions or my variables... but I don't even know what that means. Like I said, this is over my head. I'm just a photographer who taught herself HTML and CSS. I am not a programmer. Please help. If you could just tell me "Change this to that" or something, that would be so fantastic.

[bdl]

Here's the bulk of your SCRIPT elements:

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-1.2.6.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-ui-full-1.5.2.min.js" 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>

Note you're pulling in two different jquery scripts there. The first is v1.4.1, and of course the second is v1.2.6. Leave out the second, and change the script order to 1) jquery 2) jqueryui 3) prettyPhoto. While you're at it, I'd update your version of jQuery UI as well for good measure. See if that changes anything, post back your results.

EDIT: I just noticed down at the bottom of your document you also have this:

	<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$("a[rel^='prettyPhoto']").prettyPhoto();
		});
	</script>

May as well clean it all up and merge the two onload handlers into a single $(document).ready(), either in the HEAD or at the end of the BODY.

[pixysnot]

If I remove

<script type="text/javascript" src="js/jquery-1.2.6.js" charset="utf-8"></script>

then the prettyPhoto lightbox starts working, and the slider on my sliderGallery stops working.

Should I change this:

<script type="text/javascript" src="js/jquery-ui-full-1.5.2.min.js" charset="utf-8"></script>

to this:

<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js" charset="utf-8"></script>

?

And I don't know how to properly combine that other thing you mentioned.
=/

[pixysnot]

A guy on justanswer.com had this to say about my predicament, maybe it will help?:

"Slider Gallery insists on 1.2.6. If I load 1.3.0, the slider stops working, but prettyPhoto works like a champ. If I load 1.2.6, Slider Gallery works, but prettyPhoto just sits there and spins when you click on a thumbnail.
I need to do some research to see if it's possible to load two different versions of jQuery simultaneously. It's unlikely, but I've seen weirder things before. When I have an answer one way or the other, I'll let you know."

Ok so on that note...
Would this information tell you guys how to solve my problem?

[bdl]

Ok, I see what you're saying. It is technically possible to run two different versions at the same time, but I would recommend sorting out the issue and choosing two plugins that can interact with the most current version.

At any rate, that link you've posted basically explains it; you'll want to call jQuery.noConflict(), having reassigned the jQuery variable to something else prior to use, e.g.

<script src="js/jquery-1.2.6.js"></script>
<script>
$j_126= $.noConflict(true);
</script>
<script src="js/jquery-ui.js"></script>

<script src="js/jquery.js"></script>
<script src="js/prettyPhoto.js"></script>

Note in the jquery-ui script, the jQuery object must be referred to as '$j_126' (or whatever you decide to name it). This will entail changing the last line of the UI script, e.g.

})($j_126);

The newly reference $j_126 version will be passed into the anonymous function and used inside as '$' like normal. You won't have to alter any other parts of the script.

[pixysnot]

okay so I have jquery-ui-1.7.2.custom.min.js
It seems to have a lot of scripts in it.
Does that mean I need to change the last line of all of those from

})(jQuery);;

to

})($j_126);

?

[pixysnot]

Thanks for your help up to this point. The guy from JustAnswer.com was able to get both scripts working on the one page for me.

In case anyone wants to see the code, here is the working page.

Now I can concentrate on putting the rest of the images into the gallery and be on my merry way.
=)

[zon nix]

Hi Pixynot,

I have the same problem as you had... can you please give me the link to the guy on justanswer who helped you?

Thanks

[brendanpitt]

zon nix,

Did you ever figure out your problem? im having the same issue. anyone have any advice? im trying to use two jquery scripts in one document. both work fine separately, but when both are used only one works.. below is the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Total City Sports</title>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>


<!-- slider -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script> <!-- end slider -->

<!--bg -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.ez-bg-resize.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function() {
$("#body-background").ezBgResize();
});

$(window).bind("resize", function(){
$("#body-background").ezBgResize();
});
</script> <!-- end bg-->

</head>

<body>

[b9d]

I tested it in all browsers and IE is the only one that it NOT cooperating. I tried changing the order of the scripts but it didn't work.

this is my mark-up

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gastos Medicos::Norma Zamacona Montalvo</title>
<link rel="stylesheet" type="text/css" href="../css/norma_style.css" media="all"/>
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="../css/ie7fix.css" media="all" />
<![endif]-->

<!--SlideShow-->
<script type="text/javascript" src="../css/jquery.min.js"></script>

<script type="text/javascript" src="../css/jquery.cycle.all.latest.js"></script>
<script src="../css/kwick/kwicks1.5.1.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 2000,
random: 1
});
});

</script>

<script type="text/javascript">
$().ready(function() {
$('#example .kwicks').kwicks({
max: 500,
spacing: 5
});
});


</script>

</head>

ANY ideas or help would be greatly appreciated.

[VIPStephan]

brendanpitt, please don't hijack old threads and cross-post at the same time. This is against the forum rules and/or posting guidelines and is just wasting the time of people that wanna help.

[MyCreativeWay]

i,ve the same problem.....
can anyone help me..
there are 2 jqueries in my page...

here is the one.....


<script type="text/javascript" src="jquery.beforeafter.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){ $('#container').beforeAfter({animateIntro:true,imagePath:''});});

</script>
<script type="text/javascript">
//create this naming for Jquery 1.3.2 version
var jQuery_1_3_2 = $.noConflict(true);
</script>


and under that...
the 2nd ....



<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery-jvert-tabs-1.1.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("#vtabs1").jVertTabs();
$("#vtabs2").jVertTabs({
selected: 1
});
$("#vtabs3").jVertTabs({
select: function(index){
alert("You clicked tab " + index);
}
});
$("#vtabs4").jVertTabs();
$("#vtabs5").jVertTabs({
equalHeights: true
});
$("#vtabs6").jVertTabs({
select: function(index){
alert("tab " + index + " opened.");
}
});
$("#vtabs6").jVertTabs('selected',3); // select 4th tab, 0-based.
$("#vtabs7").jVertTabs({
selected: 1
});
$("#vtabs8").jVertTabs();
$("#vtabs8").jVertTabs('selected',2); // select 3rd tab, 0-based.

// add click events for open tab buttons
$("input[id^=openTab]").each(function(index){
$(this).click(function(){
openTab("#vtabs6",index);
return false;
});
});
function openTab(tabId,index){
$(tabId).jVertTabs('selected',index);
}
});
</script>



f i remove first 1... than second1 start working....
.what's the solution to workout both jqueries?????