Microformat oomph.js breaks rest of my JS

Question

I'm writing a little webpage that displays some Flickr photos and also includes microformats using oomph.js. I have bit of JS and when I run the code without <script type='text/javascript' src="oomph.js"></script> the code runs fine (all my photos are loaded. However, when I add in the above script tag, my photos don't load.

Here is my broke JS (doesn't show photos):

<script type='text/javascript' src="jquery-1.6.3.min.js"></script>
<script type='text/javascript' src="oomph.js"></script>

<script>
$(document).ready(function() {

var ajaxURL="http://api.flickr.com/services/feeds/groups_pool.gne?id=626753@N20&lang=en-us&format=json&jsoncallback=?"; 
$.getJSON(ajaxURL,function(data) {
    $('h1').text(data.title);
    $.each(data.items,function(i,photo) {
        var photoHTML = '<span class="image">';
        photoHTML += '<a href="' + photo.link + '">';
        photoHTML += '<img src="' + photo.media.m.replace('_m','_s') + '"></a>';
        $('#photos').append(photoHTML);
    }); // end each
}); // end get JSON

}); // end ready
</script>

and here is the code that works (shows photos):

<script type='text/javascript' src="jquery-1.6.3.min.js"></script>

<script>
$(document).ready(function() {

var ajaxURL="http://api.flickr.com/services/feeds/groups_pool.gne?id=626753@N20&lang=en-us&format=json&jsoncallback=?"; 
$.getJSON(ajaxURL,function(data) {
    $('h1').text(data.title);
    $.each(data.items,function(i,photo) {
        var photoHTML = '<span class="image">';
        photoHTML += '<a href="' + photo.link + '">';
        photoHTML += '<img src="' + photo.media.m.replace('_m','_s') + '"></a>';
        $('#photos').append(photoHTML);
    }); // end each
}); // end get JSON

}); // end ready
</script>

I've browsed the internet and have yet to find a solution. If anyone could shed some light on this issue I would greatly appreciate it :-).

Answer 1

I was able to fix the issue by including an older version of JQuery (version 1.3.2)