Cherrysave

Stylishly capitalize on limited space with a side scrolling image gallery, similar to the one that Apple uses to show off their products.

What is it?

The product slider is a cool way to show off something like an image gallery in a limited amount of space. You can use it for an e-commerce inventory solution or to show off photos from a recent vacation.

It’s a simple task for JQuery UI. While you won’t be using much, it does require the jquery.dimensions, ui.mouse, and the ui.slider components. Use this code snippet in the head section of your markup to take care of it.

<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="ui.mouse.js" type="text/javascript"></script>
<script src="ui.slider.js" type="text/javascript"></script>

The Markup
The HTML consists of an unordered list of items for the gallery, with labels for the slider appearing further below in the span.

<div class="sliderGallery">
  <ul class="items">
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three, etc...</li>
  </ul>
  <div class="slider">
    <!-- the handler to action the slide -->
    <div class="handle"></div>
    <!-- labels appear against the slider, as pointers to the user -->
    <span class="slider-lb1">slider label 1</span>
    <span class="slider-lb2">slider label 2</span>
    <span class="slider-lb3">slider label 3</span>
  </div>
</div>

The Stylesheet

.sliderGallery {
    overflow: hidden;
    position: relative;
    padding: 10px;
    height: 160px;
    width: 960px;
}
.sliderGallery UL {
    position: absolute;
    list-style: none;
    overflow: none;
    white-space: nowrap;
    padding: 0;
    margin: 0;
}

.sliderGallery UL LI {
    display: inline;
}

.handle {
    position: absolute;
    cursor: move;
    top: 0;
    z-index: 100;
    /* bespoke to your own solution */
    height: 17px;
    width: 181px;
}

The JQuery

$(window).ready(function () {
  $('div.sliderGallery').each(function () {
    var ul = $('ul', this);
    var productWidth = ul.innerWidth() - $(this).outerWidth();

    var slider = $('.slider', this).slider({
      handle: '.handle',
      minValue: 0,
      maxValue: productWidth,
      slide: function (ev, ui) {
        ul.css('left', '-' + ui.value + 'px');
      },
      stop: function (ev, ui) {
        ul.animate({ 'left' : '-' + ui.value + 'px' }, 500, 'linear');
      }
    });
  });
});

…and that will do it for you.

If you found this tutorial useful, don’t forget to subscribe to the Cherrysave RSS feed. Or, you can follow me on Twitter.