• Choose a category
• All
• Classic-Fiction

By Root 1094 0

with the command $(this).data('last', next). The next time the scroller element is clicked, we read it back again with the command $(this).data('last'). If our new element is the same as our last, we simply add 1 to it to scroll to the next image. (We use the modulus again to ensure we stay within the total number of images).

You should carefully study the two lines of code where we retrieve and set data on the element (highlighted above). We’ll be using this amazing jQuery feature a lot in the coming chapters, so do yourself a favor—commit it to memory, and play with it as much as you can!

iPhoto-like Slideshow widget

We’ll look at a more advanced slideshow by building an iPhoto-like widget (iPhoto is the included image gallery application in Mac OS X). Mousing over the left or right side of the current image will scroll to the next or previous image, so the user can flip casually through the gallery. This is the most advanced jQuery we’ve seen so far, and it might be difficult for you to make complete sense of it the first time around. We’ll be exploring many of the concepts employed here in more detail in the coming chapters, so don’t worry if you need to skip this one for now and come back to it later.

Let’s base our slideshow on a familiar list of images. We’ll wrap the list in a div, which will allow us to constrain the thumbnails and add an anchor that will serve as our trigger:

chapter_04/15_iphoto_style_slideshow/index.html (excerpt)

Around town last night

If a user views our page with both CSS and JavaScript turned off, they’ll simply see a huge stack of images. While it’s far from being the great experience we hoped to provide, we have given them full access to our content. If only JavaScript is disabled, all but one of the images will be hidden—but we’ll overlay a link to the full gallery page on top of the gallery, so clicking it will bring users through to a traditional HTML gallery page. Let’s start our slideshow enhancements with the CSS:

chapter_04/15_iphoto_style_slideshow/style.css (excerpt)

#photos {

border: 1px solid #BEBEBE;

height: 400px;

overflow: hidden;

position: relative;

width: 400px;

}

#photos ul {

left: 0;

list-style-type: none;

margin: 0;

padding: 0;

position: absolute;

top: 0;

width: 2400px;

}

#photos li {

float: left;

}

#photos .trigger {

left: 0;

position: absolute;

top: 0;

z-index: 10;

text-indent: -9999px;

height: 400px;

width: 400px;

display: block;

}

Starting with the container div, we set up the display constraints. Our images are 400 pixels square, so that’s the dimensions for our container. Should the images have been of varying sizes, you could simply set the container’s proportions to the size of the largest image it would need to contain. The overflow: hidden; means that none of our thumbnails will peek through unexpectedly. For our unordered list of images, we control the positioning ahead of creating the slide, and as we know we’ll be using ten images, we set the list width to 2400px. In a dynamic web application, this would need to be set on the server side—depending on how many images were in the gallery, of course.

The last touch with the CSS positions the trigger anchor to cover the gallery image completely, and hide its text with text-indent: -9999px. That sorted, let’s dive into the jQuery!

Creating a Widget

The definition of a widget is quite varied, but we’re using it here to mean a stand-alone piece of functionality that we can reuse in our future projects. The real purpose of a widget is to cordon off our code into a handy package. We’ll be doing this more and more throughout the book (and there’s an in-depth look at it coming up in the section called “Namespacing Your Code” in Chapter 6), so the structure and ideas will become quite familiar to you by the end!