Join Chris Converse for an in-depth discussion in this video Extending the thumbnail into filmstrips , part of Creating Animated Rollovers with jQuery.
Now to animate the thumbnails what we're going to do is create really wide…thumbnails and have an individual screen shot from the video at 200 pixels wide each.…So to set up these art files inside of the Art Templates folder inside of the…exercise files I've these Photoshop files where we have taken individual screen…shots and scale them down.…So I want to open up one of these files and show you how this is set up.…So in the layers panel here I've a clipping area for each of the…individual thumbnails.…So if I turn off all of the layers in the artwork you'll see this black square here.…
If I Command+Click on this, go to the Window menu, and bring up the Info panel,…you can see that these are set to 200 pixels wide by 115 which is exactly the…size of our thumbnails.…Then we have Smart Objects here clipped into each one of these items.…So if I turn on layer 1 Smart object.…If I double-click this item and open up that Smart object I can see the full…size here that we actually cut and paste from the video. Let's close that.…
Take a look at the finished web site here.
- Updating the CSS to prepare for animated captions
- Adding the jQuery hover statement
- Animating the thumbnail filmstrip backgrounds