Contact

DotNetNuke Tips for Skinning, CSS, and Design

Ralph Williams Blog

Turn DNN Announcements Module into a jQuery Slider

Jun 3

Written by:
Thursday, June 03, 2010 10:34 PM  RssIcon

DotNetNuke has come a long way recently with making things much more w3 compliant. This has allowed for more than just cleaner code; it has also allowed for much more control of your website through jQuery and CSS. Also, according to the forums, it looks like things are getting even better for compliance and control.

One of my favorite updates of DNN modules to this new compliance, is the DNN Announcements module. With the latest release, we now have the ability to set up the announcements as a list and apply some cool jQuery to it. When I started looking into what I wanted my slider to be, I decided that I wanted to have my main image fade in and out and the title and description to slide in from the bottom. I came across the s3Slider jQuery plugin which seemed to provide exactly what I was looking for.

I have outlined the steps below on how to add it to your site. I did not go into much detail on how things are set up. For more detail on the slider, check out the s3Slider link above.

Demo

The HTML

  1. Add the Announcements module to your page.
  2. Click the "Settings" link.
  3. Expand the "Announcements Settings"
  4. Remove exisiting code from Header Template, Item Template, and Footer Template.
  5. In the "Header Template:" text area, enter the following code: 
    <div id="s3slider">
  <ul id="s3sliderContent">
  6. In the "Item Template:" text area, enter the following code:
    If you want your description area to be at the top of the image area, use the class top in the span.
    If you want your description area to be at the bottom of the image area, use the class bottom in the span as I have here. 
          <li class="s3sliderImage">
          [IMAGESOURCE]<span class="bottom"><strong>[TITLE][EDIT]</strong><br />
          [DESCRIPTION]<br />
          [READMORE]</span>
      </li>
  7. In the "Footer Template:" text area, enter the following code: 
            <li class="clear s3sliderImage"></li>
  8. Also, in the "Footer Template" area close out the ul and div that was started in the "Header Template" area. (I couldn't put the code in, for some reason it kept breaking the layout and losing the code.)

The CSS

In your skin.css file, insert the following styles: (note the widths and heights in the CSS. They need to be exactly the same as the image for the announcemnts.)

#s3slider { width: 500px; height: 242px; position: relative; overflow: hidden;}
#s3sliderContent { width: 500px; position: absolute; top: 0; margin-left: 0;}
.s3sliderImage { float: left; position: relative; display: none;}
.s3sliderImage span { position: absolute; font: 14px/21px Arial, Helvetica, sans-serif; padding: 10px 13px;  width: 500px; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none;}
.top { top: 0; left: 0;}
.bottom { bottom: 0; left: 0;}

The jQuery

Now that we have all of that in place, we can add the jQuery to make it work.

  1. Include a refrence to jQuery in your skin. This is already done if widgets are inabled on your site.
  2. Download the files from the s3Slider site. http://www.serie3.info/s3slider (link opens in new window)
  3. Upload the s3Slider.js file to your skin folder.
  4. In your skin file (for example: skin.ascx), enter the following code: (you can put this at the top or the bottom of your skin) 
    <script type="text/javascript" src="<%= SkinPath%>s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() { 
       $('#s3slider').s3Slider({ 
          timeOut: 7000 
       });
    });
</script>

The Content

Now just start adding your announcements! Be sure to make your images the same size as what is set in the CSS.

Please feel free to leave questions or comments.

Updated December 15, 2010: Added instructions to remove existing HTML in template, clarification on closing ul and divs in Footer Template and instruction to reference jQuery.

Trackback Print
Tags: slider , jQuery , CSS , skinning , announcements
Categories: Skinning, jQuery
Location: Blogs Parent Separator RalphWilliams.com

15 comment(s) so far...


Gravatar

Re: Turn DNN Announcements Module into a jQuery Slider

Ralph,

This is a great example of how easy it is to use and add jquery to a DNN site, and for how creative we can be with the modules.

Thanks for sharing with us :)

Rick.

By Rick Beddie on   Friday, June 04, 2010 11:39 AM
Gravatar

Re: Turn DNN Announcements Module into a jQuery Slider

Nice job Ralph. Always pushing the DNN envelope. Thanks for the post.

By Kurt Amstutz on   Friday, June 04, 2010 1:14 PM
Gravatar

Re: Turn DNN Announcements Module into a jQuery Slider

Great example Ralph. I'm doing something very similar with a jQuery content rotation script in my Aggregator module. I might have to create a new skin using the s3Slider. I hadn't seen that one before.

By Richard Edwards on   Friday, June 04, 2010 2:15 PM
Gravatar

Re: Turn DNN Announcements Module into a jQuery Slider

Nice - I integrated the CodeSlider into the HTML module on the PokerDIY.com homepage... check it out ;)

By Rodney Joyce on   Sunday, June 06, 2010 3:37 PM
Gravatar

Re: Turn DNN Announcements Module into a jQuery Slider

Excellent tips. Thanks for sharing with us :)

Inspired by this post, I also published a similiar tutorial about how to create a jQuery Carousel - [http://www.sunblognuke.com/Blog/entryid/236/Turn-Content-Slider-Widget-into-a-jQuery-Carousel.aspx]. Please check it out :)

By Baldwin Sun on   Wednesday, June 09, 2010 7:07 PM
Gravatar

Re: Turn DNN Announcements Module into a jQuery Slider

This slider looks really slick, I have been trying to integrate it into my internal site. I have followed the instruction but all I get is a blank announcements module, even after adding some announcements. When you are editing the header template sections do you remove the existing formatting and replace it with code you wrote or is it appended to the default template? Also you mention that on the footer template section to add in a close unordered list and the div, is this needed as it is closed in the header?

Any help would be greatly appreciated.

By Videsh Lingabavan on   Wednesday, December 15, 2010 7:15 AM
Gravatar

Re: Turn DNN Announcements Module into a jQuery Slider

@ Videsh:
I added some clarification to your questions in the blog. You do replace the existing formatting and replace it with the new code. Also, the closing of the ul and div are needed in the Footer as it should be closing what is in the Header. It should not be closed in the Header itself. And, make sure you either have widgets enabled on your site or are referencing jQuery somewhere.

Let me know if you have any other questions.

By Ralph Williams on   Wednesday, December 15, 2010 9:26 AM
Gravatar

Re: Turn DNN Announcements Module into a jQuery Slider

This slider looks really slick, I have been trying to integrate it into my internal site. I have followed the instruction but all I get is a blank announcements module, even after adding some announcements. When you are editing the header template sections do you remove the existing formatting and replace it with code you wrote or is it appended to the default template? Also you mention that on the footer template section to add in a close unordered list and the div, is this needed as it is closed in the header?

Any help would be greatly appreciated.

By Videsh Lingabavan on   Wednesday, December 15, 2010 11:37 AM
Gravatar

Re: Turn DNN Announcements Module into a jQuery Slider

Brilliant post Ralph, it was really nice and easy to follow your instructions. Many thanks for sharing and well done!

By Kar on   Monday, February 28, 2011 10:47 AM
Gravatar

Re: Turn DNN Announcements Module into a jQuery Slider

images are displaying by using this... please suggest what to do

By Vijay Kumar Pasupulatie on   Monday, September 12, 2011 4:43 AM
Gravatar

Re: Turn DNN Announcements Module into a jQuery Slider

sorry for previous comment.. Images are not displaying ... what i have to do for that

By Vijay Kumar Pasupulatie on   Monday, September 12, 2011 4:45 AM
Gravatar

Re: Turn DNN Announcements Module into a jQuery Slider

I am trying to follow this in DNN 5, but after I install the Announcements Module, I see Admin Settings and Host Settings. I went into the Settings.ascx but I don't see any Header, Item or Footer template. Sorry for being so silly. I'd appreciate any advice.

By Christine on   Tuesday, September 13, 2011 8:53 PM
Gravatar

Re: Turn DNN Announcements Module into a jQuery Slider

@Vijay Can you provide more information about your issue?

@Christine Once adding the module to the page, you should be able to access the module settings by clicking the settings link in the dropdown actions menu (the little blue arrow) for the module. Inside there should be a section labeled Advanced Settings. Expanding that should reveal the Template options.

By Ralph Williams on   Tuesday, September 13, 2011 9:03 PM
Gravatar

Re: Turn DNN Announcements Module into a jQuery Slider

Nevermind! I figured it out! Sorry to be a bother! Thanks for a great tutorial :)

By Christine on   Tuesday, September 13, 2011 9:13 PM
Gravatar

Re: Turn DNN Announcements Module into a jQuery Slider

Hello Ralph,

these are trully great posts on using Jquery with standard DNN modules. if i follow your example everything works just fine. But what if i want to keep the original functionality of the DNN anouncement module and also have it changed as you propose into a jquery slider? can i have two seperate installments?

thanks

By nikos on   Saturday, December 10, 2011 6:53 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 

Send me a message.

Name:*
Email Address:*
Message:*
Security Code:
CAPTCHA
Enter the code shown above in the box below
* required Submit   Cancel