jQuery Cycle Plugin with DNN module Integration

For a number of sites that I have built, I have implemented some sort of “rotator” on the homepage. Large graphical imagery leads to a rich design and can attract users to your site (or so says the designers I work with). The PROBLEM that I faced for this however, was the issue of allowing these non-tech-savvy clients to update these images and content. Let me say that differently… they needed to be able to easily update the content that was rotating THROUGH THE UI. This is not easily doable. UI editing in DNN is always though some type of HTML module. With that being said, the most logical step would be to create a way to make entire modules rotate, and therefore users could just edit the content as it went by.

I found a way to integrate a simple jQuery cycle plugin so that a normal user could use any module’s interface to update the content. If you haven’t used jQuery before, its a pretty powerful tool. It provides a great JavaScript library that simplifies a LOT of animations, events, and other things. You can download jQuery from the site and implement it like any other external JavaScript file, but the easiest way to get it is by using Google’s hosted version. Just plop this baby toward the bottom of your default.aspx file:

The id’s are obviously up to you, but the key here is the RotatorPane. This is where the modules that are going to rotate will be dropped in. The ul element is to house the buttons for each module in the rotator, and the 2 divs below are for the previous and next buttons. The next element you need is the Javascript itself! Here is how I implemented it: