• Choose a category
• All
• Classic-Fiction

});

This effect is illustrated in Figure 4.5.

Figure 4.5. The shuffle effect included in the Cycle plugin

The plugin gives us more than 20 ways to move around our gallery: shuffle, fade, zoom, wipe, toss, curtainX, growY … for starters. Additionally, the plugin can be customized to include your own transition effects, if you’re unable to find one that suits your needs.

The number of options offered in Cycle is quite astounding, probably far more than you’ll ever need. Let’s try out a more complicated example:

chapter_04/10_cycle_plugin_2/script.js (excerpt)

$('#photos').cycle({

fx: 'scrollDown',

speedIn: 2500,

speedOut: 500,

timeout: 0,

next: '#photos'

});

The timeout setting controls the time between transitions—but what would a value of 0 mean? In this case it means “don’t animate.” Instead, we’ve used the next option to select an element that, when clicked, will advance to the next slide. That selector is the slideshow itself—so to move to the next picture, you just need to click on the picture.

Additionally, we’ve used the speedIn and speedOut options to specify the duration of the “in” and “out” animations: we’ve chosen to sloooowly bring the next picture into view, while quickly dismissing the last. There are so many options available that you’ll need some serious playing with it to exhaust the possibilities for usable effects.

Scrolling Slideshows

As we saw when using the Cycle plugin, cross-fading is far from being the only way to transition between a set of images. In the next few examples, we’ll explore another technique for creating interactive slideshows. We’re going to throw all our images in a giant container, and use a wrapper element to hide all but one or a few from view. Then, when we want to display a different image, we’ll just scroll the element to the desired position.

Thumbnail Scroller

Our first stab at a scrolling gallery will be a horizontal list of thumbnails. If you click on the control, the list scrolls along to reveal more images.

To build this control we’ll need to have two nested elements. The child element will be large and contain all of the images. The parent element is only as big as the viewing area; that is, the area we want the user to see. As the child element moves around, it appears to the user that the content is scrolling in. Here’s the markup:

chapter_04/11_thumbnail_scroller/index.html (excerpt)

The outer element needs to hide the excess content, and so needs to have overflow: hidden. For our scroller, we define the inner element to have a width wide enough to fit our 15 thumbnails:

chapter_04/11_thumbnail_scroller/style.css (excerpt)

#photos {

overflow: hidden;

width: 600px;

}

#photos_inner {

height: 100px;

width: 1500px;

overflow: hidden;

position: relative;

}

#photos_inner img {

float: left;

width: 100px;

height: 100px;

}

With our container all set up, and an armful of images to show, let’s take a first stab at scrolling the images:

chapter_04/11_thumbnail_scroller/script.js (excerpt)

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

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

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

}, function() {

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

});

First we need to calculate how much to scroll. We take the width of the overflowed element that contains images and subtract that from the width of the parent container. The parent action selects an element’s immediate parent (see the section called “Bits of HTML—aka “The DOM”” in Chapter 1). We use this to tell us how far we need to scroll to reach the very end of the images. When we click on the images, our scroll effect toggles between the start and end of the images.

This is great if we have less than two screen width’s worth of images. But if we have more, we’ll be unable to see