ImageRotator

• Download source files - 170 KB

Introduction

I have always been interested in Web controls, but never had a chance to use one. So here is my very first one. This control shows images in a slide show manner. As soon as the page is finished loading, the slideshow starts. There are three buttons on the top of the image. Here, the slideshow can be stopped and started. It is also possible to use the Previous and Back buttons to cycle through the images manually.

Using the control

Just drop the control on an ASPX page. You will need to add an image folder to your project and fill this folder with the images you would like to display in the control. Next, tell the control where to look for the images. Write the virtual path to the property imageFolder. All the additional properties are described in detail below.

That is it. Start the application and watch the image rotator do it work.

Properties

• imageFolder: Tells the control where to load the images from. The control will attempt to show all files in this folder. For this reason, you should only add files that can be shown in an 'img src' tag to this folder.
• timerinterval: Sets the interval between the images in the slideshow. Values are in milliseconds. Default is 1000.
• imageWidth: Specifies the image width in pixels. If this value is blank, the width of the image is used.
• imageHeight: Specifies the image height in pixels. If this value is blank, the height of the image is used.
• toggleStartText: The text to be displayed for the Start button. Default is Start.
• toggleStopText: The text to be displayed for the Stop button. Default is Stop.
• nextText: The text to be displayed for the Next button. Default is Next.
• previousText: The text to be displayed for the Previous button. Default is Previous.
• buttonStyle: The style to be applied to all three buttons.
• startImage: The image to be displayed first when the slideshow starts.

Conclusion

Since this is the first web control I authored, I started with a clean slate. I started by writing the functionality I wanted in HTML and JavaScript. I figured at the end of the day a web control does nothing else than write HTML and JavaScript to the browser. If you look at the source code, you will find Regions labeled Original Function. In these regions is the original HTML/JavaScript I wrote. I thought about the functionality I wanted to expose, and wrote the properties respectively. At this point, all I needed to do was write the original code in the method RenderContents and insert the values of the properties where appropriate. I split the JavaScript methods and control elements to separate methods to make the code more legible.

Hope this code helped you to find a solution to a problem.