Fancy Image Slider is a DotNetNuke module that can be used to show a very sleek slide show with 8 unique transition effects. You can upload images from Module edit section and specify the order of display. Optional Caption and URL can also be specified for each slide.
You can choose one of the following transition effects:
- Diagonal Blocks
- Winding Blocks
- Randomized Blocks
- Fading Curtain
- Fading Top Curtain
- Fullwidth Fade Slider
- Direction Fade Slider
- Droping Curtain
This blog post will describe the simple steps on how to use Fancy Image Slider module in DotNetNuke portals.
Step-1: Install Fancy Image Slider
Once you have downloaded Fancy 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 Fancy Image Slider to a Page
Once the module is installed, it will be available in the Module drop-down. You can add Fancy Image Slider (DNN_FancyImageSlider) to your desired pane.
Step-3: Fancy Image Slider Settings
After adding the Fancy Image Slider, you can go to module settings page and scroll to bottom section “DNN_FancyImageSlider Settings”. This section contains settings for the fancy image slider module. See following screen for setting details.
Following table describes the available settings.
Setting | Description |
---|---|
Transition | Specify the transition effect for images. Following options are available:
|
Image Size | Specify width height of displayed images. Make sure uploaded images are of same size and images do not get distorted on specified height. |
Block Size | Specify block size, image transition will contain blocks according to this height. |
Animation Speed | Specify animation speed. |
Delay | Specify delay between blocks. |
Navigation Control | Select this check-box, if you want selector at bottom of image. |
Container HTML | You can write your custom HTML. It can serve as wrapper around the slider. Use [FANCY_SLIDER] in a place where you want to show the actual slider. |
Include jQuery | DNN Fancy Slider requires jQuery 1.4.x or later version. If your DNN portal does not already contain jQuery, please turn this option on.For DNN 04.xx.xx, this should always be turned on. |
Step-4: Manage Images
Now you are ready to add images to fancy slider. You can click the “Add Content (Pencil Icon)” link on the newly added module. This will show you image listing, you can upload images. You can specify order of display for images in this section. See following screens for reference.
Step-5: Fancy Image Slider View
You are all set – now you can go back to the page where you added DNN_FancysImageSlider and now you can see the slider in action.
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.
where is the download link for
DotNetNuke Module: Fancy Image Slider
thanks