On a lot of commercial websites you can find on the main page something like "products in the picture" or "star products".
Well I also needed something like this for the website I'm working on. A server ASP.NET webcontrol where you can add a datasource or fill a collection, with your star products (images and text), and as a result (in your browser) you see the products rotating. Therefore I created the SharpRotator.
Why the name "SharpRotator"? The control is written in C# and it's rotating.
SharpRotator features:
- Rotation of a Image, a Title, a Text, a URL and a More indication.
- The properties of the rotation items can be set per item.
- The URL (image or more) can be opened in several ways (new, parent, top, self)
- A rotation speed property on the control set the speed (delay) in milliseconds.
- You can use a datasource (for the moment only SqlDataReader) or a collection in design or runtime.
- The style of all elements can be changed by a simple style sheet.
Here is an example.
How did I start?
You can't let image rotate on the client (browser) site with server side code. Well some of you will say "yes you can", but I think that you don't want your screen flickering or the datatransfer up and down from your browser to the server for each image/text.
So I started looking around for simple client side scripting (DHTML) that rotates images. I found some good code and started my webcontrol based on this.
NOTE: I've tested the DHTML in IE 6.0 and I know it's not working in the Firefox browser. Therefore I will try in a new version of SharpRotator to change the DHTML to a more supported (complicated) version of DHTML.
First I started with the RotateItems collection, which is a collection of RotateItem class. This is just the standard collection (CollectionBase) stuff.
public class RotateItem { ... }
public class RotateItems: CollectionBase { ... }
The RotateItem contains the following properties:
- ImagePath: The relative path of the image.
- Title: The title that will be displayed per item.
- Text: The text (describing the item) will be displayed below the title.
- URL: The URL when you click on the image or on the More hyperlink (if switched on)
- More: Indication (true or false) if the More hyperlink must be displayed after the text.
- NavigationStyle: Can have the values: New, Parent, Self and Top and is used to open the URL in a different way.
Based on this collection I was able to render my control with client side scripting.
protected override void Render(HtmlTextWriter output)
{
int counter = 1;
output.Write("
\n");
foreach(RotateItem item in this.rotateitems)
{
output.Write("var image" + counter.ToString() + "=new Image()");
output.Write("\n");
...
And so on. You can see the rest in the source attached.
The control can be Data bound like you can do on the datagrid control or listbox or ...
I will explain the code of the data bound in the article here.
Download the Visual Studio 2003 project
Download the Assembly
- Wesley