Image viewer in html5

Question

I have to develop an image viewer application. The designed application should have the following features

1. Zoom in functionality
2. Zoom out functionality
3. Magnifying functionality
4. Pan functionality
5. Image overview functionality

I have to develop the application in Asp.net application. I have the following questions

1. What will be the better method to develop such application , I mean Whether it is implemented using Asp.net controls or standard HTML controls
2. Have any scope of HTML5 in developing such application?
3. Can i get any customizable open source project written in javascript or jQuery?

Answer 1

My answers to your questions:

1. I would use HTML, since you don't need anything from the server.
2. There is, you can search google for info.
3. Look at the info below.

I would try the following steps:

1. Look for examples of the required features.
2. Strip these examples down and build them up again according to your requirements.
3. Create a holder for the image. You can load the image from the server with jQuery and AJAX
4. Implement controls for zooming, panning. Use the implementation you created in step 2

There is alot of information to be found on the internet. Some examples are:

Zooming

http://www.tripwiremagazine.com/2012/07/jquery-image-zoom.html

Panning

http://manos.malihu.gr/jquery-image-panning

Overview

http://www.designzzz.com/jquery-slide-show-image-gallery-tutorials-downloads/

Tutorial for pan and zooming with HTML5 canvas

http://my.safaribooksonline.com/book/web-development/html/9781449308032/images-on-the-canvas/zooming_and_panning_an_image

Answer 2

For me,

1. I would use HTML,
2. Use HTML5 and CSS3 if you can,
3. Yes, there are plenty. Just type what you need. It seems what you are building is a image slider/gallery. Plenty of those on the web. Just look for it.

If you have to build it from scratch, what you could do is research, these css properties. scale, zoom, and transitions.

There you go, hope I pointed you in the right direction.