jQuery sliders have been spotted to be commonly used in lots of website to display the images/contents in different impressive ways. Since apart from showing large amount of core site content in a limited space on a website, any jQuery slider also has a great capability to engage the viewers and trigger their interest towards what is being shown to them. In the DNN platform,  it’s also a very popular functional widget and there are lots of slider modules for sale in the snowcovered.com. In my opinion, those modules have the vital disadvantage that they are built with static contents and independent with any content publishing tool. In the end you have to modify them one by one if you want to make it look more dynamic. Now we would like to share the alternative useful tool with building neat, elegant and versatile site components with dynamic effects. Yes, that is the Content Slider Widget(CSW) for Ultimate DNN Blog Module – SunBlogNuke.

With the help of jQuery & CSW, you will be able to create any super content sliders with your dnn blog posts. So if you’ve been wondering how jQuery content sliders are accomplished and want to try implementing some of them on your DotNetNuke website, here this tutorial will help you with that.  Today we just showcase the amazing slide thumb on how to make viewing images or other site content more comforting and intuitive. Take a look at how the slide thumbs actions – demo link. Then let’s go ahead.

In the beginning, please refer to the similar tutorial [Create an Awesome Content Slider with SunBlogNuke] for some basic concepts, such as custom fields. This slide thumbs requires one original image with a smaller thumbnail for navigation at the bottom. Here we just build the thumbnail with custom field key called "thumbnail" and retrieve the first image from the post content for the original image, for which you can utilize the token [THUMBNAIL]. All right, suppose that the blog posts are ready to showcase now. Next just follow up the steps below:

1) Complete the similar preparation process mentioned in the tutorial [Create an Awesome Content Slider with SunBlogNuke]. The folder called 'slide_thumbs' in this sample and please download it here.

2) Enter the 'Widget Settings' of Content Slider Widget.

3) Fill in the external utility scripts and it should formatted as http://yourdomain.com/portals/XX/slide_thumbs/slide_thumbs.js.

4) Fill in the external utility styles and it should formatted as http://yourdomain.com/portals/XX/slide_thumbs/style.css.

5) In the "Extra Template" text area, enter the following code:

{block:first}
<div id="preview_wrap">
<div id="preview_outer">
<div id="preview_inner">
<div><img src="[THUMBNAIL]" alt="[TITLE]" />
<a href="[LINK]">[TITLE]a>
div>
{/block:first}
{block:last}
<div><img src="[THUMBNAIL]" alt="[TITLE]" /><a href="[LINK]">[TITLE]a>div>
div>
div>
div>
{/block:last}
<div><img src="[THUMBNAIL]" alt="[TITLE]" /><a href="[LINK]">[TITLE]a>div>

It built the main section to show the original image with some fields, like post title & link. The extra template is totally new option and it is introduced in the CSW from v4.5. And you maybe have noticed the new tokens  {block:first} & {block:last}, with which creating flexible layout will be more easier and handy to use. Just remember how to user them as follows:

{block:first}xxx{/block:first} : it wraps the first item in the list and you can stand up it with different tokens or tags. For example you can wrap the started container tag

here.

{block:last} xxx{block:first} : it wraps the last item in the list and you can stand up it with different tokens or tags. For example you can wrap the closed container tag

Note that the left tags exclude the block sections {block:first}xxx{/block:first} and  {block:last} xxx{block:first}  will be the common item template.

6) In the "Item Template" text area, enter the following code:

{block:first}
<div id="thumbs">
<div id="arrow">
div>
<span><img src="[customfield:thumbnail]" alt="[TITLE]" />span>{/block:first}
{block:last}<span><img src="[customfield:thumbnail]" alt="[TITLE]" />span>div>{/block:last}
<span><img src="[customfield:thumbnail]" alt="[TITLE]" />span>

It built the thumbnail navigation in the bottom.

6) Click 'Upadte' to save all the modifies and the slideshow will work like a charm. Take a look at how the slide thumbs actions – demo link again.

ps: this tutorial was inspired by the post http://jqueryglobe.com/article/slide-thumbs.

From v4.2.0 , the Ultimate DNN Blog Module – SunBlogNuke includes custom fields features and the Content Slider Widget supports to include external scripts and styles easily. Now we have the ability to set up your content widget as a list and apply some cool jQuery slider scripts to it without any additional steps. Today we would like to show you how to integrate it with Coin Slider Plugin. First take a look at how the navigable content slideshow actions – demo link. Then let’s go ahead the great journey for building an awesome content slider in your home page.

Today I would like to cover a tip shared by Eric in our support forum. You will learn how to retrieve feed in DotNetNuke with jQuery. Please visit the demo link and db4 developer website to see how it action firstly. Okey, let us go ahead the integration process below on how to add a blogging feed to your site.

1) Make sure whether there exist the core jQuery framework in the current page. It should be there if your website is above 5.x.

2) Add the Html module to your page and click "Edit Content" and enter html editor panel.

3) Switch to "Rich Text Editor" mode and click "Source" into html source as screenshot below:

4) Copy the following codes and paste it into the text area:

<div id="rssdata" class="community_activity">
    <div class="loading">loading activity feed...div>
div>

<script type="text/javascript" language="javascript">
    $(function() {
        var pipe_url = 'YOURFEEDURL'; // e.g '/Blogs/Community/tabid/166/rssid/0/Default.aspx';
        var max_records = 4;
        var item_style = 'box_dark';
        var item_style_alt = 'box_light';

        $.get(pipe_url, function(xml) {
            $("item", xml).each(function(index, item) {
                if (index >= max_records) return; //short-circut for the max_records
                var s = (index % 2 == 0) ? item_style : item_style_alt;
                var item_html = '
'">"link", item).text() + '">' + $("title", item).text() + '';
                $('#rssdata').append(item_html);
            });

            $('#rssdata div.loading').fadeOut();
            $('#rssdata').slideDown();
        });
    });
