Carousel Effect Module for DotNetNuke

Thomas has built a very cool carousel effect utilizing Gaia. This effect basically allows you to have several images take turns and cycle into display like a merry-go-round if you will. You can see a working sample of that effect on our home page. We wrapped this effect in a DotNetNuke module, so it can easily be configured and used on your DotNetNuke portal.

This module is open source (GPL) so you can modify and extend it if you would like to do so. You can download the source code here and the DotNetNuke installation package here. There is a forum thread dedicated to this module here where you can discuss it and share your modifications with the Gaia community. The module is built on top of Gaia Ajax Widgets 2008 Q1 (Tranquility) GPL and DotNetNuke 04.08.02.

The main module project, Gaia.DotNetNuke.CarouselEffect, which is an ASP.NET Web Project has three user controls, CarouselEffect.ascx which displays the images using the effect, CarouselEffectEdit.ascx used as our edit control to add/remove the effect images and Settings.ascx used for changing the settings of the effect like initial starting time, images' size and so on. It also includes the DataProvider class which is an abstract class that defines several abstract methods for interacting with the database, these methods will be implemented in the SqlDataProvider class. The project also contains two other classes CarouselImageInfo which is an OO representation of the data base table we will use to store the information about the effect images. The other class is CarouselImagesController which serves as the communication channel between the UI (CarouselEffect.ascx, CarouselEffectEdit.ascx) and the data provider. We also have a module.css style sheet to contain the styling of an optional heading that we can display above each image and a folder called moduleimages to contain the images used in the effect.

The SqlDataProvider class is located in the project Gaia.DotNetNuke.CarouselEffect.SqlDataProvider, a class library project, which in turn is located under the main module project folder under Provider\DataProviders\SqlDataProvider\. This project also contains two SQL scripts used by DotNetNuke to create our table and stored procedures when we install the module and to drop them when we uninstall it. The first is called 01.00.00.SqlDataProvider, 01.00.00 is the version number of our module, and the other is called Uninstall.SqlDataProvider.

The solution also includes the CarouselEffect project created by Thomas. This can serve as an example on how you can extend Gaia by writing your own ajaxified controls.

In CarouselEffect.ascx we will have a table with one row and several cells that contain the images. We utilize the Repeater to have the number of cells and thus the number of images in the effect be dynamic. In each table cell we will have a paragraph element that contains the optional description displayed above each image and a gaia image control for displaying the image which is wrapped with an anchor element to have and optional link for each image. The description, link URL and the image URL are all stored in our database table. The size must be identical in width and height for all the images, otherwise the effect will not work correctly. The width and height of the images must be provided in settings otherwise it will default to 500px for width and 294px for height. We also have a gaia timer in this user control to scroll the images at specific intervals of time provided by the settings or else it would default to 5 seconds for scrolling the images and 3 seconds for the initial start of the effect. Finally we utilize a GridView control in CarouselEffectEdit.ascx to add/remove images to our effect.

Jan has created great video tutorials about creating DotNetNuke modules, Ajax and Gaia that can be very helpful. You can find them at http://traincert.net

Tags: dnn open source ajax