Creating a DotNetNuke jQuery Announcements Slider

Create a DotNetNuke jQuery Announcements Slider
By Andy Stephenson
May 2011

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.

>> See the jQuery Announcements Slider in Action <<

The Videos Contain:

Video 1 - Preparing the Announcements Module and adding the jQuery Files

  • Creating a new page on your DNN website to contain the slider
  • Adding the Announcements Module to the page
  • How to create new announcements
  • How to add the required files to your skin folder
Time Length: 6min 23sec

You need to Subscribe as a member of DNN Creative Magazine and Login to download this video tutorial.

Video 2 - Adding the jQuery and CSS Styles

  • 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.
Time Length: 7min 30secs

Total Time Length: 13min 53secs

Comments

comments or questionsIf you have any comments or questions for this tutorial, please ask them in this jQuery Announcements Slider forum thread.

You are not logged in.
You must log in to access all 
650+ videos, tutorials, podcasts, and more.
RSS Feeds