Feeds:
Posts
Comments

Archive for February, 2013

This is a continuous jQuery based image carousel. This simple to use module will help you to add auto rotating images, logos, portfolios on your DotNetNuke portals.

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

View Live Demo

Step-1: Install Module

Once you have downloaded Image Carousel for DotNetNuke, 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_ImageCarousel) to your desired pane.

Add Module to a DotNetNuke Page

Add Module to a DotNetNuke Page

Step-3: Module Settings

After adding the module, you can go to module settings page and scroll to bottom section “Image Carousel 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.
Navigation Arrows Select to show navigation arrows
Auto Play Select to auto play the carousel items on page load
Auto Play Interval Specify the auto play interval in milli-seconds
Auto Play Speed Specify the auto play speed in milli-seconds
Auto Play Direction Select the auto play direction
Rotation Mode Select the rotation mode for carousel items
Carousel Type Select the orientation of the carousel
Carousel Step Specify number of items to move on each carousel step
Item Dimension Specify the width x height for each carousel item. All items added to carousel should be of same width and height
Visible Items Specify number of items that will be visible at one point in time
Margin Specify the spacing between the grid items

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 slide title, tag line and description for each image. See following screens for reference.

Manage Items

Manage Images

Add Carousel Item

Add Carousel Item

Step-5: Image Carousel for DotNetNuke View

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

Carousel with Single Image

Carousel with Single Image

Carousel with 6 Items - Scrolling Logos

Carousel with 6 Items – Scrolling Logos

Advertisements

Read Full Post »

A lightweight image grid module with support of modal light-box window which uses only CSS3 for silky-smooth animations and transitions. Image grid is loaded using stylish flip transition. Clicking any image in the grid will show the full version of image in a light-box gallery with thumbnails and navigation support. You can use this module to showcase your large set of images.

This blog post will describe the simple steps on how to use Image Grid with Stylish Light-box Gallery module in DotNetNuke portals.

View Live Demo

Step-1: Install Module

Once you have downloaded Image Grid with Stylish Light-box Gallery, 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_ImageGridWithLightBox) to your desired pane.

Add Module to a DotNetNuke Page

Add Module to a DotNetNuke Page

Step-3: Module Settings

After adding the module, you can go to module settings page and scroll to bottom section “Image Grid with Light-Box 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.
Container Width Specify the width for the main grid container
Thumbnail Dimension Specify the width and height for each thumbnail image
Margin Specify the spacing between the grid items
Hover Zoom Scale Specify the zoom scale when mouse is moved over thumbnails

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 slide title, tag line and description for each image. See following screens for reference.

Manage Items

Add Grid Item

Add Grid Image

Step-5: Image Grid with Stylish Light-box Gallery View

You are all set – now you can go back to the page where you added the module and now you can see the Image Grid with Stylish Light-box Gallery in action.

Thumbnail Grid View

Thumbnail Grid View

Thumbnail Grid View - On Image Hover

Thumbnail Grid View – On Image Hover

Light-box View

Light-box View

Read Full Post »