active dnn paging

If you’re using or planning to use our dnn products, you should get to know our "Content Slider Plus" widget. This is the enhanced version of the core awesome "Content Slider Widget" which comes with SunBlogNuke (the Ultimate DNN Blog Module). The "Content Slider Plus" has been extended to give more flexibility - and also you can include lots of built-in jQuery slider effects, now that DotNetNuke includes jQuery framework built-in from dnn 5.x.

More exciting is that we implemented "multiple blogs & categories filter" feature in this widget, which was missed in the core "Content Slider Widget" and had been requested by lots of clients. Please visit the overview post with more details and feel free to download it in the widgets directory if you are our professional clients. (yes, including above license, such as enterprise and developer edition. )

OK, now let us go ahead with putting Active Paging on to “Content Slider Plus". That’s exactly the issue raised by our clients in the forum because we did not implement the built-in paging feature in both content slider widgets. The original aims of both widgets was to build a content slider with a list of posts, like latest posts or featured posts and also to retrieve top x posts to show in the list view or slider view. For example, you can append a link such as "Read more posts..." to direct your users to the blog achieve page. Further, because of the highly configurable design, you can even add some  "Content Slider Plus" magic yourself without too much effort. Please visit the demo link to see how it looks in action.

How does it work?

In this sample, we used the external script & style feature to extend paging customization. By including the jQuery paging script, you can organize the posts list and show it with paging navigation at the bottom. All you need to do is to configure some basic options, such as page size.  Next let us go through how to apply it:

How to apply it?

Note: Minimum requirement: jQuery 1.7.2 - so you have to log-in as Super User (Host) and check that requirement is met in the Host settings page under the Host Menu. (Configuring the jQuery Host Settings is not within the scope of this tutorial For more information, this DNN Blog Post will provide guidance)

To Apply, you need a resource package:

1) Download the resource package "PagingWithContentSliderPlus" in our download page.

2) Unzip the package and copy its contents into the current portal instance number root folder.
     For example: If you would like to add this widget into a DNN Installation with a single portal instance number, then the current portal root folder will be Portal 0 (On the server file system this is $ROOT/Portals/0) (or in ftp, ~/wwwroot/Portals/0)

3) Log in to your portal as Host or an Administrator, and, From the Modules menu on the selected page, add the "Content Slider Plus" module on to your chosen page.

4) Enter widget settings panel of "Content Slider Plus" module. Configure it as follows:

Template markup:

[ITEMS][EXTRAITEMS]
<div class="gigantic pagination">
    <a href="#" class="first" data-action="first">&laquo;</a>
    <a href="#" class="previous" data-action="previous">&lsaquo;</a>
    <input type="text" readonly="readonly" />
    <a href="#" class="next" data-action="next">&rsaquo;</a>
    <a href="#" class="last" data-action="last">&raquo;</a>
</div>

Add class "post-item" in the Item markup so it may start like that:

<div id="postItem_[POSTID]" class="post-item">

External scripts in the advanced tab:

http://www.YOURDOMAIN.com/portals/XX/Sliders/jqPagination/jquery.jqpagination.min.js,

http://www.YOURDOMAIN.com/portals/XX/Sliders/jqPagination/script.js

Similarly External styles:

http://www.YOURDOMAIN.com/portals/XX/Sliders/jqPagination/jqpagination.css

Note that you require to replace www.YOURDOMAIN.com with your real domain name and XX is your current portal id (refer to the step 2 above).

5) (Optional)Continue to complete other settings if you would like to.

6) Click "update" to save all the customizations.

That is all. And you will discover that your posts list have been organized with paging. Take a look at how it action.

To be extended

This is a basic sample and you can extend more customization based on it, for example, add friendly loading tooltip when page index changed or change layout & style of page navigation.

Limitations

There are limitations in this solution for paging. Due to the fact that it retrieves all the data in a time and builds paging in the client side so it will be recommended to configure reasonable total items(Related with option "Number of items to display" in the settings panel) and active cache in the module level. 

Another similar tutorials:

How to build an awesome content slider.

Turn Content Slider Widget into a jQuery Carousel