Create nice News Rotator with CMSMS News module and jQuery Cycle plugin

This time i will show you how easy it is to create a nice looking Header Rotator driven by CMSMS News module and jQuery Cycle plugin.
Before we start we will need some tools, scripts to work with.

cmsms-news-rotator.jpg

Now when we have downloaded everything we need, you should upload functions.supersizer.php to /plugins folder of your CMSMS Installation and this gives us {supersizer} tag that is used for resizing images in our Summary template.

Our next step is editing the template, there is not much to do at this moment, but we only need to add jQuery and Cycle plugin to it. You can place this code either inside <head> </head> or before </body> end.

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.cycle/2.88/jquery.cycle.all.js"></script>

Extra FieldIn the next step we will go to our News module in "Content -> News" and add an extra Field by clicking on Tab "Field Definitions" and "Add field Definition". 
Name your field "sliderbig", select "file" from Dropdown and check the "Public" checkbox. 
Click "submit" and move on to "Summary Template". 


Click on "Create a new Template" and paste the code below.

<div class="sliderWrapper">
    <div class="sliderInner">
        <div class="info">
            <ul id="navigation">
                {foreach from=$items item=entry}
                {assign var=post value=$entry->id}
                {assign var=img value=$entry->sliderbig}
                <li>
                    <a href="#">
                    {if isset($entry->fieldsbyname.sliderbig)}
                        <span class="imageThumb">{supersizer path="uploads/news/id$post/$img" width=40 height=40 alt=$entry->title|cms_escape:htmlall}</span>
                    {/if}
                        <span class="postTitle">{$entry->title|cms_escape}</span>
                    </a>
                </li>
                {/foreach}
            </ul>
        </div>
        <div class="summaryWrapper">
            <div class="summaryContent">
                {foreach from=$items item=entry}
                <div>
                    <h2><a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">{$entry->title|cms_escape}</a></h2>
                    <span class="date">{if $entry->postdate}{$entry->postdate|cms_date_format}{/if}</span>
                    {$category_label}{$entry->category}
                    {if $entry->author}{$author_label}{$entry->author}{/if}
                    <br />
                    {if $entry->summary}{eval var=$entry->summary}
                    {else if $entry->content}{eval var=$entry->content}{/if}
                </div>
                {/foreach}
            </div>
            <div class="summaryImage">
                {foreach from=$items item=entry}{assign var=post value=$entry->id}{assign var=img value=$entry->sliderbig}
                <div>
                    {if isset($entry->fieldsbyname.sliderbig)}
                        {supersizer path=uploads/news/id$post/$img width=675 height=350 alt=$entry->title|cms_escape:htmlall}
                    {/if}
                </div>
                {/foreach}
            </div>
        </div>
    </div>
</div>

Save the Template and move on to "Layout -> Stylsheets" and create another Stylesheet or attach following CSS code to your existing Stylsheet that is linked with your Page Template.

/* Rotator wrapper */
.sliderWrapper {
    width: 940px;
    height: 350px;
    padding: 10px;
    background: #fff;
}

.sliderInner {
    height: 350px;
    overflow: hidden;
}
.info {
    width: 265px;
    height: 350px;
    float: left;
    display: inline;
}

/* left side of rotator containing small thumbnail and title */
.info ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.info ul li {
    line-height: 64px;
    height: 64px;
    width: 265px;
    padding-left: 10px;
    border-bottom: 1px dotted #ccc;
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.22,
    rgb(245,245,245)),
    color-stop(0.61, rgb(255,255,255)));
    background-image: -moz-linear-gradient(
    center bottom,
    rgb(245,245,245) 22%,
    rgb(255,255,255) 61%);
}

.info li a:link {
    text-decoration: none;
    display: block;
}

.info li.activeSlide, .info li a:hover {
    background: #eee;
}

.info li a:focus {
    outline: none;
}

span.imageThumb {
    float: left;
    background: #f1f1f1;
    border: 1px solid #ccc;
    width: 40px;
    display: inline;
    padding: 5px;
    margin-top: 8px;
}

span.postTitle {
    float: left;
    padding-left: 10px;
    font-weight: bold;
    width: 160px;
    display: inline;
}

/* right rotator side containing big image and summary text */
.summaryWrapper {
    float: left;
    display: inline;
    width: 675px;
    height: 350px;
    position: relative;
}

.summaryImage {
    width: 675px;
    height: 350px;
}

.summaryContent {
    width: 280px;
    height: 350px;
    background: #000;
    z-index: 999;
    color: #fff;
    position: absolute;
    right: 0;
    top: 0;
}

.summaryContent div {
    padding: 10px;
}

.summaryContent h2 a {
    font-size: 22px;
    text-decoration: none;
}

We are almost done, all we have to do now is add some Cycle plugin functions and we are ready to post some News.
Go back to your Page Template and add this code below jQuery Cycle plugin call. 

<script type="text/javascript">
    $(function() {
        $('.summaryImage').cycle({
            fx : 'scrollUp',
            delay : -6000,
            timeout : 6000,
            pager : '#navigation',
            pagerAnchorBuilder : function(idx, slide) {
                return '#navigation li:eq(' + (idx) + ') a';
            }
        });
        $('.summaryContent').cycle({
            fx : 'fade',
            delay : -6000,
            timeout : 6000,
            pager : '#navigation',
            pagerAnchorBuilder : function(idx, slide) {
                return '#navigation li:eq(' + (idx) + ') a';
            }
        });
        //adding some opacity to content box
        $('div.summaryContent').css({
            opacity : 0.80
        });
    }); 
</script>

And this is it, we are done, all we need to do is calling News module in our Template or on a page with {news summarytemplate='newsSlider' number='5'}.
Click on button below to see a working demo.

ALL-INKL.COM - Webhosting Server Hosting Domain Provider

Comments