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.

Photo Cropper API: How is it achieved?

Photo Cropper was something which was introduced or I must say became popular after various social networking sites started applying it. This allows users to choose a section from a photo which he wants to upload and show to the world around.

I initially tried to investigate how Orkut do this for their users. Further I took a look at API’s provided by YUI for the same purpose. After investigating a few other sources of photo  cropper I finally decided to build a photo cropper with an approach used by orkut.

I will further explain the algorithm used in more details later, but before that let us have a look at what I have been able to come up with.

Currently configured only for FireFox Mozilla and Flock (Not IE)

Click here to visit the demo section of this API.

Algorithm

  • The upload form is a clone of gmail type attachment, where as soon as you select a file on your system. The upload starts automatically. I have explained and provided open source codes for the same one of my previous posts. Click here to read more on how to achieve this. Gmail Type Attachment Clone
  • Hence as a user selects a file for upload, it is submitted for upload into an iframe. In the iframe I have a file called ajax.php, whose one of the functionality is to save the selected file on the server.
  • After the upload is complete I do the following processes.
    • Hides the upload box.
    • Using iframe, open the uploaded file into a DIV on the parent page. See the source of the page to know more  and inspect the DIV named cropdiv. Basically I set the uploaded image into this div through a javascript function which is invoked from the iframe.
    • After you have opened up the uploaded image, main challenge is how to get the dashed rectangular selection region working. This dashed selection region is the one which users will use to select the section of image which they want to actually show up after upload.
    • For this purpose I have used a method similar to Orkut. To start with I create a dashed DIV of width and height half of the original uploaded image. Also I place this Selection DIV at top left corner and sync it up with the background original image. 
    • Biggest thing which I wondered before making this application was, as user moves the selection region how to ensure that he gets the corresponding section of the image inside the selection region. For this Orkut plays a big trick. They use another image on top of the original underlying image (which is transparent). This second image is knows as proxy image. Now as user shifts the selection DIV x pixel to the right and y pixel to the bottom, I simply move this proxy image x pixel left and y
      pixel top. Hence fooling the user around. User never gets to know if their were two images involved in the process.
    • Once you are done with selecting the portion of choice. I simply sends the top,left position of the selection div and new height and width of the selection div to the server using ajax. Ajax.php again handles this call which takes the parameters and crop the original image accordingly.
    • Finally once the we have our cropped image, we display the same to the user.
  • Another interesting thing which you can do is, allow user to tag the photo after he has cropped the image. I have provided an open source API for tagging photo in one of my previous posts here. Photo Tagging API

As promised before all this will officially be made open source with the API package i am currently working upon. Meanwhile if you really need this currently for your website or blog, feel free to contact me for the same.

If you liked this post kindly digg the same and thanks for shouting it out to your friends.


Creative Commons License

This work is licensed under a
Creative Commons Attribution-Share Alike 2.5 India License.

Photo Tagging API : Easy plugin for your websites and blogs

Flickr, Facebook and now Orkut. One by One everyone has implemented the photo tagging feature into their social network. Initially introduced by Flickr, extended by Facebook and finally Orkut was forced to implement it too.

Last night I tried to look into it to found out what does it take to make one and I was able to comeup with something like this. Probably a little different from the one’s implemented by others in the sense that you just have to do the first click and then the second click, and you are done. No mouse-press and drag thing needed.

Now without much of a talking, lets first see a demo of how it works and then probably I will write a few words on how to implement the same:

Note: How it works? Unlike Facebook and Orkut, I have implemented this in a little different manner. You just need to click once, and then no need to keep your mouse pressed. Freely move to the another place and click again and thats it, you have selected your photo tagging area and ready to tag it.

Feel free to play with the demo here.

Drawbacks: However the drawback of this phototagging API is that if someone has tagged the photo using a monitor which have a different screen resolution than yours, then probably you might not see the tag exactly at the right place. This bug exists in Facebook too, haven’t checked with Orkut yet.

Feel free to leave a comment or two.

Also feel free to discuss any flaws which you may find in the implemented API above. I am completely open for suggestions for improvement.

Happy Photo Tagging.