Avoiding conflicts

Hi threre,

I hve the following code for a twitter feed and a flickr feed.

I am having problems implementing it on my site.

The code works no problem on its own, however when I place it on the site it conflicts with the other javascript.

I want to make these two scripts non conflictable, but have no idea how.

Is there a simple way of doing so ?

[CODE]<div class=”postwitter”>

<script type=”text/javascript” src=”http://widgets.twimg.com/j/2/widget.js”></script>

<script type=”text/javascript”> // <![CDATA[

new TWTR.Widget({
version: 2,
type: ‘profile’,
rpp: 2,
interval: 6000,
width: 221,
height: 102,
theme: {
shell: {
background: ‘#b3ad9b’,
color: ‘#ffffff’
},
tweets: {
background: ‘#cecabe’,
color: ‘#4b5456’,
links: ‘#e94828’
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: false,
timestamp: true,
avatars: false,
behavior: ‘all’
}
}).render().setUser(‘vogelsbreaduk’).start();
// ]]></script>

</div>
<br>
<br>
<br>
<br>
<br>
<div class=”subContentContainer”>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” type=”text/javascript”></script>

<script type=”text/javascript”> // <![CDATA[

$(function() {
var $j = jQuery(‘#a-link’).remove();

var $j = jQuery(‘<img />’).attr(‘id’, ‘loader’).attr(‘src’, ‘ajax-loader.gif’).appendTo(‘#image-container’);

//assign your api key equal to a variable
var apiKey = ‘0e8f8c38e97d632e02fc3047dbd9d3f5’;

//the initial json request to flickr
//to get your latest public photos, use this request: http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=’ + apiKey + ‘&user_id=29096781@N02&per_page=15&page=2&format=json&jsoncallback=?
$.getJSON(‘http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=’ + apiKey + ‘&photoset_id=72157624672125109&format=json&jsoncallback=?’,
function(data) {

//loop through the results with the following function
$.each(data.photoset.photo, function(i, item) {

//build the url of the photo in order to link to it
var photoURL = ‘http://farm’ + item.farm + ‘.static.flickr.com/’ + item.server + ‘/’ + item.id + ‘_’ + item.secret + ‘_m.jpg’

//turn the photo id into a variable
var photoID = item.id;

//use another ajax request to get the geo location data for the image
$.getJSON(‘http://api.flickr.com/services/rest/?&method=flickr.photos.geo.getLocation&api_key=’ + apiKey + ‘&photo_id=’ + photoID + ‘&format=json&jsoncallback=?’,
function(data) {

//if the image has a location, build an html snippet containing the data
if (data.stat != ‘fail’) {
pLocation = ‘<a target=”_blank” href=”http://www.flickr.com/map?fLat=’ + data.photo.location.latitude + ‘&fLon=’ + data.photo.location.longitude + ‘&zl=1″>’ + data.photo.location.locality._content + ‘, ‘ + data.photo.location.region._content + ‘ (Click for Map)</a>’;
}
});

//use another ajax request to get the tags of the image
$.getJSON(‘http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=’ + apiKey + ‘&photo_id=’ + photoID + ‘&format=json&jsoncallback=?’,
function(data) {

//if the image has tags
if (data.photo.tags.tag != ”) {

//create an empty array to contain all the tags
var tagsArr = new Array();

//for each tag, run this function
$.each(data.photo.tags.tag, function(j, item) {

//push each tag into the empty ‘tagsArr’ created above
tagsArr.push(‘<a href=”http://www.flickr.com/photos/tags/’ + item._content + ‘”>’ + item.raw + ‘</a>’);

});

//turn the tags array into a string variable
var tags = tagsArr.join(‘, ‘);
}

//create an imgCont string variable which will hold all the link location, title, author link, and author name into a text string

var imgCont = ‘<div class=”image-container”><a class=”title” target=”_blank” href=”http://www.flickr.com/photos/’ + data.photo.owner.nsid + ‘/’ + photoID + ‘” title=”‘ + data.photo.description._content + ‘ &ndash; click to enlarge”><img src=”‘ + photoURL + ‘” alt=”‘ + data.photo.description._content + ‘” /></a><div class=”image-info”><div class=”bottom”>’;

//var imgCont = ‘<div class=”image-container”><a class=”title” target=”_blank” href=’+ photoURL +’><img src=’+ photoURL +’ /></a><div class=”image-info”><div class=”bottom”>’;

//if there are tags associated with the image
if (typeof (tags) != ‘undefined’) {

//combine the tags with an html snippet and add them to the end of the ‘imgCont’ variable
//imgCont += ‘<p><span class=”infoTitle”>Tags:</span> ‘ + tags + ‘</p>’;
}

//if the image has geo location information associate with it
//if(typeof(pLocation) != ‘undefined’){

//combine the geo location data into an html snippet and at that to the end fo the ‘imgCont’ variable
// imgCont += ‘<p><span class=”infoTitle”>Location:</span> ‘ + pLocation + ‘</p>’;
//}

//add the description & html snippet to the end of the ‘imgCont’ variable
//imgCont += ‘<p><span class=”infoTitle”>Decription:</span> ‘ + data.photo.description._content + ‘</p></div></div>’;

//append the ‘imgCont’ variable to the document
$(imgCont).appendTo(‘#image-container’);

//delete the pLocation global variable so that it does not repeat
delete pLocation;
});

});
});

//assign hover actions to each image
$(‘.image-container’).live(‘mouseover’, function() {
$(this).children(‘div’).attr(‘class’, ‘image-info-active’);
});
$(‘.image-container’).live(‘mouseout’, function() {
$(this).children(‘div’).attr(‘class’, ‘image-info’);
});

jQuery(‘#loader’).remove();

});
// ]]></script>

<div id=”container”>
<div id=”image-container”>
</div>
<!–#image-container–>
</div>
</div>

<script type=”text/javascript”> // <![CDATA[
var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
document.write(unescape(“%3Cscript src='” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));
// ]]></script>

<script type=”text/javascript”> // <![CDATA[
try {
var pageTracker = _gat._getTracker(“UA-6537137-1”);
pageTracker._trackPageview();
} catch (err) { }
// ]]></script>[/CODE]

Thank you ?

Also in #JavaScript _↴