Feeds:
Posts
Comments

Archive for June, 2011

Fancy Slide Sow is a jQuery based image gallery and slide show for DotNetNuke portals. It allows to create outstanding sliding image slide show. Look and feel of this slide show was inspired by BlackBerry’s PlayBook.

This blog post will describe the simple steps on how to use Fancy Slide Show module in DotNetNuke portals.

View Live Demo

Step-1: Install Module

Once you have downloaded Fancy Slide Show, you can install it in your portal by logging in as Host and going to Host -> Module Definitions -> Install Module. If you are not familiar with DotNetNuke module installation, please read following articles:

Step-2: Add Module to a Page

Once the module is installed, it will be available in the Module drop-down. You can add Fancy Slide Show (DZ_FancySlideShow) to your desired pane.

Add Module to a Page

Add Module to a Page

Step-3: Module Settings

After adding the module, you can go to module settings page and scroll to bottom section “Fancy Slide Show Settings”. This section contains settings specific to this module. See following screen for setting details.

Module Settings

Module Settings

Following table describes the available settings.

Setting Description
Auto Play Duration Specify the duration (in seconds) for auto play. Enter 0, if you don’t want auto play.
Transition Speed Specify the transition speed in milliseconds.
Dimensions Specify the width and height for the slider area. Please note, slider will not resize images, images should be of the same size.
Navigation Arrows Choose to show/hide the next previous arrows.
Randomize Images Select this check-box, if you want a random image order on each page load.
Border Thickness Specify the border thickness around the slide show container.
Border Color Choose the border color
Background Color Choose the slide show background color
Container HTML You can write your custom HTML. It can serve as wrapper around the slider. Use [DNN_FANCY_SLIDESHOW] in a place where you want to show the actual slide show.
Include jQuery Select this check-box, if jQuery is not already available in the portal
Resolve jQuery Conflict Select this check-box, if you are also using other java-script frameworks.

Step-4: Manage Images

Now you are ready to add images to the slider. You can click the “Manage Images (Pencil Icon)” link on the newly added module. This will show you image listing, you can upload images. You can specify caption, link and order of display for images in this section. See following screens for reference.

Manage Images

Manage Images

Add Image

Add Image

Step-5: Slide Show View

You are all set – now you can go back to the page where you added the module and now you can see the Fancy Slide Show in action.

Fancy Slide Show

Fancy Slide Show

Possible Issues and Quick Resolution

Slider not working:

Make sure jQuery 1.4.x or later is available in your DNN portal. If you are not sure, turn on the check-box “Include jQuery” from module setting page.

Conflict with other java-script frame-works:

This module relies on jQuery, if your portal is also using other java-script frameworks (like moo-tools or prototype etc.), you should select the check box “Resolve Conflict” in module settings.

On DNN 04.xx.xx, please always select the “Resolve Conflict” settings.

Advertisements

Read Full Post »

Fancy Site Map is a small utility module for DotNetNuke portals to show site map in a nice visual way. This module will display the site map in the form of click-able nodes. Menu items will be displayed according to user rights.

This blog post will describe the simple steps on how to use FancySiteMap module in DotNetNuke portals.

View Live Demo

Step-1: Install Module

Once you have downloaded this module, you can install it in your portal by logging in as Host and going to Host -> Module Definitions -> Install Module. If you are not familiar with DotNetNuke module installation, please read following articles:

Step-2: Add Module to a Page

Once the module is installed, it will be available in the Module drop-down. You can add this module (DZ_FancySiteMap) to your desired pane.

Add Module to a Page

Add Module to a Page

Step-3: Module Settings (Optional)

This module comes with some default settings. To override the default values, you can go to module settings page and scroll to bottom section “FancySiteMap Settings”. This section contains settings specific to this module. See following screen for setting details.

Module Settings

Module Settings

Following table describes the available settings.

Setting Description
Columns Select the number of columns for the site map module. Nodes will be adjusted according to this setting.
Show Hidden Pages Choose this setting, if you want to show hidden pages (hidden from menu) into Site Map.
Open Links in New Window Choose this setting, if you want to open site map links into new window.

Step-4: View Site Map

You are all set – now you can go back to the page where you added the module and now you can see the Fancy Site Map in action.

Fancy Visual SiteMap for DotNetNuke

Fancy Visual SiteMap for DotNetNuke

Read Full Post »