Problem with showing multiple jQuery functions

Problem with showing multiple jQuery functions

I have found a image slider and made a tooltip myself with jQuery for on my site. I've made an image gallerie with one large image (in #gallerij) and one row with smaller images in it (#imagerow). When you hover over one of the smaller images, it fades and when you click on one of the smaller images, it will show up as larger images in #gallerij with a fadeIn/fadeOut effect. But that doesn't work, nothing happens. No fade effect when you hover over the images and not clickable. Let alone a fadeIn effect in #gallerij. Also the tooltip for the #imagerow isnt working, its only working for #gallerij.

But, the imageslider is working, but I can't get them working decent both. 

I looked into the browserconsole, and it says 'undefined is not a function'. This is for the line  $('#imagerow').on('click', 'img', function (e) { 
and for   }).on('mousemove', function (e){

Sorry for this long post, tried to get the site online but for some reason I cannot login into my hostingaccount so I'm trying it this way.

This is what I have in the <head>


<script src="li-jquery-slider/slider/li-slider/js/jquery-1.5.1.min.js"></script>
   <script src="li-jquery-slider/slider/li-slider/js/jquery.easing.1.3.js"></script>
   <script src="li-jquery-slider/slider/prettyphoto/js/jquery.prettyPhoto.js"></script>
   <script src="li-jquery-slider/slider/lightbox-0.5/js/jquery.lightbox-0.5.min.js"></script>
    <script src="li-jquery-slider/slider/li-slider/js/li-slider-animations-1.1.min.js"></script>
   <script src="li-jquery-slider/slider/li-slider/js/li-slider-1.1.js"></script>
    <script>var __adobewebfontsappname__="dreamweaver"</script>
    <script src="http://use.edgefonts.net/open-sans:n3:default.js" type="text/javascript"></script>
  
  
  <script>

$(window).load(
function() {
$('#li-banner').sp_Li_Slider({
animation : 'Regular Exception',
transitions : 'None',
auto_play : true,
repeat : true,
ModalMode : 'PrettyPhoto',
goToSlideOnStart : 3,
timer : 'line_bottom',
pauseOnMouseOver : true,
tooltip : 'image',
tooltipSize :  20,
Shuffle : false,
delay : 2000,
trans_period : 800,
vert_sections : 10,
sqr_sections_Y : 4,
active_links : true,
buttons_show : true,
play_pause_show : true,
next_prev_show : true,
auto_hide : true,
buttons_show_time : 500,
buttons_show_delay : 500,
buttons_hide_time : 2000,
buttons_hide_delay : 500,
});
}

);

</script>

<style>
#gallerij {
height:300;
}
#gallerij img {
display: block;
width: 300px;
border: 4px solid #aaa;
}

#imagerow {
background-color:#ccc;
margin-top:10px;
padding: 5px;

}

#imagerow img {
width:100px;
margin: 0 5px;
cursor: pointer;
border: 1px solid #222;
opacity: 0.5;

}
</style>
</head>



And this is what I have in the <body>


<script>

    

$('#imagerow').on('click', 'img', function (e) {
var source = $(this).attr('src');
$('#gallerij img').fadeOut('fast', function () {
$(this).attr('src', source).fadeIn('fast');
});
});
$('#imagerow').on('mouseover', 'img', function (){
   var titel = $(this).attr('title');
$('#imgtext').text(titel);
  });

  </script>
    
    
<script>

        
    
$('#gallerij img').hover(
 
function (e){
 
var titel = $(this).attr('title')
var muis = {
 
'top': (e.pageY - 10) + 'px',
'left': (e.pageX + 15) + 'px'
 
}
 
$(this)
.data('tooltipText', titel)
.removeAttr('title')
 
 
 
$('<div class="tooltip"></div>')
.text(titel)
.appendTo('body')
.css(muis)
.fadeIn();
 
},
 
function (e){
 
var browser = $(this).data('tooltipText')
$(this).attr('title', browser)
 
$('.tooltip').remove();
 
 
}).on('mousemove', function (e){
 
 var muis = {
 
'top': (e.pageY - 10) + 'px',
'left': (e.pageX + 15) + 'px'
 
}
 
$('.tooltip').css(muis);
 
});
 
   $('#imagerow img').on('mouseover', function (){
$(this).fadeTo('slow', 1.0)

}).on('mouseout', function (){
$(this).fadeTo('slow', 0.5)

});

 
 
</script>

</body>