Isolating jQuery to only contained elements

Question

I have been looking for awhile, and I am just too new with JQuery and javascript to figure out where I am going wrong. Any help will be greatly appreciated. I have the script below, which works great for one element. How can I modify this to work with multiple elements? If I have multiple elements on the page the slider will scroll everything, not just the elements within the one container. I know I could technically just make new variables and new class names for each method but that is messy and I know there has to be a smarter way.

<script type="text/javascript" charset="utf-8">
    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);
            }
        });  
    };
</script>

And here is the html.

<div class="sliderGallery">

  <ul id="audio-downloads">
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
  </ul>

  <div class="slider">
    <div class="handle"></div>
  </div>

</div>

<div class="sliderGallery">

  <ul id="audio-downloads">
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
  </ul>

  <div class="slider">
    <div class="handle"></div>
  </div>

</div>

Answer 1

Try something like this - this converts your code into a plugin which can be selectively applied in the load script:

<script type="text/javascript" charset="utf-8">
    // This replaces window.load:
    $(function() {
        // Matches each slider gallery and applies one plugin to each.
        $('.sliderGallery').sliderGallery();
    });

    // Your very own jQuery plugin
    $.fn.sliderGallery = function() {
        var container = $(this); // $(this) is the element you applied the plugin to.
        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);
            }
        });  
    };
</script>

Hope this helps.

Answer 2

Update Also just noticed you are using window.onload. In jQuery you should use $(document).ready() or its alias $(function()).

You just need to use an each() to run through the collection of sliderGallery elements:

$(function(){ // This replaces your window.onload function wrapper
   $('div.sliderGallery').each(function(){
      var ul = $('ul', this);

      var itemsWidth = ul.innerWidth() - $(this).outerWidth();

      $('.slider', this).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);
          }
      }); 
   });
})

In the each callback function, this = the current DOM node. If you need it as a jQuery object in that context, use $(this).