Basic Javascript News Rotator

This tutorial contains the skeleton of a plugin library, and an example of a basic news rotator, which seems to be all the rage these days.

The end result of the tutorial: Live Example

The first item MyObjects acts as a namespace for custom objects that you would like in your custom plugin library. The news rotator requires two variables, image and description. The image contains the location of the image that you would like to appear in the background of the rotator. The description contains the html or text that you would like to appear with the image.

var MyObjects = {};

MyObjects.news = function(){
 this.image = "";
 this.description = "";
};

MyLib will be the library name, which will contain our Widget library. Within the widget library, we will create a public method to return a newsRotator function, which takes information from a collection of unordered lists and creates the news rotator styling.

var MyLib = {};
MyLib.Widgets = (function() {
    // Public methods.
    return {
        newsRotator: function(autoPlay, ms) {
            // This adds the proper markup to create the rotator in the rotatorFrame placeholder.
            $(".rotatorFrame").html('<div id="rotatorPlaceHolder" class="rotatorPlaceHolder"><div class="rotatorHeader"><p></p></div></div><span class="rotatorLinks"></span>');
            // Grab all elements belonging to the class newsRotator.
            var list = $(".newsRotator");
            var newsCollection = [];

            //  Assign 8 seconds to the variable ms if a timing is not supplied.
            if (ms == null) {
                ms = 8000;
            }

            // Iterate through the list of unordered lists and create our news objects.
            $(list).each(function(index) {
                var news = new MyObjects.news();
                $(this).children("li").each(function(i) {
                    if (i === 0) news.image = $(this).html();
                    if (i === 1) news.description = $(this).html();
                });
                // Add the news object to an array, which houses a collection of news objects.
                newsCollection[index] = news;
            });

            var ncLength = newsCollection.length;
            var t = 0;

            // This sets the default information in the rotator.
            $(".rotatorPlaceHolder").css("background-image", "url(" + newsCollection[t].image + ")");
            $(".rotatorHeader p").html(newsCollection[t].description);

            // This table contains the navigation buttons for the rotator.
            $(".rotatorPlaceHolder").next("span").append("<table><tr>");

            // Cycle through the collection array, and assign a function to change the data to each created link.
            while (t < ncLength) {
                $(".rotatorPlaceHolder").next("span").append("<td><div id='imageLink" + t + "' class='newsClicked'></div></td>");
                //  The bind function uses an example of currying to maintain the state of the newsCollection array and t variable.
                $("#imageLink" + t).bind("click", (function(newsCollection, t) {
                    return function() {
                        $(".rotatorPlaceHolder").css("background-image", "url(" + newsCollection[t].image + ")").fadeOut(10).fadeIn(1000);
                        $(".rotatorHeader p").html(newsCollection[t].description);
                        if (autoPlay) {
                            $(".newsClicked").css("background-color", "rgb(231, 236, 245)");
                            $(this).css("background-color", "#00573C");
                        }
                        return false;
                    };
                })(newsCollection, t));
                t++;
            }

            var autoPlayInstance;
            var namespace = this;

            // Determine the state of autoPlay to supply the correct information to the autoPlay toggle button.
            if (autoPlay) {
                timer(0, ncLength);
                $(".rotatorPlaceHolder").next("span").append("<td>&nbsp&nbsp<a href='#' id='autoPlayBtn'>Autoplay On</a></td>");
                $("#autoPlayBtn").bind("click", function() {
                    clearTimeout(autoPlayInstance);
                    $(".rotatorPlaceHolder").next("span").html("");
                    namespace.newsRotator(false);
                    return false;
                });
            }
            else {
                $(".rotatorPlaceHolder").next("span").append("<td>&nbsp&nbsp<a href='#' id='autoPlayBtn'>Autoplay Off</a></td>");
                $("#autoPlayBtn").bind("click", function() {
                    clearTimeout(autoPlayInstance);
                    $(".rotatorPlaceHolder").next("span").html("");
                    namespace.newsRotator(true);
                    return false;
                });
            }

            // End the table of buttons.
            $(".rotatorPlaceHolder").next("span").append("</tr></table>");

            // Create a function to keep track of timing if autoplay is true.


            function timer(i, length) {
                if (autoPlay) {
                    $("#imageLink" + i).trigger("click");
                    i++;
                    if (i > ncLength) {
                        i = 0;
                    }
                    autoPlayInstance = setTimeout(function() {
                        timer(i, length);
                    }, ms);
                }
            }
        }
    };
})();​

The html for the news rotator consists of placeholder div with a collection of unordered lists. The first list item contains the path to the image, while the second list item contains the html that you would like to appear in the text section of the rotator. The html could be further simplified, but I stuck with this format for the sake of this example.

Images/Desert.jpg



Desert Header
click this some test text some test some test text some test some test text some test some test text some test some test text some test some test text some test some test text some test some test text some test some test text some test some test text some test some test text some test some test text some test some test text some testsome test text some test text some test text some test text some test text some test text some test text some test text some test text some test text some test text


Images/Koala.jpg



Koala
description1


Images/Chrysanthemum.jpg



Test
description2


Images/Jellyfish.jpg



Jelly Fish
click this some test text some test text some test text some test text some test text some test text some test text some test text some test text some test text some test text


Images/Penguins.jpg



Penguins
description1


Images/Lighthouse.jpg



Lighthouse
description2

This is a stylesheet to include with the javascript code above. Feel free to change the size, colors and other attributes. This css works in all current versions of Firefox, IE, Chrome, Safari and Opera.

.newsRotator
{
 display: none;
}
.rotatorPlaceHolder
{
 width: 760px;
 height: 500px;
 background-color: black;
 z-index: -1;
 border-radius: 7px 7px 7px 7px;   
}
.rotatorHeader
{
 opacity: 0.5;
 filter: alpha(opacity=50);
 position: relative;
 color: white;
 /*width: 760px;*/
 width: 100%;
 height: 150px;
 overflow: auto;
 background-color: black;
    top: 70%;
}
.rotatorHeader:hover
{
 opacity: 0.75;
 filter: alpha(opacity=75);
}
.rotatorHeader h3
{
 padding: 10px 0px 10px 10px;
 color: white;
}
.rotatorHeader p
{
 padding: 0px 10px 10px 10px;
 color: white;
}
.rotatorHeader a
{
 color: white;
}
.rotatorFrame
{
 background-color: white;
 padding: 25px 25px 25px 25px;
 height: 550px;
 width: 760px;
 border-radius: 20px 20px 20px 20px;
 border: 1px outset gray;
 box-shadow: 10px 10px 5px #888888;
}
.rotatorLinks 
{
 margin-right: auto;
 margin-left: auto;
 padding-bottom: 5px;
 width: 760px;
}
.rotatorLinks div
{
 position: relative;
 margin: 5px 5px 5px 5px;
 background-color: rgb(231, 236, 245);
 width: 25px;
 height: 25px;
 border-radius: 20px 20px 20px 20px;
}
.rotatorLinks div:hover
{
 background-color:  #00573C;
}
.rotatorLinks div:active
{
 background-color:  #00573C;
}
#autoPlayBtn
{
   color: #006E51;
   font-size: 11px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   font-weight:bold;  
}
#autoPlayBtn:hover 
{
   color: #00573C;
   text-decoration: underline;
}
#autoPlayBtn:active 
{
   color: #00573C;
}

body
{
    font-family: Helvetica, Arial, Sans-Serif;
}

This usage of newsRotator will load the plugin with autoPlay and the default 8000 ms between content. In order to use this plugin, you need to have JQuery included in your project. I tested with version 1.7.1.