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:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

The cycle.js file will need to be manually downloaded however, and for my example, so will a few other files. Here are the ones you will want:

<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.cycle.all.min.js" type="text/javascript"></script>
<script src="js/jquery.approach.min.js" type="text/javascript"></script>

Lastly, I always implement my own JavaScript file so that I can call the jQuery and get the rotator going.

<script src="js/functions.js" type="text/javascript"></script>

Now we can get into the good stuff. First we will set up the code in the skin file where the rotator will live. In your skin file, where the rotator is going to go, put this code:

<div id="rotator">
    <div id="rotator_panels">
        <div id="RotatorPane" runat="server"></div>
    </div>
    <ul id="rotator_nav"></ul>
    <div class="pager_btn" id="img_left"></div>
    <div class="pager_btn" id="img_right"></div>
</div>

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:

(function (j$) {
  j$(document).ready(function () {

    //Initializes the rotator
    j$('#rotator_panels > div').cycle({
      fx: 'scrollHorz',
      easing: 'easeOutExpo',
      timeout: 10000,
      next: '#rotator_right',
      prev: '#rotator_left',
      pager: '#rotator_nav',
      pagerAnchorBuilder: function (idx, slide) {
        return '<li></li>';
      }
    });

    //Unhides image rotator nav buttons
    j$('#rotator_nav').show();

    //Sets page left/right buttons as visible, fades buttons up on approach.
    j$('.pager_btn').fadeTo(0.00);
    j$('.pager_btn').approach({ opacity: 1 }, 150);
  });
})(jQuery.noConflict());

This is just about it! There obviously is a lot of CSS that needs to go along with this to get it looking good. Other than that, let me know if you have any thoughts or comments.

Advertisements
  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: