jQuery Two Jquery files conflicting on one page

Zephyr84 · 05-17-2011, 11:11 AM

Hello All,
I am new to the forums and using Jquery with Javascript. I have a social networking widget from Adobe widget browser and a Prettyphoto lightbox off of the net. It's either one or the other working right now and I can't understand the coder lingo to deal with call functions so they can work together. I set up a mock page, pasted below, to show you exactly how it looks in the head and body. I'll provide any more info you may need. I appreciate your patience and time helping the noob.

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>

<title>How can I get these two javascripts to work?</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="onlineportfolio.css" type="text/css"/>

<!--Heres the Pretty Photo lightbox -->
<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>

<!--And the Networking widget -->
<script src="includes/jquery-1.4.2.js" type="text/javascript"></script>
<link rel="stylesheet" href="jQuery/css/style.css"  type="text/css">
<script src="jQuery/js/jquery.jsocial.js" type="text/javascript"></script>

<script type="text/xml">
<!--
<oa:widgets>
  <oa:widget wid="2149023" binding="#social" />
</oa:widgets>
-->
</script>

</head>

<body>

<div id="demoreel"><a href="http://www.youtube.com/watch?feature=player_profilepage&v=PEb1qak3z" rel="prettyPhoto" title="Demo Reel"><img src="images/demoreel.png" alt= "Demo reel" width="160" height="47" border="0"></a></div>

<div id="networkwidget">

<div class="social">
<script type="text/javascript">
// BeginOAWidget_Instance_2149023: #social
	
	$('.social').jsocial({
			twitter		:  '',
			facebook	:  'facebook.com/',
			flickr		:  '',
			delicious	:  '',
			linked		:  'linkedin.com/profile/',
			youtube		:  'youtube.com/user/',
			feed		:  '',
			friendfeed	:  '',
			digg		:  '',
			lastfm		:  '',
			center		: false,	
			inline		: true,
			small		: false,
			newPage		: false
		});
	// EndOAWidget_Instance_2149023
  </script>
  </div>
  
  </div>
  
<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$("a[rel^='prettyPhoto']").prettyPhoto();
		});
</script>  
</body>

</html>

AndrewGSW · 05-17-2011, 12:56 PM

I suggest that you place the style sheets first and then the scripts. But you should remove all the 'charset' attributes from these as they are not valid.

But you are also loading two jQuery libraries - you should only load one.

Code:

<link rel="stylesheet" href="onlineportfolio.css" type="text/css"/>
<link rel="stylesheet" href="jQuery/css/style.css"  type="text/css">
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />

<!--Heres the Pretty Photo lightbox -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>

<!--And the Networking widget -->
<script src="includes/jquery-1.4.2.js" type="text/javascript"></script>
<script src="jQuery/js/jquery.jsocial.js" type="text/javascript"></script>

And the folowing type is not correct:

Code:

<script type="text/xml">

The following lines are not a script, so I assume these lines should be placed somewhere within the <body>.