Creating a rotating banner from a text module in dotnetnuke

If you want to create a rotating banner or something like a new ticker or news rotator . It is very easy in different languages for the web with the JQuery libraries available. The only things that you need to do is fetch the library include it in your page and use the script the way it says to use it.

Unfortunately since a lot of people who say they are familiar with the DotNetNuke and can develop a DotNetNuke module have difficulties in doing so they would like to go for a slower or more customizeable paid module rather than developing itself.

Here is how you can achieve doing so using your own skin using the existing HTML/Text module of DotNetNuke. You just create the container for it and it will take care of the rest.

1: Create an ascx file for your dotnetnuke website’s skin.

2: Download the Jquery library you want to use. (download malsup’s JQuery cycle library for instance)

3: Place the js file in the folder where you have put the ascx file for your skin

4: Include the file in your ascx skin file like in the code shown below

<dnn:DnnJsInclude runat=”server” FilePath=”jquery.cycle.lite.js” PathNameAlias=”SkinPath” />

5: Now create a ascx file for the container, for example container.ascx

6: Put the control type you want to use as shown in the library’s documentation.

I would use div here

<div id=”s1″><div id=”ContentPane” runat=”server”></div></div>

7: Put the Js code to run the rotator

jQuery(document).ready(function ($) {
$('#s1').cycle({ 
    fx:    'fade', 
    speed:  2500 
 });
});

8: Change the id of the div that you want to use as rotator, here it is s1 to a dynamic id like

id=”<%=ModuleControl.ModuleContext.ModuleId%>_s1″

This will create a dynamic id for the div using the moduleid for the module it is used in.

9: Replace the id s1 with the one you used in point 8.

10: Remember that since it is JQuery, you can use

$('#s1 myclass1')

where #s1 is the div and myclass1 is the class of a sub or child div. or you can use the Child selector of JQuery using classes. For more info on how to use the Child selectors please refer to JQuery API.

http://api.jquery.com/child-selector/

11: Last package your skin and container. If you dont know how to do it just zip the skin.ascx file and the JS in one zip file and install it using DNN, while zipping the container.ascx in another zip file.

Note: DotNetNuke skinning practices are not described here.