I need a custom UI functionality on a ASP .NET website (MVC 2 on NET 3.5).
I would like to show portion of a large image which is taller than the browser window. This will consist of a slider and a zoom frame on the right.
Details in attached image.
Please see attached image.
The targeted resolution is 1280x1024.
The header and footer will be fixed. The body will have vertical scrollbars.
The width will be about 1000 pixels.
The picture shown contains an image, a slider and a zoom-in frame.
The image will be about 150 pixels wide and over 1600 pixels high.
[The sample diagram shows the image wider than it will be. There will be a lot more area for the zoom-in frame.]
I need a slider that will always center on the visible image. It will have a zoom-in window on the right. The area under the slider will be shown in close-up on the right. The closeup will also have text/image/link elements super-imposed on the zoom-frame. Data for these elements will come from a database. Other options/recommendations will be considered to increase responsiveness.
On landing, the slider will rest on the middle of the image.
On mouse-over on the zoom-in frame, a popup window will show content. There will be multiple discrete areas within the zoom-in frame for a given slider selection.
Clicking on a link will take user to another page. This new page should allow the user to click on a button and go back to the same image/zoom-in location instead of the middle of the image again.