I live in the sometimes sunny Brighton (it's in the south of the UK, for those across the pond). The south coast is definitely my favourite place to be, but I spent some time on the outskirts of London whilst at University. I'm starting to focus on my own company Left Logic. It's a web development company with strong focus in usability, accessibility, clean design and powerful bespoke applications. Remy is a DZone MVB and is not an employee of DZone and has posted 48 posts at DZone. You can read more from them at their website. View Full User Profile

Apple Product Gallery with jQuery Slider Gallery

02.18.2008
| 75304 views |
  • submit to reddit

Michiel Kenis requested a tutorial explaining how to create a similar effect used to showcase the products on the Apple web site.

This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff.

jQuery already has the plugins to create these effects so we don’t have to go about creating them ourselves from scratch.

How to Solve the Problem

To create the slider controlled gallery, we need the following:

  1. Markup that allows us to place several items within a list, and that overflows out of sight.
  2. A slider widget to control what subsection of products we can see.
  3. Logic to translate the sliders position to slide the products inversely (i.e. we slide left-to-right, the products go right-to-left).

I’ve provided a screencast to walk through how create this functionality. Details on how and what I used can be found below.

Watch the slider gallery screencast (alternative flash version)

View the demo and source code used in the screencast

jQuery UI

jQuery UI is “a set of themable widgets and interactions”. For this task, we don’t need much of jQuery UI, but for the UI slider widget, we’ll need the following:

  • jquery.dimensions.js
  • ui.mouse.js
  • ui.slider.js

Of course we’ll still need the latest jquery.js.

All the above scripts can be extracted from the jQuery UI download.

HTML Markup

The markup for the example is straight forward. It boils down to a ul holding the items you want in the gallery, and a div with another nested div, for the slider and it’s handle.

<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>

CSS

One key feature about the CSS used: in my example, I assumed that I would not have a predefined width to the ul element. As such, I can’t float the li elements and have set widths. To ensure everything flows horizontally, I make use of white-space: nowrap.

I’ve only included the required CSS to create the sliding gallery effect. If you want to see the complete CSS used in the screencast just view the source for the demo

Slider Gallery Container

The overflow ensures the items are hidden, and the position: relative is used to absolutely position the ul element within it.

.sliderGallery {
overflow: hidden;
position: relative;
padding: 10px;
height: 160px;
width: 960px;
}

Slider Gallery Items

The white-space: nowrap is what allows us to work with an unknown width in the ul element.

.sliderGallery UL {
position: absolute;
list-style: none;
overflow: none;
white-space: nowrap;
padding: 0;
margin: 0;
}

.sliderGallery UL LI {
display: inline;
}

Slider Handle

In the screencast, the example uses a background image for the slider handle, and in particular from the example, the width of the handle is larger than the image to allow it to overlay on the left and right arrows.

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

jQuery

As stated above, we will need to include a series of plugins from the jQuery UI download, then we will add our dash of jQuery to create the sliding gallery effect.

Required Plugins

<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>

Slider Code

// not using $(function () {}) - see note below
window.onload = 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’);
}
});
});
};

Please note during the screencast I used $(function () {}) - but I’ve had to since change this to window.onload. This is because I’m using white-space: nowrap and the width isn’t calculated until after the images are loaded. jQuery’s ready function fires before the images are loaded - to allow the JavaScript access to the DOM as early as possible.

This wasn’t a problem in the demo because the images were loaded from a local server, and thus loaded fast enough to allow the code to work out the width correctly.

The code breaks down as follows:

window.onload = function () {

When the DOM and images are ready (note that if you don’t use white-space: nowrap then you should use the standard $(document).ready() method).

$('div.sliderGallery').each(function () {

Loop through all the div.sliderGallery elements. This code design sets us up to convert our code to a reusable plugin.

var ul = $('ul', this);

Search for the ul in the context of this - which is currently a div.sliderGallery.

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

.innerWidth() and .outerWidth() come from jquery.dimensions.js. We’re subtracting the current div.sliderGallery width because when we slide, we want it to stop once the last item is visible, rather than sliding it all the way left until it’s out of sight.

 

var slider = $('.slider', this).slider({ 

.slider() comes from ui.slider.js.

handle: '.handle',

The class of our slider handle.

slide: function (ev, ui) {
ul.css('left', '-' + ui.value + 'px');
},

As the handle is moved, we move the ul of items, note that it moves negatively, creating the scrolling effect.

stop: function (ev, ui) {
ul.animate({ 'left' : '-' + ui.value + 'px' }, 500, 'linear');
}

We use this for when slider area has been clicked, to create the scroll effect.

Taking it Further

When I have a working version of the code, I often try to think how the interaction could be better. Here’s a list of ways it could be improved, in no particular order - if you fancy a challenge:

  1. Better scrolling effect, in particular, fast scroll for the bulk of the animation, and slows down when it’s settling on the final item.
  2. Turn it in to a plugin.
  3. The arrow can be turned in to handlers to slide the handle only part of the distance, rather than all.
  4. A nice effect the Apple version has, is the jump labels, within the slider element, change class given the distance they are from the slider handle. They appear brighter as they’re closer and duller as they are further away from the handle.
  5. Anything else you can think of!
References
Published at DZone with permission of Remy Sharp, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Yung replied on Sat, 2008/02/23 - 10:22pm

I have a question, lets say I have the slider gallery going and when I click on an item, how can I have the content of whatever I clicked on load on the same page underneath the slider. The slider on the Apple site takes you to another page after you click on something but is it possible to load the content on the same page?

Pop Carvalho replied on Tue, 2009/01/27 - 4:16pm

Hey, very nice slider!

I'm trying to use like this in my site:

http://www.popbr.biz/j_teste/slider-gallery.html

Note, the sliders moves together. How can I stoped it? Sorry, i'm only a designer....

 

Craig Boren replied on Tue, 2009/03/17 - 8:29pm

Is there a way to have the left and right arrows on either side of the slider move the handle a certain distance when clicked, instead of the whole way across?  I am trying to do this on the following page:  www.italiantiecompany.com/ties.html.  For example, on this page, when the left or right arrow is clicked, the slider would only move one item over, instead of moving to the very end of the list.

Gogot Plok replied on Sun, 2011/08/14 - 2:21pm

Very Nice article Remy . Apple has always been a god when it comes to design. Agree ? heh ! Another dude named Hyder has wrote  a similar article how to clone Apple Itunes slider using jquery.

What do you think of it guys ?

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.