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 <ul> 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 </ul> here.
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.