• Choose a category
• All
• Classic-Fiction

By Root 1131 0

all the images that lie in between the six on either end, so we need a different approach. A better way is to scroll, say, a half-screen’s worth of images at a time. When we reach the end of the list, we’ll scroll back to the start. Let’s expand on our code to make it more bulletproof:

chapter_04/12_thumbnail_scroller_improved/script.js (excerpt)

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

var scrollAmount = $(this).width() - $(this).parent().width();(1)

var currentPos = Math.abs(parseInt($(this).css('left')));(2)

var remainingScroll = scrollAmount - currentPos;(3)

// Scroll half-a-screen by default

var nextScroll = Math.floor($(this).parent().width() / 2);(4)

// But if there isn’t a FULL scroll left,

// only scroll the remaining amount.

if (remainingScroll < nextScroll) {(5)

nextScroll = remainingScroll;

}

if (currentScrollPos < scrollAmount) {(6)

// Scroll left

$(this).animate({'left':'-=' + nextScroll}, 'slow');

}

else{

// Scroll right

$(this).animate({'left':'0'}, 'fast');

}

});

Woah, that’s certainly more code—but if you walk through line by line, you’ll see that it’s all fairly uncomplicated. We’re using quite a lot of variables, and because we’ve given them clear names, it helps to make the code a little easier to understand:

(1)

As in the previous example, we first calculate the total amount of scrolling space we have: our scrollAmount variable.

(2)

Because our new scroller needs to be able to handle more than two screens’ worth of images, we also need to figure out how far along we currently are. We use the JavaScript function Math.abs() to convert the current scroll position to a positive number, because scrolling to the left means we’re moving the elements into negative territory. If your high school math is deep down in your memory, here’s a refresher: the absolute value of a number will always be its positive value, whether the number itself is positive or negative. So Math.abs(3) is 3, and Math.abs(-3) is also 3.

(3)

We know how much space there is in total, and we also know how far along we are—so it’s simple to find out how far we have to go! Just subtract the latter number from the former.

(4)

Now for the real business: we need to calculate how far to scroll. By default, this will be half of the total width of our image container. (Math.floor() is a way of rounding an image down, so we’re sure we end up with a round number.) We store the distance we want to scroll in the nextScroll variable.

(5)

If there’s less space left than what we want to scroll, we’ll change our nextScroll variable to only bring us to the end of the images.

(6)

Finally, we scroll. If we’ve yet to reach the end of the images (if our current position is less than the total scrollable width), we scroll to the left by the amount we calculated. Otherwise (if we’re at the end of the images), we scroll all the way back to the beginning.

If you think that’s a lot of code for a fairly basic effect, you’re right! If only there was a way of scrolling content without doing all that math …

A Scrolling Gallery with scrollTo

You might remember that back when we looked at scrolling in Chapter 3, we mentioned a particularly useful plugin for scrolling the page: scrollTo. As well as scrolling the entire page, the scrollTo plugin excels in scrolling overflowed elements (like those in a picture gallery) too! In our first stab at a scrolling thumbnail gallery, we had to do quite a few of our own calculations to determine how big the scrollable area was, and whether we were at the end or the start of the container.

The scrollTo plugin automatically figures a lot of this out for us, so we can concentrate on adding more complex features. In this demo we’re going to remove our list of thumbnails, and replace them with larger images. The large images will be contained in a grid—but we’re only going to display one at a time. When the user clicks on the image, we’ll scroll around the grid, and stop on a new random picture.

To start off, we’ll need a list of pictures. For simplicity, we’ll just set it up as