Archive for November, 2012

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 »