• Choose a category
• All
• Classic-Fiction

By Root 1119 0

a swag of image tags, inside a div container—itself contained inside another div. You might like to set it up as an unordered list of images inside a div, to be semantically nicer, but what we need to end up with is a block level element that’s as big and wide as our grid. This needs to be inside an element with overflow: hidden (or auto). Here’s what we mean:

chapter_04/13_scrolling_gallery/index.html (excerpt)

We’ll make the pic_container div the width of, say, three images and the height of four images; the pictures, therefore, will be confined to a 3x4 grid. For this demo, we’ll be using images that are 200x200px, so our container needs to be 800px wide and 600px high. We’ll then make the visible region the size of a single image, and hide all the rest:

chapter_04/13_scrolling_gallery/style.css (excerpt)

#pic_container {

overflow: hidden;

height: 200px;

width: 200px;

margin-bottom: 15px;

}

#pic_scroller {

height: 600px;

width: 800px;

overflow: hidden;

}

#pic_scroller img {

float: left;

}

Now that our grid is ready, we can add some random scrolling pixie dust. We first grab all the images, then choose a random one and scroll to it using scrollTo:

chapter_04/13_scrolling_gallery/script.js (excerpt)

$('#pic_scroller').click(function() {

var numberOfPics = $(this).find('div > img').length;

var next = Math.floor(Math.random() * numberOfPics);

$(this)

.scrollTo(

'#photos_inner>img:eq(' + next + ')',

{duration: 1000}

);

});

That’s certainly a lot simpler than our last example! The plugin takes care of almost all the complicated parts. That said, there are two new bits of jQuery in there: the find action, and the :eq filter. find functions in much the same way as the main jQuery $ selector itself, except that it searches only within the currently selected element, rather than the whole document.

The :eq filter works exactly like the eq action we saw earlier, except that it’s a filter, so you use it inside a selector string. We pass it a random number between 0 and the total number of images to select a random image.

Note: Random Numbers

Math.random will give you a random number between 0 and 1. More often, though, you’re looking for random whole numbers in a given range. The easiest way to achieve this is by writing Math.floor(Math.random() * maximum). You multiply the fraction by the maximum number you’d like, then round it down to the nearest whole number.

Notice how easy it is to ask scrollTo to scroll to a specific element: we simply pass it a selector that will match that element!

Smarter Scrolling with the data Action

There’s a fairly big problem with the component we’ve built, however, especially if you have a small number of images: the next random image to display might be the same one we’re currently on! In this case no scrolling takes place, making it feel like a bug. To remedy this, we need to keep track of what the last image was:

chapter_04/14_scrolling_gallery_improved/script.js (excerpt)

$('#pic_scroller').click(function() {

var numberOfPics = $(this).find('div > img').length;

var last = $(this).data('last');

var next = Math.floor(Math.random() * numberOfPics);

if (next == last) {

next = (next + 1) % numberOfPics;

}

$(this)

.data('last', next)

.scrollTo(

'#photos_inner>img:eq(' + next + ')',

{duration: 1000});

});

We’re using a new and extremely powerful jQuery action: data. data is unlike any action we’ve seen so far, because it allows us to store information in any jQuery object. We call it with two parameters to store data. The first parameter becomes the name of the data item, and the second is the value to store. Then, to retrieve data, we pass in only one parameter: the name of the data item.

In our improved example, once we find the image we’re going to scroll to, we store the number element