Sunday, October 23, 2011

Example Project: Instagram Slideshow with HTML5




1. Download the coverflow example code from the HTML5 Rocks: here.

2. Go to http://searchinstagram.com/ and enter search term.


3. Use a web inspector in your favorite browser and find and download the images that you like. I'm using the web inspector in Safari.


4. Open up a terminal window and go to the directory where you placed the downloaded overflow sample code and find the url of the images you like from Safari and use the curl command to download those images. (The image_link is next the URL)
Syntax: "curl -O image_link"




5. Download all of your favorite pictures.


6.  Change the names of the images to something more intuitive. I names mine one, two, three,..., etc. In the index.html file change the image urls accordingly and you're all set.


 Finished Product:



Download Project: here


2 comments :

MLB2k11 said...

Excellent pieces. Keep posting such kind of information on your blog. I really impressed by your blog.
html5 music player| html5 media player

Saran said...

Thanks for your tutorial. I learned lots from here like a e-book. Keep up your work. HTML5 Slider and HTML5 Slideshow