DNNGo Slider Revolution 3D Documentation 1.0.1

Table of Contents

  1. General Information
    1. Dotnetnuke Installation
    2. FTP Installation
  2. Module Information
  3. DNNGo SliderRevolution3D Module
    1. Manage List
    2. New Item
    3. Add Element
  1. Effect Options
  2. jQuery Settings
  3. License interface
  4. Contact Us
Back To Top

A. General Information

A. Dotnetnuke Information

To install this module you must have a working version of Dotnetnuke already installed. If you need help installing Dotnetnuke, follow the instructions in Video-Library. Below are all the useful links for Dotnetnuke information.


B. Description

Turn simple HTML markup into a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization.This module features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects. All customization can be handled via jQuery Options, HTML 5 data-attributes and CSS!




C. What Are The Requirements To Use DNNGo_SliderRevolution3D

To use DNNGo_SliderRevolution3D, you must be running DNN 5.x or higher. We have tested it with DNN5.x, DNN6.x and DNN7.x.



D. DNNGo_SliderRevolution3D Installation

You can install the module in two ways: through DNN, or via FTP. Please see the following sections for each method. If you have trouble installing the module via DNN, please proceed with installing it via FTP and you will be able to get around the issue.

Back To Top

B1. Dotnetnuke Installation

Follow the steps below to install via Dotnetnuke.

 

Back To Top

B2. FTP Installation

Follow the steps below to install via FTP.

Back To Top

C. DNNGo_SliderRevolution3D Module

Please log in to DNN using admin account and add DNNGo_SliderRevolution3D to a Pane.

Back To Top

C1. Manage List

  1. Click Manage List, this interface contains all the data added.
  2. You can sort,modify or delete the existing date.
Back To Top

C2. New Item

  1. Click New Item button.
  2. Title - Enter Titleļ¼Œthis Title won't show up in slideshow, this is just a mark.
  3. Activation - Display or hide slideshow.
  4. Start/End Time - Configure the time scope for the slideshow to display.
  5. Background Picture - Set the background image for slideshow.
  6. Background Options - Set transition type, displaying time etc for the background image.
    Transition - The appearance transition of this slide. You can define more than one, so in each loop the next slide transition type will be shown.
    Slotamount - The number of slots or boxes the slide is divided into. If you use boxfade, over 7 slots can be juggy.
    Master speed - The speed of the transition in "ms".
    Delay - A new Dealy value for the Slide.
Back To Top

C3. Add Element

You can add elements after adding the background. The element can be text, image or video, you can click Add Picture, Add Text and Add Media buttons to add elements.

Add Picture

  1. Content Text -The image title.
  2. Activation - Display or hide the image.
  3. Picture - Upload image.
  4. Link Options - Set image link.
    Link Enable - Set link to open image.
    New Window - Set link to open a new window.
    Link Url - Set url for the link.
  5. Caption data- settings - Set transitions type for the elements, such as displaying time, location etc.
    Incoming Animation Classes - Animation Classes defined the start animations on Captions.
    Outgoing Animation Classes - Animation Classes defined the end animations on Captions.
    Data-x - Possible Values are "left", "center", "right", or any Value between -2500 and 2500.
    Data-y - Possible Values are "top", "center", "bottom", or any Value between -2500 and 2500.
    Hoffset - Only works if data-x set to left/center/right. It will move the Caption with the defined "px" from the aligned position. i.e. data-x="center" data-hoffset="-100" will put the caption 100px left from the slide center horizontally.
    Voffset - Only works if data-y set to top/center/bottom. It will move the Caption with the defined "px" from the aligned position. i.e. data-x="center" data-hoffset="-100" will put the caption 100px left from the slide center vertically.
    Speed - The speed in milliseconds of the transition to move the Caption in the Slide at the defined timepoint.
    End Speed - The speed in milliseconds of the transition to move the Caption out from the Slide at the defined timepoint.
    Start - The timepoint in millisecond when/at the Caption should move in to the slide.
    End - The timepoint in millisecond when/at the Caption should move out from the slide.
    Easing - The Easing Art how the caption is moved in to the slide.
    End Easing - The Easing Art how the caption is moved out from the slide.
  6. Style Options - You can add additional style and CSS to the image. For instance, you can write : border:1px; in Style, and write item-2-icon in CssClass.

