- Posted by miketeye on March 13, 2007
Share on FacebookThere is a follow up post on this subject
here.
If you are keen on new tricks used in developing cutting edge web sites, you will have undoubtedly come across sites which rely heavily on interactive flash animations to implement zooming. It works quite well for most of the sites I have seen that do it very well. The downside of this approach is that, the animations will have to be created for every product (in the case of an ecommerce site) at the initial stage, and subsequently for a dynamic site, every new product added to the databse will require an animation.
This is where ASP.NET 2.0 and AJAX framework comes in. Prior to ASP.Net 2.0 and Ajax, it would have been very difficult to implement a zooming system without relying heavily on javascript. But with .Net 2.0 and Ajax, this is very much reduced to a few lines of carefully crafted code.
The main power behind the implementation of such an image zoom system is the ajax UpdatePanel which will allow for refreshing the display of the image at an enlarged or reduced size without full page postbacks. However, the key to implenenting suc a system will be an asp.net handler (.ashx) file which will be responsible for the actual rendering of the image. The handler will typically rely on an object class to provide the necessary image resizing logic.
As a recap, to implement such a live zooming system, we will need the ff:
1. A class object with Graphic manipulation logic to handle image resizing.
2. A handler class to handle dynamic image rendering, this will be used as the url to image controls,
eg: <img src="~/imageZoomHandler.ashx?image=imagename&size=100" />
3. An asp.net webform with an updatePanel containing an image control.
The Updates to the UpdatePanel will have to be by triggers. A very good trigger to use for the purpose is the Ajax slider control which ships with the Ajax Control Toolkit. You can download the Ajax Control Toolkit with the slider control from the
asp.net ajax site
I am still finalizing my journey on this project and will post some code snippets on this space after I have gotten a good prototype.