How to Create a Slider to Zoom Photos: New Premium Tutorial

Wednesday, 18 August 2010 22:47

If you’ve ever used a piece of software, like Picasa or iPhoto before, you’ll be aware of the fact that there is a slider at the bottom, which allows you to specify how large each photo should be. Move the slider up a few ticks, and all the photos will zoom in a bit. Thanks to the HTML5 and the new range input, we can mimic this effect rather easily. Along the way, we’ll also learn about a variety of awesome new CSS3 features, including transition, nth-child, rotations, scaling, and more.

Help give back to Nettuts+, and learn the latest techniques at the same time!

60 Second Preview of the Tutorial

Get the Flash Player to see this player.

You’ll Learn About:

The new HTML5 range input type.
The “change” and “mouseup” events
CSS3 rotation
CSS3 scaling
Local storage
CSS3 box shadows
CSS3 transitions
Writing clean object-oriented JavaScript
How to listen for a click event with only CSS.
And plenty more fun stuff!

Join Net Premium

For those unfamiliar, the family of TUTS sites runs a premium membership service. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Gain access to this tutorial, as well as hundreds of others!