Feeds:
Posts
Comments

Archive for September, 2010

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

You can choose one of the following transition effects:

  • Diagonal Blocks
  • Winding Blocks
  • Randomized Blocks
  • Fading Curtain
  • Fading Top Curtain
  • Fullwidth Fade Slider
  • Direction Fade Slider
  • Droping Curtain

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

View Live Demo

Step-1: Install Fancy Image Slider

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

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

Add Fancy Image Slider to Page

Add Fancy Image Slider to Page

Step-3: Fancy Image Slider Settings

After adding the Fancy Image Slider, you can go to module settings page and scroll to bottom section “DNN_FancyImageSlider Settings”. This section contains settings for the fancy image slider module. See following screen for setting details.

Module Settings

Module Settings

Following table describes the available settings.

Setting Description
Transition Specify the transition effect for images. Following options are available: 

  • Diagonal Blocks
  • Winding Blocks
  • Randomized Blocks
  • Fading Curtain
  • Fading Top Curtain
  • Fullwidth Fade Slider
  • Direction Fade Slider
  • Droping Curtain
Image Size Specify width height of displayed images. Make sure uploaded images are of same size and images do not get distorted on specified height.
Block Size Specify block size, image transition will contain blocks according to this height.
Animation Speed Specify animation speed.
Delay Specify delay between blocks.
Navigation Control Select this check-box, if you want selector at bottom of image.
Container HTML You can write your custom HTML. It can serve as wrapper around the slider.
Use [FANCY_SLIDER] in a place where you want to show the actual slider.
Include jQuery DNN Fancy Slider requires jQuery 1.4.x or later version. If your DNN portal does not already contain jQuery, please turn this option on.For DNN 04.xx.xx, this should always be turned on.

Step-4: Manage Images

Now you are ready to add images to fancy 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: Fancy Image Slider View

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

Fancy Image Slider

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

Cross Image Slider is a DotNetNuke module that can be used to show images in a very sleek and fading slider with Ken Burns effects. You can upload images from Module edit section and specify the order of display. This module will show these images in as a Cross Image Slider. You can specify different settings of the module, different effects are supported including Fade, Ken Burns and Up-Down (Vertical Scroll).

This module will display uploaded images as Cross Image Slider. Type of  image transition/effects can be controlled from module setting page.

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

View Live Demo

Step-1: Install Cross Image Slider

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

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

Add Cross Image Slider to Page

Add Cross Image Slider to Page

Step-3: Cross Image Slider Settings

After adding the Cross Image Slider, you can go to module settings page and scroll to bottom section “DNN_CrossImageSlider Settings”. This section contains settings for the cross image slider module. See following screen for setting details.

Module Settings

Module Settings

Following table describes the available settings.

Setting Description
Effect Specify the transition effect for images. Following options are available: 

  • Fade
  • Ken Burns
  • Up
  • Down
  • Up-Down
Fading Factor Specify fading factor. This is the duration in seconds of each cross-fade animation between images.
Speed Specify speed for Up, Down and Up-Down effects. This options is expressed in pixels/second.
Sleep Specify time in seconds for Fade effect. This is the time in seconds which every image will take on its own before fading to next image. This is only required for Fade effect.
Width Specify width for image canvas. You can specify any width which is less than or equal to the width of the actual images. If less width is set, only specified portion of image will be displayed.
Height Specify height for image canvas.Height is very important property. Slider may not work, if height is not according to following: 

  • For Up, Down Effects: Height should be less than half of the actual image height.
  • For Fade and Ken Burns Effects: Height should be less than or equal to the actual image height.
Container HTML You can write your custom HTML. It can serve as wrapper around the slider.
Use [CROSS_IMAGE_SLIDER] in a place where you want to show the actual slider.
Include jQuery DNN Cross Slider requires jQuery 1.4.x or later version. If your DNN portal does not already contain jQuery, please turn this option on.For DNN 04.xx.xx, this should always be turned on.

Step-4: Manage Images

Now you are ready to add images to cross 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: Cross Image Slider View

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

Cross Image Slider

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

Slider not displayed, still showing the loading animation:

This can be due to incorrect height value. Please note, height should be according to following specifications:

  • For Up, Down Effects: Height should be less than half of the actual image height.
  • For Fade and Ken Burns Effects: Height should be less than or equal to the actual image height.

Slider Alignment:

You can control the alignment of the slider in a pane by writing some custom HTML in the module setting page. By default the slider is displayed in the center of the pane.

Credits: CrossSlide is an Open Source jQuery Plugin, developed by Tobia. This plugin is released under “GNU GENERAL PUBLIC ” License – You can find more about CrossSlider at http://tobia.github.com/CrossSlide/

Read Full Post »

CrossSlide

CrossSlide is a jQuery plugin implemented in 2kB of Java-script code. Some common slide-show animations, traditionally only available via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself (that is, a lot!)

You can read more at http://tobia.github.com/CrossSlide/

Read Full Post »

Image Flip Wall is a DotNetNuke module that can be used to show images, logos or sponsors in an interactive grid. You can upload images along with the description and the link URL. This module will show these images in an interactive grid. Once an image in the grid is clicked, image view will be flipped and description view will be shown.

It is an old saying that A picture is worth a thousand words, but sometimes we expect more from images on the web . This is the time when default or custom tooltips come into play. One of the simple way to show more info with an image is to show a default tooltip. And if you want to do the same in a better way, you can give a try to interactive Image Flip Wall module.
This module can show images in an interactive grid instead of a simple grid. Once an image in the grid is clicked, image view will be flipped to descriptive view. Clicking the descreptive view will take you back to image view.
This blog post will describe the simple steps on how to use Image Flip Wall module in DotNetNuke portals.
Step-1: Install DNN_ImageFlipWall

Once you have downloaded DNN_ImageFlipWall, 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_ImageFlipWall to a Page

Once the module is installed, it will be available in the Module drop-down. You can add DNN_ImageFlipWall to your desired pane.

Add DNN_ImageFlipWall to Page

Add DNN_ImageFlipWall to Page

 

Step-3: DNN_ImageFlipWall Settings

After adding the DNN_ImageFlipWall, you can go to module settings page and scroll to bottom section “DNN_ImageFlipWall Settings”. This section contains settings for the flip wall module. See following screen for setting details.

Module Settings

Module Settings

Following table describes the available settings.

Setting Description
Width Specify width for image on the flip wall.
Height Specify height for image on the flip wall.
Spacing Specify spacing between images on the flip wall.
Main Container HTML You can write your custom HTML. It can serve as wrapper around the wall.
Use [FLIP_WALL] in a place where you want to show the actual grid.

Step-4: DNN_ImageFlipWall Images

Now you are ready to add images to your wall. You can click the “Add Content (Pencil Icon)” link on the newly added module. This will show you image listing, you can upload images. With each image, you can add its description and link. You can also change order of images in this section. See following screens for reference.

Image Listing

Image Listing

Add Image

Add Image

Step-5: DNN_ImageFlipWall View

You are all set – now you can go back to the page where you added DNN_ImageFlipWall and see the interactive image grid in action.

Fancy Image Menu

Image Flip Wall

Credits: http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/

Read Full Post »