How to Create a Slider to Zoom Photos: New Premium Tutorial
Tutorial Details
- Topics Covered: HTML5, CSS3, JavaScript
- Estimated Difficulty: Intermediate
Download Source Files
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
You’ll Learn About:
- The new HTML5
rangeinput 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 $19 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!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Going to premium area to download it Seems so coooooooool
i were thinking why not do a slider with CSS3 and a little bit of HTML5
and here you are doing it
so great tut hope not have java only CSS3 and HTML5 :)
Well it seems that it have java :(
but it’s a great tut even with java XD
You mean, JavaScript. :)
yes i do “shorting it up to be just java XD” :)
at last jeff is back with full Premium video casts not the quick tips stuff , its good you are back
Omg, paypal is sooo slow. Want to buy premium so i can learn this kind of things! Cant wait! :D
Love your tuts Jeffrey!
thank you !
I’m learning this.
You had me until about 25mins in and then my brain caught on fire.
Is the click for image zoom what I used for co-writing this tutorial: http://css-tricks.com/expanding-images-html5/ (I don’t have premium, so i can’t check)
Hey Adrian –
No, didn’t see that tut – but looks good!
That piece of code is based on a Premium tut that I wrote a long time ago – http://net.tutsplus.com/tutorials/html-css-techniques/combining-modern-css3-and-html5-techniques/
The source-code download link only takes me to the video. Where is the actual zip link?
Hey Jeffrey,
I’m just viewing tutorial at premium content area, but can not be able to download. Is there anyway to download to my pc ?
Btw fancy tutorial.
Thanks