Feeds:
Posts
Comments

Archive for December, 2010

AmazingSlider is a DotNetNuke module build for sliding images in a nice style. Multiple unique effects and nine pre-configured skins are supported.

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

View Live Demo

Step-1: Install Module

Once you have downloaded DNN Amazing Slider, 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 DNN Amazing Slider (DNN_AmazingSlider) 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 “DNN Amazing Slider 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
Skin Select the skin/template for the slider control: 

Effects You can choose one of the following transition effect for your slider: 

  • Horizontal Slide
  • Random Squares
  • Blinds
  • Fade
  • Slices
  • Fly Out
  • Blast
  • Ken Burns (View Demo)
Animation Speed Time taken by slide transitions (milliseconds)
Delay Time between slide transitions (milliseconds)
Auto Play Auto-Start transitions on slider load
Show Captions Show image captions (if specified while uploading images)
Show Next Previous Show Next Previous buttons
Show Bullets Show navigation bullets
Randomize Images Select this check-box, if you want a random image order on each page load.
Slider Dimensions Specify the width and height for the slider area.Please note, slider will not resize images, images should be of the same size.
Container HTML You can write your custom HTML. It can serve as wrapper around the slider. Use [DNN_AMAZING_SLIDER] in a place where you want to show the actual slider.

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: Image Slider View

You are all set – now you can go back to the page where you added the module and now you can see the slick image slider in action.

Nice Image Slider

DNN Amazing Slider

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.

Images are not displayed well inside slider:

Please make sure all images added to the slider are of the same size. Please use the same dimensions in module settings.

Read Full Post »

NiceImageSlider is a DotNetNuke module build on a standalone Java-script library for sliding images. Multiple unique effects are supported and special feature is that these effects can be combined together.

This blog post will describe the simple steps on how to use DNN Nice Image Slider module in DotNetNuke portals.

View Live Demo

Step-1: Install Module

Once you have downloaded DNN Nice Image Slider, 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 DNN Nice Image Slider (DNN_NiceImageSlider) 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 “Nice Image Slider 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
Transition Effects Select the transition effects from following options: 

  • All
  • Random
    • Mix
    • Blinds
    • Rain
    • Stairs
    • StraightStairs
    • Fade
    • TopDown
    • BottomUp
    • RightLeft
    • LeftRight
    • RandomBlocks
    • BigRandomBlocks
    • Swirl
    • ReverseSwirl
    • DropCurtain
    • HorizontalCurtain
    • RandomChess
    • DropingChess
    • StraightChess
    • TopRightSnake
    • TopBottomSnake
    • BottomUpSnake
Time Between Transitions Time between slide transition (milliseconds)
Show Next Previous Show next/previous buttons on hover
Show Navigation Bullets Show navigation bullets
Randomize Images Select this check-box, if you want a random image order on each page load.
Slider Dimensions Specify the width and height for the slider area.

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: DNN Nice Image Slider View

You are all set – now you can go back to the page where you added the module and now you can see the slick image slider in action.

Nice Image Slider

Nice Image Slider

Read Full Post »