script>

that's all the code you need. You just need to replace the token [YOURFEEDURL] with your specific feed source. Also  you can do some more things basing the code snippet, like rendering the description and publish date. Please refer to the related resources in the end of the post.

5) Click "Save" and return front-end page. Then you will discover that the slider works like a charm. :)

Note that you may need to add some styles into skin file (skin.css) for making your slider more cool, for example the box_dark & box_light mentioned in the above code sample.

Related resources:

http://visualrinse.com/2008/09/24/how-to-build-a-simple-rss-reader-with-jquery

Okey, let us go ahead the customized process below on how to add it to your site.

1) Add the Content Slider Widget module to your page.

2) Enter the "Widget Settings" panel. Note that we just focus on the template configures in the following steps and you can feel free to configure other settings.

3) In the "Header Markup" text area, enter the following code:

<div class="js-carousel-post cleared">
    <div id="js-carousel" class="container">
        <ul>

4) In the "Footer Markup" text area, enter the following code to close out the ul and div tags:

        ul>
    div>
div>

5) In the "Item Template" text area, enter the following code for showing item content:

<li id="postItem_[POSTID]">
    <h3><a href="[TARGET]">[TITLE]a>h3>
    <p>[EXCERPTTEXT]p>
li>

6) Make sure whether there exist the core jQuery framework in the current page. It should be there if your website is above 5.x.

7) Add the Html module to your page and click "Edit Content" and enter html editor panel.

8) Switch to "Rich Text Editor" mode and click "Source" into html source as screenshot below:

9) Copy the following codes and paste it into the text area:

<style type="text/css">
    .js-carousel-post
    {
        position: relative;
    }
    .js-carousel-post #js-carousel
    {
        width: 600px;
        margin: 0 auto;
        float: left;
        position: relative;
    }
    .js-carousel-post .container
    {
        overflow: hidden; /* fix ie overflow issue */
        position: relative;
        width: 610px;
        height: 230px;
    }
    .js-carousel-post ul
    {
        position: relative;
        left: 0;
        top: 0;
        margin: 0 0 0 -619px;
        width: 9999px;
        height: 230px;
        overflow: hidden;
    }
    .js-carousel-post li
    {
        width: 585px;
        float: left;
        margin: 0 3px;
        padding: 0 5px;
        height: 230px;
        list-style: none;
    }
style>  
<script type="text/javascript" language="javascript">
    var carousel = (function() {
        // Configurable Variables
        var init_autoRun = true;
        var autoSpeed = 2000;
        // Common Variables
        var li_posL = parseInt($('#js-carousel ul').css('left'));
        var li_w = $('#js-carousel li').outerWidth();
        var ul_posL = li_w * (-0);

        function rotation() {
            var indent = li_posL - li_w;
            $('#js-carousel ul').animate({ 'left': indent }, 'slow', function() {
                $('#js-carousel li:last').after($('#js-carousel li:first'));
                $('#js-carousel ul').css({ 'left': ul_posL });
            });
            return false;
        }

        $('#js-carousel li:first').before($('#js-carousel li:last'));
        $('#js-carousel ul').css({ 'left': ul_posL });
        if (init_autoRun) {
            var autoRun = setInterval(rotation, autoSpeed);
            //if mouse hover, pause the auto rotation, otherwise rotate it
            jQuery('#js-carousel').hover(function() {
                clearInterval(autoRun);
            }, function() {
                autoRun = setInterval(rotation, autoSpeed);
            });
        }
    });

    jQuery(document).ready(function() {
        carousel();
    });
script>

10) Click "Save" and return front-end page. Then you will discover that the Content Slider Widget had been turned into a jQuery carousel and works like a charm. :)

Note that you choose some alternative ways to complete the steps 7)-10), like adding style into skin style file (skin.css) and attaching script into skin control (YourSkinName.ascx).

More enhancements you can do

Actually you can do more customizations than what we mentioned above. This tutorial is just a start for you, for example, you can create a cool navigation (Previous & Next) with the content slider or integrate more extremely popular jQuery plugins like s3slider or bxSlider. In a word, it depends on what you image.

What we can do for you

Yesh, we will make the content slider widget more flexible and extendible. Next we will provide a built-in way to implement those customizations in the widget itself but not with any external helps. Please stay tune and leave a note if you have any advice.:)

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. And now, you can use it with your DNN module to make your DNN module more interactive. Luckily our ultimate dnn blog module – SunBlogNuke had integrated with facebox plugin and implemented it into some excellent features. Today I would like to show you how to apply lightbox effect for some big image within dnn blog post. Note that we just demonstrated the process in Window Live Writer. Actually we also recommend that you should manage your posts with WLW, which will make your post management simply and easily. Now you just follow the simple steps below:

1) Open up your WLW and get started to write your post.

2) Just copy your big graphs or images into the content section of WLW and it will be scaled in to a little one. Also you can apply some options for some customized effects, like size, text wrapping, borders.

3) Set the option [Link to] as Source Picture and click the Options below. Then it should pop up the Source Picture Options window and there you can set it as follows and click "OK":

4) Switch the source tab at the left-bottom of content panel, find out the image tag section and insert the rel property for facebox detected. The following code should look like:

Okey, that’s all. Now the built-in facebox plugin will automatically attach the Facebook-style lightbox for your picture.

In the end I presented an illustration depicting a common scenario for DotNetNuke Deployment in the Enterprise. Click the image to zoom it for a higher-res version with built-in facebox.