Feeds:
Posts
Comments

Archive for May, 2011

Portfolio Grid module can show portfolio items, images, logos or sponsors in an interactive grid. You can upload images along with the title, client and the link URL.
This module will show an interactive grid for your items. In default view, images will be shown using the opacity factor set in module settings. On moving mouse over an item, the image will be made brighten and item text info will be displayed.

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

View Live Demo

Step-1: Install Module

Once you have downloaded Portfolio Grid, 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 Portfolio Grid (DZ_PortfolioGrid) 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 “Portfolio Grid 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
Grid Width Specify the width for the grid
Grid Item Spacing Specify the spacing between grid items
Image Opacity Specify the image opacity for default view
Image Dimension Specify the width and height for the grid items.
Randomize Images Select this check-box, if you want a random image order on each page load.
Border Thickness Specify the image border for hover view
Border Color Choose the color of the image border for hover view
Hover Background Color Choose the color of the image background for hover view
Title Text Color Choose the color for the item title text
Client Text Color Choose the color for the item client text
Container HTML You can write your custom HTML. It can serve as wrapper around the grid. Use [DNN_PORTFOLIO_GRID] in a place where you want to show the actual grid.
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 Grid Items

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

Manage Grid Items

Manage Grid Items

Add Grid Item

Add Grid Item

Step-5: Grid View

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

Portfolio Grid Default View

Portfolio Grid Default View

Portfolio Grid Hover View

Portfolio Grid Hover View

Possible Issues and Quick Resolution

Grid 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 »

Special Image Slider is a nice module by DnnZone. It can be used to slide images using 23 unique transition effects. Special feature of this slider module is that you can also choose transition effect for each slide. Different styles of navigation bullets are also supported.

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

View Live Demo

Step-1: Install Module

Once you have downloaded Special 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 Special Image Slider (DZ_SpecialImageSlider) 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 “Special 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
Effects You have the option to select Slide Level, Random or a specific transition effects for your slider. Following unique transition effects can be selected:

  • Cube
  • Cube Random
  • Block
  • Cube Stop
  • Cube Hide
  • Cube Size
  • Horizontal
  • Show Bars
  • Show Bars Random
  • Tube
  • Fade
  • Fade Four
  • Paralell
  • Blind
  • Blind Height
  • Blind Width
  • Direction Top
  • Direction Bottom
  • Direction Right
  • Direction Left
  • Cube Stop Random
  • Cube Spread
  • Cube Jelly
Bullets Bullets style, choose from:

  • None
  • Circular Bullets
  • Numeric Bullets
  • Thumbnails
Navigation Arrows Show next/previous arrows
Caption Show image captions, if specified in image properties
Randomize Images Select this check-box, if you want a random image order on each page load.
Delay Time between slide transitions (milliseconds)
Image Dimension 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_SPECIAL_IMAGE_SLIDER] in a place where you want to show the actual slider.
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: 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 Special Image Slider in action.

Special Image Slider with 23 Effects

Special Image Slider with 23 Effects

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.

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 »

Unique Image Slider is another interactive & user friendly module developed by DnnZone. This is a sleek slider module for your images, galleries and banners. 21 unique transition effects are supported.

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

View Live Demo

Step-1: Install Module

Once you have downloaded Unique 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 Unique Image Slider (DZ_UniqueImageSlider) 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 “DZ_UniqueImageSlider 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
Effects You have the option to select All, Random or Mix mode effects for your slider. For Mix mode, you can choose multiple transition effects for your slider:

  • Clock
  • Diamond
  • Circle
  • Exit Stage Left
  • Exit Stage Right
  • Stretch Out
  • Shrink
  • Wipe
  • Blocks Diagonal In
  • Blinds
  • Fade
  • Fountain
  • Random Blocks
  • Random Slices Vertical
  • Random Slices Horizontal
  • Slice Fade
  • Slice Slide Vertical
  • Slice Slide Horizontal
  • Slide
  • Slide Over
  • Zipper
Delay Time between slide transitions (milliseconds)
Transition Speed Time taken by slide transitions (milliseconds)
Navigation Navigation (Next/Previous) style, choose from:

  • Do not display
  • Display on hover
  • Always display
Caption Caption style
Bullets Bullets style
Auto Play Start the transitions on page load.
Pause on Hover Pause transitions when mouse is inside the slider area
Randomize Images Select this check-box, if you want a random image order on each page load.
Image Dimension 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_UNIQUEIMAGE_SLIDER] in a place where you want to show the actual slider.
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: 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 Unique Image Slider in action.

Unique Image Slider

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

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.

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 »