Feeds:
Posts
Comments

Archive for January, 2011

jQuery Cycle Slider is another interactive & user friendly module developed by DnnZone. This is a sleek slider module for your images and banners. 26 unique transition effects are supported. Slider can be displayed using 4 pre-configured skins. More skins can be added on demand.

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

View Live Demo

Step-1: Install Module

Once you have downloaded DNN jQuery Cycle 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 jQuery Cycle Slider (DNN_jQueryCycleSlider) 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 “DNN jQuery Cycle Slider Settings”. This section contains settings specific to this module. See following screen for setting details.

Module Settings

Module Settings

 

More Settings

More Settings

Following table describes the available settings.

Setting Description
Skin Select the skin/template for the slider control: 

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: 

  • Blind X
  • Blind Y
  • Blind Z
  • Cover
  • Curtain X
  • Curtain Y
  • Fade
  • Fade Zoom
  • Grow X
  • Grow Y
  • Scroll Up
  • Scroll Down
  • Scroll Left
  • Scroll Right
  • Scroll Horizontal
  • Scroll Vertical
  • Slide X
  • Slide Y
  • Toss
  • Turn Up
  • Turn Down
  • Turn Left
  • Turn Right
  • Un-cover
  • Wipe
  • Zoom
Time Between Transitions Time between slide transitions (milliseconds)
Transition Speed Time taken by slide transitions (milliseconds)
Show Next Previous Show Next Previous buttons
Show Bullets Show navigation bullets
Show Captions Show image captions (if specified while uploading images)
Pause on Hover Pause transitions when mouse is inside the slider area
Stop on Last Slide Stop transitions on last slide
Randomize Images Select this check-box, if you want a random auto navigation order.
Slider Dimensions 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_CYCLE_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 jQuery Cycle Slider in action.

jQuery Cycle Slider

jQuery Cycle 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.

Credits:

This module is built using an open source slider plugin “jQuery Cycle Plugin”. This plugin is available at http://jquery.malsup.com/cycle/.

Advertisements

Read Full Post »

Basic Image Slider is a DotNetNuke module, it can be used to slide images using nice looking transition effects. Eleven unique transition effects are supported, special feature of this slider module is that you can choose transition effect for each slide.

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

View Live Demo

Step-1: Install Module

Once you have downloaded Basic 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 Basic Image Slider (DNN_BasicImageSlider) 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 “Basic 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 can also select effects in module settings. If you choose some effect here, it will override the slide level effects. Selected effect will be used for all slides. If you want to use slide level effects, please select “–Image Specific Effects–“. Following options are available in this drop-down: 

  • –Image Specific Effects–
  • Square Out Moving
  • Square Moving
  • Square Out
  • Square
  • Square Random
  • Bar Bottom
  • Bar Fade
  • Bar Fade Random
  • Bar Top
  • Fading
  • Row Interlaced
Image Dimensions Specify the width and height for the slider images.Please note, slider will not resize images, images should be of the same size.
Animation Speed Time taken by slide transitions (milliseconds)
Delay Time between slide transitions (milliseconds)
Show Next Previous Show Next Previous buttons
Show Bullets Show navigation bullets
Pause on Hover Select this check-box, if you want to pause the transition while mouse is moved inside the slider area.
Randomize Images Select this check-box, if you want a random image order on each page load.
Container HTML You can write your custom HTML. It can serve as wrapper around the slider. Use [DNN_BASIC_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 “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 slick image slider in action.

Nice Image Slider

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

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 »