5 (3 product reviews.)

Image Gallery with CSS3 Light-box 2.0 (Transitions Supported)

posted by DnnZone - 12/8/2012
DnnZone Active Since 8/11/2010
Pakistan

5.00

(4 total reviews for DnnZone in the last six months.)

reviews Ask a Question

1 users are watching this product.

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. Module 28648
  • $18.00 Standard (Licensed to 1 Domain)
  • $34.00 Developer Edition (1 Parent Portal with Unlimited Child Portals)
  • $46.00 Enterprise Edition (Unlimited Parent Portals and Unlimited Child Portals)

$18.00

Add To Cart
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:
    1. Zoom In
    2. Zoom Out
    3. 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:

 Module Settings

Manage Images:

Manage Images

Add Image

Responsive Image Thumbnail View:

Responsive Thumbnail View with Hover

CSS3 Light-box View: 

CSS3 Light-box View

CSS3 Light-box View

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

 

Product Badges

Azure Compatible

Spotlight Reviews

5 5 (3 product reviews)
Adam C says... 5 5.0
Great little module for the price. Thanks!
Posted 10/7/2013
Harris W says... 5 5.0
Very nice nice module
Posted 11/29/2012
Marco A says... 5 5.0
Great response, support and customer service! Thanks
Posted 11/30/2012