iPhone Flick Photo SlideShow API

Apple Inc has been the pioneers in the field of innovation and excellent User Interfaces. After iPod they have come up with much hyped iPhone which runs on touch screen technology. I was just looking at this particular feature in iPhone where user can flick the photos in the slide show, and depending upon his flick speed the photos scrolls overs. Excellent application by iPhone we all must agree.

I though why not have such a feature for our websites where users can just flick through the slide show. Basically it started from a mailing list discussion and finally I have come up with the below implementation.

Now before much talking lets see what I have been able to comeup with:

Currently configured to work only on Firefox Mozilla and Flock (Not IE)

Click here for the demo link for this API

Just flick the photos to your left and right and you will experience the magic of iPhone without even having one. I will be releasing it as a part of the Javascript API, however if you are too curious and can’t stop yourself from implementing this on your website kindly have a look at the code and implement it accordingly.

Fell free to discuss and ask any question that you might have on the blog post.

Kindly digg this up and thanks for shouting it out to your friends if you liked this one.

Enjoy and Happy Flicking.

  • tau

    abe pura scroll maar do to usse baad kuch rehta hi nahin hai screen pe …. constraints lga both the side ki firstlast pic ko agar rightleft flick kiya jaayein to na hoo … nahin to kuch nahin aata hai tere mein … iphone mein yeh sab nahin hoota …. 🙂

  • Haan tau I need to put the constraints….anyways my main objective was to show that iPhone mein aaisi bhi koi badi baat nahi….

    Agar tu code dekhe this was achieved using 10 lines of JS code only 😛

  • tau

    haan but it don’t have the zoom in and zoom out function that iphone has and moreover iphone don’t use java 😛 …… chal koi baat nahin kaam to acha kiya hai launde ne to hum bhi khush hai koi kuch kar to rha hai …. yaar ab baat to hai iphone mein tum maano ya na maano 🙂

  • hehe haan maan gaye tau…ussi ko reference bana ke I have developed this thing. And its not using java its using javascript (FYI) 😀

    Apart from that zoom in and zoom out, agar tu itni demand kar hi raha hai toh daal dunga woh bhi 😛

  • tibri

    informative !

  • Thanks tibri bhaiya…..aapne bola hai toh waakai hai fir toh 😉

  • tau

    bhai java script bhi to java hi hai (FYI) … samajhe bachooo

  • Bhai tau kya bakwaas kar raha hai, You are a graduate from IITG CSE Branch…aaisi baatein shobha nahi deti.

    Bhaiya Javascript and Java are different ball game all together.

    Please google for more information 🙂

  • tau

    budwak kehne mein different hai technology to same hi hai na …. iit ke to tum bhi hoo … thoda deep soocho upari dikhaawe pe kyun jaa rahein hoon … aur google ki jaroorat nahin hai mujhe itna pta hai … tujhe jaroorat hoo sakti hai …. 🙂

  • bhai can’t comment on this now, may be third person can post a better comment.

    Both technologies are completely different, baaki aapki marzi.

  • Yasser

    Java Script to client side scripting language hai.
    http://en.wikipedia.org/wiki/Java_script

    Java to OOPS oriendted hai
    http://en.wikipedia.org/wiki/Java_%28programming_language%29

    Tau, itna to mujhe bhi pata hai jisne aaj tak code nahi kiya.

  • Sowmya

    great work 🙂 i like it!

  • tau

    sorry bhai log sab clear hoo gya thnks to yasser miya …. ab yahi farak hoota hai 6 pointer aur 8 pointers mein … 🙂 … maafi maafi maafi …

  • hehe, saale mein bol raha tha toh nahi maan rahe the, Yasser miyan ke ek kahene par ek hi baar mein maan gaye 😉

  • tau

    abe ab tu jaanta to hai kitna aalas bra pda hai yasser miya ne link bheje to pad ke dekh lliyen tu sirf google google likha rha tha to kahan ab hum search karne waalein the …. tu link bhejta to tere baat pe hi maan jaata …. 😛

  • Ravi

    great work!
    BTW your demo/script also works on Opera 9.5 (just FYI) 🙂

  • aah, cool man. Thanks for the info 🙂

  • Tittu

    Hi Jhantu,
    There is a Mozilla add-on application which does this – PicLens. Its a must-have! Your API is great, it will fell more natural if yu can incorporate slowing down effect as if it is sliding to a stop after yu stop flicking action.

  • Hey T2,

    Thanks for the comment. Yes probably in future I can look forward to adding the slow down effect, nevertheless it still have some naturalness attached to it.

    I didn’t know about this addon. Lemme see 🙂

  • deepak

    Hello,
      I am a iphone developer, working on a iphone application, in that i want to add a slide show to play images with play, pause , previous, next options. But i haven’t idea about this, how can i do that,  can you please help me in this to create a slide show to play images for iphone application.
     Which iPhone API or framework I’ll use to craete slide show. Please help me in this.

  • Hi Deepak,

    I wish I could have helped you but unfortunately I am not an iphone app developer. I haven’t tried my hands on that. I developed this application after I saw a similar thing on my friends iphone and this is purely made with some javascript + physics 😛

    I hope you find what you were looking for. However if you need the source code for this application, just copy the javascript file.

    All the best!

  • devd

    awesome man , will you please release the javascript code for this , ill be waiting for this

  • Thanks devd,

    The script is open sourced. Basically it is included in the header section of that page, you can view source and extract the same from there.