Conflicting Code: Can you help me debug this?

Conflicting Code: Can you help me debug this?

Hello,
I'm currently working on a site and I'm having a problem with 2 files of jQuery that conflict.

Here is the URL to my work in progress:
TEST PAGE

what is suppose to happen is you hover over the #header-container and it expands showing the #show-hide jQuery scroll box. that happens, but then my scroll does not... scroll.

If I remove the thumbnail.js (the expanding div) then the gallery.js (the scroll box) works.

I can't figure out what is stopping the scroll bar to scroll.

Here is the thumbnail.js (the expanding div):
  1. $(document).ready(function() {
        var hide = false;
      $('#show-hide').hide();
      $('#header-container').hover(function() {
        $('#show-hide').slideToggle(400);
           $('#open-close-footer img').attr('src', 'images/close.png');
        return false;
      }, function(){
        $('#show-hide').slideToggle(400);
           $('#open-close-footer img').attr('src', 'images/open.png');
      });
    });












Here is the gallery.js (the scroll box):

  1. window.onload = function () {
        var container = $('div.sliderGallery');
        var ul = $('ul', container);
       
        var itemsWidth = ul.innerWidth() - container.outerWidth();
               
        container.css('overflow', 'hidden');  // move auto to noscript style to avoid flicker
               
        $('.slider', container).slider({
            min: 0,
            max: itemsWidth,
            handle: '.ui-slider-handle',
            stop: function (event, ui) {
                ul.animate({'left' : ui.value * -1}, 500);
        },
            slide: function (event, ui) {
                ul.css('left', ui.value * -1);
            }
      });
    };




















Also, I would like to add I did not build the scroll box, I got this code from:
jQuery for Designers

Thanks for your help!
-Tim