Feeds:
Posts
Comments

Archive for October, 2010

Banner Scroll is a DNN module that can be used to show set of images/banners using a nice looking scrolling effect. This module will help you to make the banner section more interactive and will allow you to show multiple images in the space of one image. This module can also be used as a product show-case.

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

View Live Demo

Step-1: Install DNN Banner Scroll

Once you have downloaded DNN Banner Scroll, 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 DNN Banner Scroll to a Page

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

Add DNN Banner Scroll to Page

Add DNN Banner Scroll to Page

Step-3: DNN Banner Scroll Settings

After adding the DNN Banner Scroll, you can go to module settings page and scroll to bottom section “DNN_BannerScroll 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
Scroll Mode Specify the scrolling mode, possible values are: 

  • Loop
    • This is an infinite scroll mode
    • Images will be scrolled horizontally from right to left
    • First image will be repeated after the last one
  • Bounce
    • This is an alternate scroll mode
    • Scrolling direction will be altered after reaching the last image
Speed Number of pixels moved per frame
Frame Rate Number of movements/frames per second
Pause on Hover Only applicable to Loop scroll, if checked, scroller will stop on mouse over.
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 scroll area.
Container HTML You can write your custom HTML. It can serve as wrapper around the slider. 

Use [DNN_BANNER_SCROLL] in a place where you want to show the actual scroll area.

Step-4: Manage Images

Now you are ready to add images to the 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.

Image Listing

Image Listing

Add Image

Add Image

Step-5: DNN Banner Scroll View

You are all set – now you can go back to the page where you added DNN_BannerScroll and now you can see the scroll in action.

DNN Banner Scroll

DNN Banner Scroll

Possible Issues and Quick Resolution:

Scroll 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.

Read Full Post »

Image Slider is a DotNetNuke module that can be used to show a very nice looking slide show with unique 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.

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

View Live Demo

Step-1: Install DNN Image Slider

Once you have downloaded DNN 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 DNN Image Slider to a Page

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

Add DNN Image Slider to Page

Add DNN Image Slider to Page

Step-3: DNN Image Slider Settings

After adding the DNN Image Slider, you can go to module settings page and scroll to bottom section “DNN_ImageSlider 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
Effect Specify the transition effect, possible values are: 

  • All
  • Random
  • Rain
  • Straight
  • Swirl
Delay between images Delay between images in ms.
Show Navigation Show Prev, Next and Navigation buttons.
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.
Container HTML You can write your custom HTML. It can serve as wrapper around the slider. 

Use [DNN_IMAGE_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 “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.

Image Listing

Image Listing

Add Image

Add Image

Step-5: DNN Image Slider View

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

DNN Image Slider

DNN Image 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.

Read Full Post »

Simple and beautiful slideshow gallery. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.

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

View Live Demo

Step-1: Install DNN Image Gallery

Once you have downloaded DNN Image Gallery, 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 DNN Image Gallery to a Page

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

Add DNN Image Gallery to Page

Add DNN Image Gallery to Page

Step-3: DNN Image Gallery Settings

After adding the DNN Image Gallery, you can go to module settings page and scroll to bottom section “DNN_ImageGallery Settings”. This section contains settings for the DNN Image Gallery module. See following screen for setting details.

Module Settings

Module Settings

Following table describes the available settings.

Setting Description
Group Size Thumbnails in a Group – specify the number of thumbnails in the thumbnail view.
Image Interval Specify time (milliseconds) interval between images in play mode.
Frame Dimension Specify width and height of the display area.
Thumbnail Dimension Specify width and height of the thumbnails.
Theme Specify theme, available options: 

  • White
  • Black
  • Custom

For Custom, you will have to specify the color combination.

Randomize Images Select this check-box, if you a random image order.
Container HTML You can write your custom HTML. It can serve as wrapper around the gallery.
Use [DNN_IMAGE_GALLERY] in a place where you want to show the actual slider.

Step-4: Manage Images

Now you are ready to add images to the gallery. 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.

Image Listing

Image Listing

Add Image

Add Image

Step-5: DNN Image Gallery View

You are all set – now you can go back to the page where you added DNN_ImageGallery and now you can see the gallery in action.

DNN Image Gallery

DNN Image Gallery

Possible Issues and Quick Resolution:

Gallery 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.

Read Full Post »