jQuery Slider Gallery (slider with Scrollbar) stopped working after Update to jQuery 1.5

I love th开发者_StackOverflow社区e Slider Gallery on http://jqueryfordesigners.com/slider-gallery/, but unfortunately it stopped working after I updated jquery + jqueryUI. Any Ideas, how to improve the code [Or an similar Tutorial/Script], to get it back to work? The javascript looks like this:

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);
            }
        });
    };

The HTML/CSS is pretty simple; An Container (the div.SliderGallery) with hidden Overflow and 100% width, an ul with the Content inside and the Scrollbar in a div. Works fine with an old jQuery-Version (1.3 or something), but doesn't do anything with V1.5.

Thank you very much,

Best regards

Lucas

---

I had the exact same problem with the exact same problem - The newest version of jQuery is called on the master asp.net page, and I needed to include jQuery 1.2.6 in a page with the slider...There's lots of posts on here about using the noConflict(); argument w/ this exact same code. Anyways, here's what I did:

<script type="text/javascript" src="includes/js/jquery.nyroModal.js"></script>//This was my conflicting code - lightboxes weren't working any more with the slider implemented
<script src="includes/js/slider.js" type="text/javascript"></script>//This is jQuery 1.2.6 that I renamed for organizational purposes
<script src="includes/js/jquery-ui-full-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>//Here's the UI that the slider requires
<script type="text/javascript">
var jqSlider = $.noConflict(true);//You MUST use the noConflict method directly after loading the preferred library
    jqSlider(function(){ // Replace all $ as follows
        var container = jqSlider('div.sliderGallery');
        var ul = jqSlider('ul', container);
        var itemsWidth = ul.innerWidth() - container.outerWidth();
        jqSlider('.slider', container).slider({
            min: 0,
            max: 5800,
            handle: '.handle',
            stop: function (event, ui) {
                ul.animate({'left' : ui.value * -1}, 500, 'linear');
            },
            slide: function (event, ui) {
                ul.css('left', ui.value * -1);
            }
        });
    });
</script>// After this the rest of my functions follow, using the normal $ and jQuery 1.5

Works for me now - the tricky part is just arranging the script calls and your function correctly. Hope this helps.

---

though collins solution worked fine, I was still searching for another way in order to use only one library in the final document. Finally I figured out a Solution which works fine with jQuery5 and UI1.8.9 and of course I'm happy to share it to anyone who has use for it:

The HTML-Markup:

<div id="gallery">
   <div id="content">Content to slide goes here</div>
</div>

<div id="scrollbar">
   <div id="slider"></div>
</div>

The CSS looks like this:

.gallery {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;}

 .content {
    position: relative;
    overflow: none;
    white-space: nowrap;
    padding: 0;
    margin: 0;}

.ui-slider {position: relative; width:464px; margin-left:40px;}  
.ui-slider .ui-slider-handle {
        margin-top:2px;
        background-color: #999; 
        position: absolute; 
        width:80px; 
        height:8px; 
        left:0px;}  

.scrollBar {
        position: relative; 
        background-color: #CCC; 
        width:544px; 
        height:12px; 
        margin-left:53px;
        }   

.ui-slider-horizontal {}
.ui-slider-horizontal .ui-slider-handle {margin-left: -40px;} 
.container a:active, .container a:visited, .container a:focus {top:0; left:0;}

And finally the important part, the jQuery-Stuff:

var maxScroll = 2605 - $("body").width();
var scrollable = $("#content");
$("#slider").slider({
    max: maxScroll,
    slide: function (e, ui) {
        scrollable.css("left", "-" + ui.value + "px")
    }
});

the 2605 is the width of the #content-div. Maybe this helps anybody else...