Feeds:
Posts
Comments

Posts Tagged ‘DotNetNuke’

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

Advertisements

Read Full Post »

A jQuery based DNN module that will create a booklet-like component that let’s you navigate through its items by flipping the pages.

A jQuery based DNN module that will create a booklet-like component that let’s you navigate through its items by flipping the pages.

You can add images to this module and it will display images with flip-book transitions. Light-box gallery support is also available with this module.

View Live Demo

Step-1: Install Module

Once you have downloaded Image Slider with Flip Book Navigation, 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_ImageFlipBook) 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 Flip Book 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.
Flip Orientation Choose between vertical and horizontal flip transition
Circular Select this check-box to move back to first slide after the last one
Auto Play Select this check-box to start auto-play on page load
Auto Play Delay Specify the time (milliseconds) for auto-play
Image Dimension Specify the width and height for the slider area

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 Image

Add Image

Step-5: Image Slider with Flip Book Navigation 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 Slider with Flip Book Navigation in action.

Image Slider View

Flip Book Transition

Flip Book Transition

Read Full Post »

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

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 »

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 »

This is a neat light-box effect using only CSS. The idea is to have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, we can make the large image appear in a fancy way.

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

View Live Demo

Step-1: Install Module

Once you have downloaded Image Gallery with CSS3 Light-box, 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_GalleryWithCSS3Lightbox) 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 “Gallery with CSS3 Lightbox 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.
Show Next/Previous  Select to show next and previous buttons in the light-box view.
Container Width Specify the width for the gallery view – if you want to make the gallery view responsive, specify the width in percentage (e.g. 100%)
Transition Select the transition effect for light-box and navigation. Following transitions are supported:

  1. Zoom In
  2. Zoom Out
  3. Fade
Thumbnail Size Specify the width x height for the thumbnails to be shown in module view
Border Size Specify the border thickness for the thumbnails
Border Radius Specify the border radius for thumbnails
Background Color Choose the background color for thumbnail border – the same color will be used in the light-box view with opacity.

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 Items

Add Grid Item

Add Grid Image

Step-5: Image Gallery with CSS3 Light-box 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 Gallery with CSS3 Light-box in action.

Thumbnail Grid View

Thumbnail Grid View

Light-box View

Light-box View

Light-box View - Notes

Light-box View – Notes

Read Full Post »

Stylish Image Wall module can show images, logos or sponsors in an interactive grid. You can upload images along with the heading, description and the link URL.

Instead of showing images, logos or sponsors in a simple grid, this module will show them in an interactive grid. Once mouse is moved over an image in the grid, image view will be flipped using different styles and description view will be shown.

This module relies on CSS3 – full transition & rotation effects can only be seen on modern browsers with CSS 3 support.

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

View Live Demo

Step-1: Install Module

Once you have downloaded Stylish Image Wall, 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_StylishImageWall) 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 “Stylish Image Wall 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 Items Select this check-box, if you want a random image order on each page load.
Logos Area Width Specify the width for the logos area
Dimensions Specify the width and height of the grid items
Alignment Choose the alignment for the grid in the container

Step-4: Manage Images

Now you are ready to add images to the slider. You can click the “Manage Items (Pencil Icon)” link on the newly added module. This will show you image listing, you can upload images. You can specify title, background color for hover effect and the URL. See following screens for reference.

Manage Items

Manage Items

Add Grid Item

Add Grid Image

Step-5: Stylish Image Wall View

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

Stylish Image Wall

Stylish Image Wall

Read Full Post »

Older Posts »