Click here to Skip to main content
Click here to Skip to main content

ImageRotator

, 26 Mar 2007
Rate this:
Please Sign up or sign in to vote.
An ImageRotator webcontrol that cylcles through images in a specific folder.

Screenshot - rotator.jpg

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

cs256
Web Developer
United States United States
I have just finished my MCAD Certification and have set my sight on becoming an MCPD! Isn’t it great that you can never stop to learn! I have worked a lot with MS Access and VBA. I also wrote VBA for word and did some small VB Programms. I took some courses and did self study to learn SQL and XML technologies. Then .NET and C# got me and hasn't let me go!! which of course is a very good.....very good indeed. I currently work on writing a Fullfillment/Layout/Printing application for one of the big Telecom Companys in Switzerland. I am locating back to beautiful San Francisco in summer 2007 to face new challenges.

Comments and Discussions

 
GeneralMy vote of 4 Pinmembercliffr4-Nov-10 15:09 
Generaldoesn't work PinmemberBoscoBill1-Nov-08 12:47 
GeneralGreat Article PinmemberMember 47001735-Jun-08 6:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 26 Mar 2007
Article Copyright 2007 by cs256
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid