Feeds:
Posts
Comments

Archive for August, 2011

A nice little module to compare two version of an image. This is kind of a before and after comparison of two images. Before and after images are sandwiched with one on top of the other, and it let the visitor drag a slider over images. Flash like effects are shown but only using jQuery and CSS.

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

View Live Demo

Step-1: Install Module

Once you have downloaded the module, 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_CompareImageView) 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 “Compare Image View 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
Images Dimension Specify the width x height of the before and after image. Both images should be of same dimension.
Alignment Select the horizontal alignment of this module in the pane.
Show Links whether or not to display links below the image that a visitor can click on that will automatically show the full before or full after image
Before Link Text Specify the text for before link
After Link Text Specify the text for after link
Animate Intro whether or not to have the drag bar start completely to the right of the container and gradually move by itself to the midpoint (default  false)
Intro Duration if animateIntro is true, the number of milliseconds it will take for the drag bar to go from the right side of the image to the middle of the image (default 1000)
Intro Delay if animateIntro is true, the number of milliseconds to wait before beginning the automatic drag bar move to the center of the image (default  1000)
Drag Bar Position Enter the value (fraction value between 0-1) to decide the initial position for drag bar
Before Tool-tip Specify the tool-tip for before image
After Tool-tip Specify the tool-tip for after image

Step-4: Manage Images

Now you are ready to add images to the slider. You can click the “Manage Content (Pencil Icon)” link on the newly added module. This will show you an edit interface, you can upload before & after images in this screen. This screen uses DNN standard file control, you can upload new images or select from existing images on the server.

Manage Images

Manage Images

Step-5: Module View

You are all set – now you can go back to the page where you added the module and now you can see this nice module in action. Module will be displayed according to the settings provided in the previous step.

Compare Image View

Compare Image View

Possible Issues and Quick Resolution

Slider not working:

Make sure jQuery 1.4+ 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 »

A new interactive slider module by DnnZone. It can show heading, sub-heading and description in each slide using thumbnail or slider view mode. In slider view an extra (optional) description field is displayed in nice scrolling area. Navigation arrows work according to the selected view.

This blog post will describe the simple steps on how to use Fancy Content Rotator module in DotNetNuke portals.

View Live Demo

Step-1: Install Module

Once you have downloaded Fancy Content Rotator, 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_FancyContentRotator) 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 “Fancy Content Rotator 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 Images Select this check-box, if you want a random image order on each page load.
Open Thumbnails Select this check-box, if you want to show thumbnails view on page load.
Auto Play Select this check-box, if you want to auto play the slider
Auto Play Delay Specify the delay between slides during auto play (milli-seconds)
Thumbnails Specify the number of thumbnails per set for thumbnails view
Dimensions Specify the width and height of the slider area
Border Specify the border thickness.

Step-4: Manage Images

Now you are ready to add images to the slider. You can click the “Manage Content (Pencil Icon)” link on the newly added module. This will show you image listing, you can upload images. You can specify heading, sub-heading, description, 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: Fancy Content Rotator View

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

Fancy Content Rotator - Thumbnails View

Fancy Content Rotator - Thumbnails View

Fancy Content Rotator - Slider View

Fancy Content Rotator - Slider View


Possible Issues and Quick Resolution

Slider not working:

Make sure jQuery 1.5+ 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.


Read Full Post »

DNN module that can be used to show set of images/banners with 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 Smooth Image Scroler module in DotNetNuke portals.

View Live Demo

Step-1: Install Module

Once you have downloaded Smooth Image Scroller, 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 Smooth Image Scroller (DZ_SmoothImageScroller) 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 “Smooth Image Scroller 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.

Include jQuerySelect this check-box, if jQuery is not already available in the portal

Setting Description
Scroll Step Determines how many pixels the scrollable area should move in each scrolling cycle
Scroll Interval Determines the elapsed time between each call to the autoscrolling function
Scroll Direction Select scroll direction:

  • Left to Right
  • Right to Left
Alignment Select horizontal alignment of scroller:

  • Left
  • Center
  • Right
Pause on Hover Select to pause scrolling effect when mouse is moved over the scrolling area
Scroller Dimensions Specify the width and height of the scroller
Randomize Images Select this check-box, if you want a random image order on each page load.

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 and order of display for images in this section. See following screens for reference.

Manage Images

Manage Images

Add Image

Add Image

Step-5: Smooth Image Scroller View

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

Smooth Image Scroller

Smooth Image Scroller


Possible Issues and Quick Resolution

Slider not working:

Make sure jQuery 1.4+ 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.


Credits:

This module is based on an open source jQuery Plugin “Smooth Div Scroll” by Thomas Kahn

Copyright © 2010 Thomas Kahn – thomas(at)karnhuset(dot)net

Read Full Post »

Scrolling Image Grid is a DotNetNuke module to show attractive and scrolling image grid. You can upload images and control the look and feel from module settings. This module will work on Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome and IE7+.

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

View Live Demo

Step-1: Install Module

Once you have downloaded Scrolling Image 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 Scrolling Image Grid (DZ_ScrollingImageGrid) 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_ScrollingImageGrid 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.

Include jQuerySelect this check-box, if jQuery is not already available in the portal

Setting Description
Animation Delay Specify the animation delay (mili-seconds)
Animation Speed Specify the animation speed (mili-seconds)
Rows Specify number of rows in the grid
Columns Specify number of columns in the grid
Item Dimensions  Specify the width and height of grid items
Randomize Images Select this check-box, if you want a random image order on each page load.
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 Grid Items (Pencil Icon)” link on the newly added module. This will show you image listing, you can upload images. You can specify caption and order of display for images in this section. See following screens for reference.

Manage Images

Manage Images

Add Image

Add Image

Step-5: Scrolling Image 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 Scrolling Image Grid in action.

Scrolling Image Grid

Scrolling Image Grid

Scrolling Image Grid - Image View

Scrolling Image Grid - Image View

Possible Issues and Quick Resolution

Slider not working:

Make sure jQuery 1.6+ 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.

Read Full Post »