If you face any issue in accessing the demo of the module, please contact us at [email protected]. Thanks. All DnnZone's Modules are supported on DNN 4, 5, 6, & 7 platforms. We have revised our upgrade policy - you will get life time free upgrades for all of our modules. For demo/trial versions of our products, please contact us at [email protected] At DnnZone, we also provide custom development services for your needs. We will try to provide quality services at better rates. You can contact us at [email protected]

Gallery with CSS3 Light-box is a DNN module for creating a nice looking light-box image gallery using CSS features only.

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. The thumbnail and light-box view are responsive and get adjusted with the available space. This new version supports transition effects for light-box and navigation. Following transitions are supported:

1. Zoom In (View Demo)
2. Zoom Out (View Demo)
3. Fade (View Demo)

This module is built using HTML and CSS only. No Java-script or Flash is used. Transitions are only supported on browsers with CSS3 support, on other browsers, module should work fine but without the transitions.

Having the light-box gallery in CSS will give you speed and support on mobile and tablets.

	Version 02.00.00 Added support to specify the text for close button Added support for transition effects in light-box mode: Zoom In Zoom Out Fade
	View module in action
	View blog post on how to install and use this module
	DNN 04.xx.xx DNN 05.xx.xx DNN 06.xx.xx
	Details about available module settings
	This module supports multiple instances on the same page. Each module can have its own images & settings.
	On IE (and other browsers that do not support CSS3) - the module will work fine without CSS3 transitions/effects.

You can review the product terms and license details here.

Module Configuration:

You can customize the settings for this module, including:

• Randomize Images
• Show Next/Previous (In light-box view)
• Container Width (Specify in % for responsive view)
• Transition (For light-box and navigation)
  • Zoom In
  • Zoom Out
  • Fade
• Thumbnail Size
  • Width
  • Height
• Border Size
• Border Radius
• Background Color

Browser Support:

Live Demo:

You can access live demo here

---

Following screenshots describe the functionality of this module:

Module Settings Page:

 

Manage Images:

Responsive Image Thumbnail View:

CSS3 Light-box View: 

You can find a blog post on how to use this module here.