Feeds:
Posts
Comments

Archive for the ‘ASP.Net’ Category

A lightweight filterable image grid module with support of light-box gallery. This is a responsive module, the grid and gallery will adjust according to the screen size. 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 project and portfolio items.

This blog post will describe the simple steps on how to use Responsive Filterable Image Gallery module in DotNetNuke portals.

View Live Demo

If you or your client has worked in the field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. This module will help you to show the filterable portfolio items in an interactive and stylish way.

This module is also useful for photographers to show their work in style.

Step-1: Install Module

Once you have downloaded Responsive Filterable Image 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_ResponsiveFilterableImageGallery) to your desired pane.

Step-3: Module Settings

After adding the module, you can go to module settings page and scroll to bottom section “Image Gallery Settings”. This section contains settings specific to this module. See following screen for setting details.

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.
Image Width Specify the width for images. Images can be of different dimension but width would be same. The aspect ratio would be maintained.
Image Margin Specify the margin between grid items
Image Border Radius If you want to display radius border, you can specify thickness of the radius, specifying 0px will not display any radius.
Tag Position Select the position of tabs
Tags Color Choose color for tag text
Active Tag BG Choose background color for the selected tab
Active Tag Color Choose color for the selected tab
Gallery Theme Choose from list of available themes for the light-box gallery
Show Overlay Gallery Select this option to show thumbnails in the gallery view
No Filter on Gallery Select this option, if you want to always show all images in the gallery view. Not selecting this option will only show filtered images in the gallery view.
 Show Title  Select this option to show title in the gallery view
 Auto Play  Select this option to auto-play the gallery in the light-box view
 Auto Play Delay  Specify the time for auto-play in milliseconds

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 Images

Manage Images – Add New

Manage Images – Tags

Step-5: Responsive Filterable Image 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 Responsive Filterable Image Gallery in action.

Filterable Grid View

Gallery View

Read Full Post »

A nice looking portfolio/image grid with direction aware hover effect. Stylish direction aware hover effect is added using CSS3 and jQuery. The idea is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse. When we leave the element, the overlay will slide out to that direction, following the mouse. This will create an interesting-looking effect.

This blog post will describe the simple steps on how to use Portfolio Grid with Stylish Hover Effect module in DotNetNuke portals.

Note: Please note, this module requires jQuery 1.7 or higher, please make sure that either your portal has the latest version or you turn on the Include jQuery check-box from module settings page for the first module.

View Live Demo

Step-1: Install Module

Once you have purchased and downloaded this module from DotNetNuke Store, 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_StylishPortfolioGrid) to your desired pane.

Add Module to Page

Add Module to Page

Step-3: Module Settings

After adding the module, you can go to module settings page and scroll to bottom section “Stylish Portfolio Grid 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 grid view – if you want to make the grid view responsive, specify the width in percentage (e.g. 100%)
Item Size Specify the width x height for the images in the grid view
Spacing Specify the spacing between the items in grid view
Border Specify the border for the items in grid view
Border Color Select the border color for images in grid view
BG Color Select the background color for hover view
Text Color Select the text color for hover view
Text Margin Specify the margin for text in hover view
Gallery Theme Select the theme for gallery view:

  • Dark Rounded
  • Light Rounded
  • Dark Square
  • Light Square
  • Default
  • Facebook
Auto Play Select this check box, if you want to auto-play the gallery
Auto Play Delay Specify the delay between two images for auto play option

Step-4: Manage Grid Items

Now you are ready to add images to the grid. 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 tool-tip, hover text and link for each image in the portfolio grid. See following screens for reference.

Manage Grid Items

Manage Grid Items

Manage Grid Items - Add/Edit Item

Manage Grid Items – Add/Edit Item

Step-5: 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 Portfolio Grid with Stylish Hover Effect in action.

Grid View

Grid View

Grid View - Hover with Tooltip

Grid View – Hover with Tool-tip

Gallery View

Gallery View

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 »

In one of my previous posts, i described the mechanism to schedule a tasks in DotNetNuke.

DNN provides a user interface to create and manage scheduled tasks (a.k.a Schedule Items), you can access the schedule items by logging in as Host and navigating to Host -> Schedule. You can manage already created schedule items here and you can create new schedule items as well.

But, if you want to create a schedule item in code, following piece of code will help you.

Code: Create Schedule Item


private DotNetNuke.Services.Scheduling.ScheduleItem CreateScheduleItem(
    String friendlyName,
    String typeFullName,
    String objectDependencies,
    int timeLapse,
    String timeLapseMeasurement)
{
    DotNetNuke.Services.Scheduling.ScheduleItem objScheduleItem =
        new DotNetNuke.Services.Scheduling.ScheduleItem();
    objScheduleItem.FriendlyName = friendlyName;
    //ONLY Supported in 05.02.xx and above versions

    objScheduleItem.TypeFullName = typeFullName;
    objScheduleItem.TimeLapse = timeLapse;
    objScheduleItem.TimeLapseMeasurement = timeLapseMeasurement;
    objScheduleItem.RetryTimeLapse = 1;
    objScheduleItem.RetryTimeLapseMeasurement = "m";
    objScheduleItem.RetainHistoryNum = 100;
    objScheduleItem.AttachToEvent = "";
    objScheduleItem.CatchUpEnabled = false;
    objScheduleItem.Enabled = false;
    objScheduleItem.ObjectDependencies = objectDependencies;
    objScheduleItem.Servers = Null.NullString;
    return objScheduleItem;
}

