How to build an ASP.NET AJAX Filmstrip Viewer featuring Rounded Image Thumbnails and Reflection effect with ImageDraw
Product ImageDraw for ASP.NET Published 07/03/2008 Updated 07/03/2008
Requirements
Neodynamic ImageDraw (4.0 or later) for ASP.NET
Microsoft .NET Framework (3.5 or later)
Microsoft Visual Studio 2008 or later / Visual Web Developer 2008 Express Edition or later
This ImageDraw demo - which source code files can be found at the end of this page available for downloading - demonstrates how easily you can use ImageDraw object model and ASP.NET AJAX Framework to design a nice looking AJAX-based Filmstrip Viewer.
The following figure is a screenshot of the ASP.NET AJAX Flimstrip Viewer application that leverages ASP.NET AJAX Framework and ImageDraw technologies. Each thumbnail photo preview is into an ASP.NET ListView control and dynamically scaled with nice rounded corners effect by ImageDraw. When a photo thumbnail is clicked, the original photo is dynamically applied a reflection imaging effect (a.k.a. Glass Table effect) by ImageDraw.
The ASP.NET AJAX Filmstrip Viewer Sample
This AJAX Filmstrip Viewer features:
- ListView, DataPager and ImageDraw Data Binding
The thumbnail photos is automatically generated by ImageDraw and data bound to an ASP.NET ListView control. The DataPager control is used for paging purposes in order to simulate other scenarios with more photo files overhead. - Dynamic Thumbnails Photo Previews
Each original photo is dynamically scaled by ImageDraw to generate thumbnails on the top. In addition to scaling effect, ImageDraw also performs a nice looking rounded corners effect by rounding just top-left and bottom-right corners only.
- Photo Preview with Reflection effect
Each time a user click on a thumbnail, an AJAX asynchronous call is performed which instructs to ImageDraw to dynamically create the Reflection effect (a.k.a. Glass Table effect) on the original image file.
Sample Files Download
Here are the VB.NET and C# versions of this sample. Please download the zip file and extract it. After that, you'll find all necessary files to reproduce this demo.
For ImageDraw 4.0 for ASP.NET
- For Visual Basic.NET: ImageDraw40AJAXFilmstripVB.zip (1.92 MB)
- For Visual C#.NET: ImageDraw40AJAXFilmstripCS.zip (1.92 MB)
Remember to download and install ImageDraw for ASP.NET in order to reproduce this sample demo.