DNNGo_DNNGalleryPro v6.6.3

Documentation


Thank you for purchasing our module. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Dotnetnuke Information

To install this module you must have a working version of Dotnetnuke already installed. If you need help to install Dotnetnuke, follow the instructions in Documentation Center.

Description

DNNGallerypro is an Animated Effect Collection module.This module assembles multiple image effects like special effect scripts, slider, rotation, cyclical, circulation etc. Multiple theme styles in every Animated Effect can adapt to different skin styles. You can set parameters for each effect separately, which allows you to control the animation speed, interval time, slider mode conveniently. We will offer a regular updation with integration of fresh animated effects on a weekly basis, you can enjoy this value-added service free of charge.

What Are The Requirements To Use DNNGalleryPro

To use module, you must be running DNN 8.x or higher. We have tested it with DNN 8.x and DNN 9.x.

Follow the steps below to install via Dotnetnuke.

For DNN 8
For DNN 9

It includes 16 different image rotation effects in this module. You can click on Apply Effect button to select effect.

Effect_01_SlideShow_H


Below is the screen shot:

Basic Options
Description Options

You can set the animation effect, text color etc for description section, as well as set different animation effects for each slider.

Picture Link

Set link of slider image.

Effect Options

Here it includes global settings of slider.

Basic Options

Here you can set the width, height, animation time etc of slider.

Thumbnail Options

Here you can set the height, display number, text color etc of thumbnail image.

BulletNavigator Options

Here you can set the style and location of BulletNavigator.

ArrowNavigator Options

Here you can set the style and location of ArrowNavigator.

Description Options

Here you can set the animation effects, text color etc of description section.

Effect_02_SlideShow_V


Effect_02_SlideShow_V and Effect_01_SlideShow_H share the same features. Just that thumbnail of Effect_02_SlideShow_V can be set to show on the left or on the right, as shown in image:

Effect_03_Carousel


Below is the screen shot:

Basic Options
Thumbnail Options

You can set thumbnail as well as the link on the thumbnail.

Left Icon Options and Right Icon Options

It will show two icons when mousing over the thumbnail, as shown in image:

Here you can set the Link to icon, same way as thumbnail.

Effect Setting

Enable Single Setting - You can set different animation effects for each item.

Effect List - You can set the animation effect of mousing over the image. It includes 4 types in total. Check demo.

Left Icon Style - You can set the icon shape.

You can change background color, text color, icon color and background transparency, etc.

Border Setting

Set the style of border.

Other Setting

Set padding, background color and shadow.

Title Setting

Set style of title texts.

Description Setting

Set the style for description texts.

Effect Options

Here it includes the global settings of slider.

Effect Options > Basic Options

Here you can set the width, height, animation time, display number etc.

Effect Options > Title Setting

You can set the styles of title texts for all items.

Effect_04_Isotope


This effect includes ajax's features. When scrolling down the browser, it will load images automatically, as shown in image.

The way for adding item is the same as Effect_03_Carousel.

You can set a group for each item, the name of the group will show at the top of the slider. Images of this group will show when clicking the group name.

Effect Options > Basic Options

Effect_05_ResponsiveTabs


Below is the screen shot:

Add New > Basic Options
Effect Options > Basic Options

Effect_06_Accordion


Below is the screen shot:

Add New > Basic Options
Effect Options > Style Setting

Here you can set the text color, background color, border color etc for the item.

Effect_07_FlipBox


Below is the screen shot:

Add New > Basic Options

Each item includes front content and back content. Back content will flip over to display when mousing over the front.

Effect Options > Basic Options
Effect Options > Front Setting

Set the text color, background color, border color etc of the front.

Effect Options > Back Setting

Set the text color, background color, border color etc of the back.

Effect_08_PhotoGallery


Below is the screen shot:

Add New > Basic Options

Here you can set title and description texts.

Add New > Thumbnail Options

Here you can set the image of thumbnail.

Add New > Left Icon Options and Right Icon Options

It will display two icons when mousing over the thumbnail, here you can set the link to icon.

Add New > Effect Setting

Here you can set the animation when mousing over the image.

Effect Options > Basic Options

Effect_9_ResponsiveSlide


Below is the screen shot:

Effect_10_WeatherSlider


Below is the screen shot:

Add New > Basic Options
Effect Options > Basic Options

Effect_11_TransBanner


Below is the screen shot:

Add New > Basic Options
Effect Options > Basic Options

Effect_12_UnoSlider


Below is the screen shot:

Add New > Basic Options
  • Title - Set the title of slider, title texts will not show in the slider.
  • Description - Set the description texts of slider.
  • Picture - Set the image of slider.
  • Picture Link - Set the url address of image.
  • Effect Options > Basic Options

    Effect_13_Scrolling


    Below is the screen shot:

    Add New > Basic Options

    Here you can set title and description texts.

    Add New > Thumbnail Options

    Here you can set the image of thumbnail.

    Add New > Left Icon Options and Right Icon Options

    It will display two icons when mousing over the thumbnail, here you can set the link to icon.

    Add New > Effect Setting

    Here you can set the animation when mousing over the image.

    Effect_14_FAQ


    Below is the screen shot:

    Add New > Basic Options
    Groups

    Here you can add category.

    Effect Options > Basic Options

    Effect_15_ContentSlider


    Below is the screen shot:

    Add New > Basic Options
    Thumbnail Link

    Set link to thumbnail.

    Effect Options > Basic Options

    Effect_16_VerticalScroll


    Below is the screen shot:

    The way for adding item is the same as Effect_03_Carousel.

    Effect Options > Basic Options

    Effect_17_Timeline


    Below is the screen shot:

    Add New > Basic Options
    More Options
    Effect Options > Basic Options

    Effect_18_GoogleMap


    Below is the screen shot:

    Add New > Basic Options
    Effect Options > Basic Options
    Effect Options > StreetViewPanorama

    Effect_19_Chart


    Below is the screen shot:

    Add New > Basic Options
    Effect Options > Basic Options

    Effect_20_Pricing


    Below is the screen shot:

    Add New > Basic Options
    Effect Options > Left Header Settings

    Effect_21_Socialsider


    Below is the screen shot:

    Add New > Basic Options
    Effect Options > Basic Options

    Effect_22_ComingSoon


    Below is the screen shot:

    Effect Options > Basic Options

    Effect_23_ImageCarousel


    Below is the screen shot:

    Add New Slider
    Effect Options > Basic Options

    You will get to know how images and media files work in this module via the following description, we offer two ways to upload images.

    Media List

    You can redirect to two interfaces of adding files through "Add New" or "Synchronize Files". All images of xBlog module will display here, all xBlog module images under single child site are shared.

    1. You can click "Add New" to batch upload images directly.
    2. You can click "Synchronize Files" to batch import images directly.
      If you have more files to upload, the method above is not that helpful. At this time you can try this method.
      Put the files need importing into specified folder, it will prompt number of the files to import after refreshing the page, click "Synchronize All Files" button and everything is done.
    General Settings
    Data Filter
    1. You need to go here http://www.dnngo.net and register.
    2. Please install the module in DNN and add it in a page. Then click the License link to obtain the Machine Key.
    3. You can send one email to dnnskindev@gmail.com and tell us your Invoice ID, Machine Key and Username. After that, we will generate one piece of license information. If your site is a demo site, the license is still valid when you transfer your demo site to your live site.
    4. You can go here http://www.dnngo.net/MyAccount/OnlineAuthorization.aspx and manage your license information.