Add Text

  1. Content Text - Set text..
  2. Activation - Display or hide the text.
  3. Link Options - Set text link.
    Link Enable - Set link to enable the text.
    New Window - Set link to open a new window.
    Link Url - Set url for the link.
  4. Caption data- settings - Set transitions type for the elements, such as displaying time, location etc.
    Incoming Animation Classes - Animation Classes defined the start animations on Captions.
    Outgoing Animation Classes - Animation Classes defined the end animations on Captions.
    Data-x - Possible Values are "left", "center", "right", or any Value between -2500 and 2500.
    Data-y - Possible Values are "top", "center", "bottom", or any Value between -2500 and 2500.
    Hoffset - Only works if data-x set to left/center/right. It will move the Caption with the defined "px" from the aligned position. i.e. data-x="center" data-hoffset="-100" will put the caption 100px left from the slide center horizontally.
    Voffset - Only works if data-y set to top/center/bottom. It will move the Caption with the defined "px" from the aligned position. i.e. data-x="center" data-hoffset="-100" will put the caption 100px left from the slide center vertically.
    Speed - The speed in milliseconds of the transition to move the Caption in the Slide at the defined timepoint.
    End Speed - The speed in milliseconds of the transition to move the Caption out from the Slide at the defined timepoint.
    Start - The timepoint in millisecond when/at the Caption should move in to the slide.
    End - The timepoint in millisecond when/at the Caption should move out from the slide.
    Easing - The Easing Art how the caption is moved in to the slide.
    End Easing - The Easing Art how the caption is moved out from the slide.
  5. Style Options - You can add additional style and CSS to the text. For instance, you can write : border:1px; in Style, and write item-2-icon in CssClass.

Add Media

  1. Content Text - Set video title.
  2. Activation - Display or hide the text.
  3. Video Url:- Set url for the video.
    Video Width - Set width for the video.
    Video Height - Set height for the video.
  4. Caption data- settings - Set transitions type for the elements, such as displaying time, location etc.
    Incoming Animation Classes - Animation Classes defined the start animations on Captions.
    Outgoing Animation Classes - Animation Classes defined the end animations on Captions.
    Autoplay - Possible Values: "true" / "false" - will play the Video Directly when slider has been loaded.
    Next slideat end - Possible Values: "true" / "false" after video come to the end position, it swaps to the next slide automatically.
    Data-x - Possible Values are "left", "center", "right", or any Value between -2500 and 2500.
    Data-y - Possible Values are "top", "center", "bottom", or any Value between -2500 and 2500.
    Hoffset - Only works if data-x set to left/center/right. It will move the Caption with the defined "px" from the aligned position. i.e. data-x="center" data-hoffset="-100" will put the caption 100px left from the slide center horizontally.
    Voffset - Only works if data-y set to top/center/bottom. It will move the Caption with the defined "px" from the aligned position. i.e. data-x="center" data-hoffset="-100" will put the caption 100px left from the slide center vertically.
    Speed - The speed in milliseconds of the transition to move the Caption in the Slide at the defined timepoint.
    End Speed - The speed in milliseconds of the transition to move the Caption out from the Slide at the defined timepoint.
    Start - The timepoint in millisecond when/at the Caption should move in to the slide.
    End - The timepoint in millisecond when/at the Caption should move out from the slide.
    Easing - The Easing Art how the caption is moved in to the slide.
    End Easing - The Easing Art how the caption is moved out from the slide.
  5. Style Options - You can add additional style and CSS to the video. For instance, you can write : border:1px; in Style, and write item-2-icon in CssClass.
Back To Top

D. Effect Options

Public options, like stop & start, next,prev, jump to slide. Events at video play, start and stop, events at slide change.

Back To Top

E. jQuery Settings

jQuery Enable - When it is enabled, the module will use its own jQuery library, When it is disabled, the module won't load jQuery libray.

Back To Top

F. License interface

  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.
Back To Top

G. Contact Us

If you have any questions or suggestions about modules/skins or modules/skins installation process, please feel free to contact us.

  • Website: www.dnngo.net
  • Email: dnnskindev@gmail.com
  • Skype: dnngo-linda