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. Take a look at how the navigable content slideshow actions – demo link.
First make sure there exists a Content Slider Widget in your dnn page and this widget works well with your configuration. Also confirm that you have set a thumbnail for every posts rendered in the list with custom fields feature. In order to make your slider more awesome, recommend that those thumbnail need to the same size in height and width. You can refer to the tutorial [Extend DNN Blog With Custom Fields] for more details about how to utilize custom fields for your blog posts. Later we will turn it into a real content slider by integrating it with Coin Slider Plugin.
Preparation:
1) Create a folder on your DNN site that will hold the files for this slider resources. You do this from the Admin / File Manager option on your site. For my example I created a folder named "coin-slider" immediately inside the Root folder.
2) Download the Coin Slider files [here] and unzip this package in you local machine.
Note: The package is from Coin-Slider website but I have modified it to work better with SunBlogNuke and attach some customized styles in the file 'coin-slider-styles.css'. If you would like to adjust the styles and make it consistent with your page, please edit it.
3) Upload all resource files to your customized folder "coin-slider" from the Admin / File Manager panel.
4) Include a reference to jQuery in the current page. You can enable it in the Host Settings for whole website if your dnn version is above 5.x. If you don’t want to active it for all the pages, I recommend that you can attach it in the step 2) of configuration part.
Note that you can complete the step 1) and 3) with ftp. Both ways work and just make sure that those required resources have been hosted in your website.
Configuration:
1) Enter the 'Widget Settings' of Content Slider Widget.
2) Fill in the external utility scripts and it should formatted as http://yourdomain.com/portals/XX/coin-slider/coin-slider.min.js (If there are more than one external scripts, please separated with commas.). As we mentioned above you can include jQuery reference here if necessary.
Note that change “yourdomain.com” to your actual domain name, and change "XX" to the id of the portal for your current DNN site. For example, if our domain was demo.sunblognuke.com and the portal id was "2", the line would look like this: http://demo.sunblognuke.com/portals/2/coin-slider/coin-slider.min.js.
3) Fill in the external utility styles and it should formatted as http://yourdomain.com/portals/XX/coin-slider/coin-slider-styles.css (If there are more than one external styles, please separated with commas.).
Note that change “yourdomain.com” to your actual domain name, and change "XX" to the id of the portal for your current DNN site. For example, if our domain was demo.sunblognuke.com and the portal id was "2", the line would look like this: http://demo.sunblognuke.com/portals/2/coin-slider/coin-slider-styles.css.
4) In the "Header markup" text area, enter the following code:
<div id="gamesHolder">
It just appends the div container that will wrap all the posts.
5) In the "Item Template" text area, enter the following code:
<a id="postItem_[POSTID]" href="[TARGET]" target="_blank">
{block:customfield:thumbnail}
<img src="[customfield:thumbnail]" title="[TITLE]" alt="post thumbnail"/>
{/block:customfield:thumbnail}
<span><b>[TITLE]</b><br />[EXCERPTTEXT]</span>
</a>
It will wrap every post with some basic fields - thumbnail, title and excerpt text. Note that {block:customfield:thumbnail} checks out whether the custom field [thumbnail] exist for the post, if not the wrapped html tag will not show here.
6) In the "Footer markup" text area, enter the following code:
</div>
<script type="text/javascript" language="javascript">
jQuery(document).ready(function() {
jQuery('#gamesHolder').coinslider({ hoverPause: false });
});
</script>
It closes out the div that was started in the "Header markup" area with the initialize function for registering the slider when document is ready. For more detail and options on the slider, check out the Coin-Slider website.
7) Click 'Upadte' to save all the modifies and the slideshow will work like a charm.
Actually there are LOTS of similar slider scripts you can integrate the Content Slider Widget with, such as
Please feel free to leave questions or comments.
PS: updated with SunBlogNuke v4.4.