Feeds:
Posts
Comments

Archive for the ‘Javascript’ Category

Show your team in a stylish team showcase module using 9 available styles. We will be adding more styles in future and you will get free updates. This is a light-weight module that only rely on CSS and HTML, no java-script is used.

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

View Live Demo

Show your team in a stylish team showcase module using 9 available styles. We will be adding more styles in future and you will get free updates. This is a light-weight module that only rely on CSS and HTML, no java-script is used.

This module is responsive and you can choose the responsive settings for Desktop, Tablet and Mobile views.
For each team-member, you can specify Name, Position/Title, Phone Number, Short Intro and Social Media links. You can also provide a link to profile on the site if you are maintaining a detail page of the team member.

You can define team member’s data once and then re-use it on different modules.

Step-1: Install Module

Once you have downloaded Stylish Team Showcase, 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_TeamShowcase) to your desired pane.

Step-3: Module Settings

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

Following table describes the available settings.

 

Setting Description
Randomize Team Members Select this check-box, if you want a random order of team members on each page load.
Include Bootstrap Select this check-box, if bootstrap is not included of DNN Skin
Include Font Awesome Select this check-box, if font awesome is not included in DNN Skin
Desktop Columns Number of columns on Desktop browsers
Tablet Columns Number of columns on Tablets
Mobile Columns Number of columns on Mobiles
Team Datasource In case of we want to re-use team members defined in one module on different places.
Team Showcase Style Choose a style for Team Showcase:

  • Basic Team Showcase
  • Basic Light Mode
  • Jump
  • Jump Out
  • Hover
  • Focus
  • Focus 2
  • White Diamond
  • Circle

Step-4: Manage Team

Now you are ready to add team members. You can click the “Manage Team (Pencil Icon)” link on the newly added module. This will show you team members listing, you can add/edit team members here.

Manage Team

Manage Team – Add New

Step-5: Stylish Team Showcase

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

Stylish Team Showcase

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 »

While designing a skin for CATALook (eCommerce Module for DotNetNuke), there was a scenario where product additional images were shown in the product details page. CATALook displays some default images as thumbnails, clicking the default image opens actual image in light box.

Default Product Thumbnails

Default Product Thumbnails

Now if we want to replace the default thumbnail with actual thumbnail, CATALooK does not provide support for this. To achieve this, i edited the CATALooK skin to add ID to parent TD where the product image thumbnails control was added. You can search for the text <cat:MEDIAMENU id=”MEDIAMENU2″ Runat=”server”> in /DesktopModules/CATALooKStore/Skins/SKIN_FOLDER/ItemPane.ascx. Now we can use this ID in Java-script to replace the default image with actual product image. Following is the screenshot after adding the ID and Java-script.

Actual Product Thumbnails

Actual Product Thumbnails

Sample Java-script method can be downloaded here.
jQuery version can be downloaded here.

Read Full Post »