/**
* Note that we have to use window.onload because $(document).ready() fires before images are loaded
* and ul.innerWidth() - container.outerWidth(); doesn't give the correct width because the width
* of the UL hasn't expanded out until the images have finished rendering.
*/
window.onload = function () {
    var container = $('div.sliderGallery');
    var ul = $('ul', container);
            
    var itemsWidth = ul.innerWidth() - container.outerWidth();
            
    $('.slider', container).slider({
    min: 0,
    max: itemsWidth,
    handle: '.handle',
    stop: function (event, ui) {
       ul.animate({'left' : ui.value * -1}, 500);
    },
    slide: function (event, ui) {
       ul.css('left', ui.value * -1);
    }
  });
};