Code: Add the Schedule Item to DotNetNuke


DotNetNuke.Services.Scheduling.ScheduleItem item =
CreateScheduleItem("Test Item", "TypeFullName", "", 10, "m");

int scheduleID =
DotNetNuke.Services.Scheduling.SchedulingProvider.Instance().AddSchedule(item);

Read Full Post »

DotNetNuke provides a robust framework for scheduled tasks. Some tasks are already scheduled by DotNetNuke installation and you can also add your own custom tasks to the DotNetNuke schedule.

DotNetNuke schedule is accessible from the Host -> Schedule screen. This screen lists all of the scheduled tasks also called schedule item. You can see status, history and properties of each schedule item.

You can find more details about DotNetNuke Scheduler in this PDF document.

You can find more details about creating a DotNetNuke schedule item in following posts:

The first step in creating a Schedule Item is to create a DotNet Assembly that will contain the logic to execute the scheduled task. Your class for task execution should inherit from DotNetNuke.Services.Scheduling.SchedulerClient. Once the Assembly is ready, you can create a new Schedule Item by going to Host -> Schedule -> Add Item to Schedule.

Read Full Post »

Fancy Image Menu is DotNetNuke module that can show images in an interactive grid. Once mouse is moved over an image in the grid, image will slide away and you can see the heading and description text.

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 tool-tips come into play. One of the simple way to show more info with an image is to show a default tool-tip. But if you want to do the same in a better way, you can give a try to Fancy Image Menu.
Fancy Image Menu can show images in an interactive grid. You can set width, height and number of grid columns for this module from the setting screen.
This blog post will describe the simple steps on how to use Fancy Image Menu module in DotNetNuke portals.

Step-1: Install DNN_FancyImageMenu

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

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

Add DNN_FancyImageMenu to Page

Add DNN_FancyImageMenu to Page

 

Step-3: DNN_FancyImageMenu Settings

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

Module Settings

Module Settings

Following table describes the available settings.

Setting Description
Dimension Specify the width and height for the images in the fancy image menu.
Columns Specify number of columns, enter 1 to show vertical menu.
Main Container HTML You can write your custom HTML. It can serve as wrapper around the menu.
Use [FANCY_MENU] in a place where you want to show the actual menu.

Step-4: DNN_FancyImageMenu Images

Now you are ready to add images to your menu. You can click the “Add Content” link on the newly added module. This will show you image listing, you can upload images. With each image, you can add its heading, 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_FancyImageMenu View

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

Fancy Image Menu

Fancy Image Menu

You can add multiple menus on a single page and each module will work with its own images and properties.

If you face any issue, you can send in an email at dnnzone@gmail.com

Read Full Post »

Nivo Slider for DNN is released today. In this post, i will describe how DNN_NivoSlider can be used in a DotNetNuke Portal.

Step-1: Purchase & Download DNN_NivoSlider

You can purchase and download a copy of DNN_NivoSlider on Snowcovered.

Step-2: Install DNN_NivoSlider

Once you have purchased DNN_NivoSlider, you will be able to download DotNetNuke module installer file “DNN_NivoSlider_01.00.00_Install.zip”. If you are not familiar with DotNetNuke module installation, please read following articles:

Step-3: Add DNN_NivoSlider to a Page

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

Add DNN_NivoSlider to Page

Step-4: DNN_NivoSlider Settings

After adding the DNN_NivoSlider, you can go to module settings page and scroll to bottom section “DNN_NivoSlider Settings”. This section contains settings for Nivo Slider control. See following screen for setting details.

Module Settings

Following table describes the available settings.

Setting Description
Effect You can choose a effect from drop-down. By default random effects are applied.
Slices This setting defines the number of slices of each image for slide transitions.
Animation Speed This defines the animation speed for slide transitions.
Pause Time Time between each slide transition.
Starting Slide Starting slide index – this is zero based index.
Caption Opacity Opacity for the caption area.
Navigation Sow left-right navigation arrows
Hide Navigation Only show navigation when mouse is inside the slider area.
Control Navigation Show navigation control – this will display a dot for each slide.
Keyboard Navigation Allow keyboard navigation.
Stop Animation on Hover Stop slide transition on mouse hover
Container HTML You can write your custom HTML. It can serve as wrapper around the slider.
Use [NIVO_SLIDER] in a place where you want to show the actual slider.

Step-5: DNN_NivoSlider Images

Now you are ready to add images to your slider. You can click the “Add Content” link on the newly added module. This will show you image listing, you can upload images. With each image, you can add its caption and link, please note both the caption and link are optional attributes. You can also change order of images in this section. See following screens for reference.

DNN_NivoSlider - Image Listing

DNN_NivoSlider - Add Image

Step-6: DNN_NivoSlider Slide Show

You are all set – now you can go back to the page where you added the DNN_NivoSlider and see the slider in action. You can play with the slider properties and container html to meet your needs.

DNN_NivoSlider - Slide Show with Caption

DNN_NivoSlider - Slide Show

You can add multiple sliders on a single page and each slider will work with its own images and properties.

If you face any issue, you can send in an email at dnnzone@gmail.com

Credits:

Most Awesome jQuery Image Slider Nivo Slider is a product of dev7studios.

Read Full Post »

Older Posts »