| 00:00 | Now we want to add a conditional
statement inside of the animateThumbnail before
|
| 00:03 | we set the new thumbnail position.
|
| 00:06 | So inside of the brackets for
animateThumbnail let's add a few lines.
|
| 00:10 | We're going to type if, beginning and
ending parentheses, beginning and ending bracket.
|
| 00:15 | Let's split that open.
|
| 00:17 | Inside of the parentheses for if, we're
going to type window.thumbnailPosition <
|
| 00:27 | 800 pixels which means
we're at -800 plus the 200.
|
| 00:35 | So it's going to be 1,000 since we're
concerned about the leftmost edge of the thumbnails.
|
| 00:39 | I'm going to select and
copy window.thumbnail += 200.
|
| 00:45 | Since each width of the thumbnail
screens we have inside of those large
|
| 00:48 | thumbnail filmstrips is 200
pixels, we're going to add 200 to the
|
| 00:52 | thumbnailPosition variable.
|
| 00:53 | Then on the bracket we're going to
type else, beginning and ending bracket.
|
| 01:00 |
|
| 01:00 | So if the window.thumbnailPosition is
not less than 800, we're going to paste
|
| 01:06 | window.thumbnailPosition.
|
| 01:07 | We're going to set that = 0.
|
| 01:12 | At this point let's choose File>Save All.
|
| 01:14 | Let's click on design view and then
let's hit Live view and watch the debugging
|
| 01:18 | area and we should see the thumbnails count up.
|
| 01:21 | When they get to -800, they go back to 0,
and that's running twice every second.
|
| 01:27 | So now that we can watch that run, we know
that this is working exactly as expected.
|
| 01:33 | Let's click out of Live view,
let's go back to Code view for
|
| 01:37 | the video_gallery.js.
|
| 01:39 | Now inside of our animateThumbnail
function after the debug update, let's hit a
|
| 01:44 | Return, let's type a dollar sign,
beginning and ending parentheses, two tick
|
| 01:49 | marks for string literal, a.videoLink.hover.
|
| 01:57 | So if our videoLink class has a hover state
what we're going to do is change the CSS property.
|
| 02:02 | We're going to set css, beginning
and ending parentheses, semicolon.
|
| 02:08 | Inside of the CSS, we're going to
type two tick marks for string literal.
|
| 02:12 | We're going to type background-
position, then a comma, two more tick marks
|
| 02:21 | for string literal.
|
| 02:24 | Inside of the string literal we're
going to type another tick mark, two plus
|
| 02:29 | signs, and another tick mark.
|
| 02:31 | So we're going to
concatenate a variable inside of here.
|
| 02:34 | We're going to come up and
grab the variable newPosition.
|
| 02:37 | We're going to copy that, paste it
right here outside of the first tick mark,
|
| 02:44 | but inside of the second.
|
| 02:45 | We're going to type px 0px.
|
| 02:47 | So what we're doing here is we're
setting the X position to whatever that
|
| 02:53 | value is, which is going to be a negative
number and we're going to keep the Y on the 0 px.
|
| 02:58 | Now we are only targeting
video links with the hover class.
|
| 03:01 | This is because we only want the
one we're hovering over to animate.
|
| 03:05 | So the last thing we're going to need
to set is to come down into the hover
|
| 03:08 | function we created earlier.
|
| 03:10 | What we're going to do inside of here
is when we roll over these individual
|
| 03:15 | video links, we're going to start with
a dollar sign, (this).addClass beginning
|
| 03:25 | and ending parentheses,
semicolon, two tick marks.
|
| 03:29 | We're going to add the hover
class to the item we're rolled over.
|
| 03:34 | Let's copy this, and when we roll out
we're going to remove the hover class.
|
| 03:38 | So instead of addClass, we're
going to come in and type remove.
|
| 03:44 | This way when we roll over the
individual anchor tags with the videoLink class
|
| 03:47 | we're going to add the hover state,
our set intervals are going to be running
|
| 03:50 | the whole time setting the background
position of any item that has the hover
|
| 03:55 | class, and when we roll out,
we're going to remove the hover class.
|
| 03:58 | This way again, only the item
we're rolled over will have the
|
| 04:01 | background animated.
|
| 04:03 | At this point let's choose File>Save All,
back to Design view, and let's go to
|
| 04:08 | Live view and test it.
|
| 04:09 | Now with Live view on I can
roll over the individual items.
|
| 04:12 | I can see the background
graphics are now shifting.
|
| 04:15 | So now when these get to -800, which
I can see down in the debugging area,
|
| 04:18 | they set back to 0.
|
| 04:20 | So this gives me a continuous loop
through those large thumbnail graphics we
|
| 04:23 | created to act like filmstrips.
|
| 04:25 | Well, at this point we've completed both
options for the animated rollovers, the
|
| 04:33 | standard animated rollovers which just
move individual elements on a page which
|
| 04:37 | you can use with any web pages
that you're currently working with.
|
| 04:40 | This one here which adds the additional
interval running at 500 milliseconds and
|
| 04:45 | then changing the background graphics
into filmstrips and then moving those in
|
| 04:49 | the background of the CSS for
the individual thumbnail graphics.
|
| 04:51 | Now in the next movie we'll talk about
where you might want to go from here with
|
| 04:55 | this particular technique.
|
| Collapse this transcript |
