Feeds:
Posts
Comments

Archive for September, 2011

Nice looking image slider module by DnnZone. It is not just another slider but a slider with support for touch devices. This slider recognizes the Swipe Touch event – so this can be use on modern touch devices including: iPhone, iPad and Android Devices.

Its a nice looking image slider module by DnnZone. It is not just another slider but it is a slider with support for touch devices. This slider recognizes the Swipe Touch event – so this can be use on modern touch devices including:

  • iPhone
  • iPad
  • Android Devices

Simple horizontal slide transition is supported with easing effects.

This module is built using HTML, CSS and Java-script only. No Flash is used.

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

View Live Demo

Step-1: Install Module

Once you have downloaded Swipe to Slide, 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_SwipeToSlide) to your desired pane.

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 “Swipe to Slide Settings”. This section contains settings specific to this module. See following screen for setting details.

Module Settings

Module Settings

You can customize the settings for this module, including:

  • Dimensions
    • Width
    • Height
  • Alignment
    • Left
    • Center
    • Right
  • Auto Play
    • Auto Play Duration
    • Pause on Hover
  • Show Next/Previous
    • Show on Hover
    • Show on Last Sider
  • Bullets Position
    • Top
    • Bottom
  • Transition Speed
  • Easing Effect
  • Randomize Items

Step-4: Manage Images

Now you are ready to add images to the slider. 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, background color for hover effect and the URL. See following screens for reference.

Manage Items

Manage Items

Add New Image

Add New Image

Step-5: 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 Swipe to Slide in action.

Swipe to Slide - Nice Slider with support for iPhone, iPad & Android

Swipe to Slide - Nice Slider with support for iPhone, iPad & Android

Read Full Post »

This DotNetNuke module can show sponsors, portfolio items, images or logos in a nice looking grid. You can upload images along with the title, background color and the link URL. On moving mouse over an item, the image area will be swapped with background color with title and link.

This blog post will describe the simple steps on how to use Sponsors/Logo Wall module in DotNetNuke portals.

View Live Demo

Step-1: Install Module

Once you have downloaded Sponsors/Logo Wall, 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_SponsorsWall) to your desired pane.

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 “Sponsors Wall 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
Randomize Items Select this check-box, if you want a random image order on each page load.
Logos Area Width Specify the width for the logos area
Dimensions Specify the width and height of the grid items
Alignment Choose the alignment for the grid in the container

Step-4: Manage Images

Now you are ready to add images to the slider. 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, background color for hover effect and the URL. See following screens for reference.

Manage Items

Manage Items

Add Grid Item

Add Grid Image

Step-5: Sponsors/Logo Wall View

You are all set – now you can go back to the page where you added the module and now you can see the Sponsors/Logo Wall in action.

Sponsors/Logo Wall - Normal Grid View

Sponsors/Logo Wall - Normal Grid View

Sponsors/Logo Wall - Hover View

Sponsors/Logo Wall - Hover View

Read Full Post »