2. Adding the jQuery and CSS Styles

In this DotNetNuke training series we demonstrate how to adapt the standard DotNetNuke Announcements Module into a fully functional jQuery Announcements Content Slider.

This method allows you to present your announcements, latest work or even an image gallery in a professional, intuitive way.

We show you how to adapt the announcement template to use a div structure which is then picked up by a jQuery script allowing a user to ‘slide’ through each announcement using simple forward and back buttons.

We use two different jQuery scripts in this example, the first was created by copterlabs.com and this controls the main slide animation. The second written by George Smith applies an easing effect for a smoother animation.

This video contains:

• Opening the demo code
• Adapting the Announcements module template code
• How to add the jQuery scripts to your skin ASCX file
• How to add the slider control code to your skin ASCX file
• How to add the required CSS styles into your skin.css file
• Making the page live
• Testing the jQuery Announcements module