Please Wait a Moment
X

LayerGallery Documentation

LayerGallery

General Information

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 the Video-Library. Below are all the useful links for DotNetNuke information.

Description

Turn simple HTML markup into a responsive(mobile friendly) or full width slider with must-see-effects and in the mean while keep our build as your SEO optimization. This module has  features that have  tons of unique transition effects, an image pre-loader, video embedding, auto play that stops on user interaction and lots of easy options to set and create your own effects. All customization can be handled via jQuery Options, HTML 5 data-attributes and CSS.

    • Aligning of Layers with simple Settings.
    • Fully resizable Images and Thumbs.
    • Using CSS Animation with Fall Back to jQuery.
    • Unlimited Caption Layers.
    • Captions/Layers like Video, Image and html tags that can be easily Created.
    • Unlimited Slides.
    • IPhone & Android Swipe Touch enabled.
    • Customizable 100% via HTML and CSS.
    • Easy installation on your Website.
    • Vimeo, YouTube videos and HTML5 Video Supported.
    • Stop AutoPlay during Video Playback.
    • Hide Captions Separately or Together depending on the width of the Slider.
    • Hide whole Slider Depending on Screen Width.
    • Countless Art of Transitions.
    • 10+ Different Caption Animation Types.
    • 20+ Different Slide Transition, and Unlimited Variations due Rotation and Amount of Slots.
    • Two Level Animations of Captions. Start Time, End time, Different Animation Type and Easing at Start and End.
    • Public options such as stop, start, next, prev, jump to slide. Events at video play, start and stop, events at slide change.
    • Lazy Load function.
    • Navigation Skins, Align, position offset of navigation elements easy customization.
    • Sharp Edged of BG Caption Backgrounds Automatically calculated.

Module Installation

What Are The Requirements To Use module

To use xBlog, you must be running DNN 6.x or higher. It has been tested  with DNN6.x , DNN7.x and DNN8.x

Follow the steps below to install via Dotnetnuke.

  • Navigate to Host > Extensions.
  • Click Install Extension Wizard and hit the Choose File button.
  • Navigate to find the "DNNGo_LayerGallery_x.x.x_PA.zip" file on your computer and click "Next" button.
  • The module will be uploaded and installed.

Configuring Slides

Please log in to DNN using the admin user account and add DNNGo_LayerGallery to a Pane.

Add slider

  1. Click Manager button.
  2. Click + sign to add slider.
  3.  A Slider can be copied and added by clicking Copy button

Main Background

  • Click Add Image button to add a background image.
  • If you want to use the background color instead of the background image, you can select the color codes at this area.
  • When turning on Ken Burns Effect, Backgrounds will ease in and Fit, Background Fit End, Duration for Ken Burns, Easing of Ken Burns Effect will be valid.
  • By clicking Media Background button you can use a video as the background.
  • If you want to use HTML 5 Video, you will need to use three video formats at the same time, they are :Mp4, Webm, Ogv. Enter the video URL into Video Mp4 (HTML5), Video Webm (HTML5), and video Ogv (HTML5).
  • You can use youtbue and Vimeo as the video background. Just that you need to enter the corresponding video ID, which is from the URL.

Slide Options

  • 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.
  • Random Transition This will allow a Random transitions of the Selected Transitions.
  • Slot Amount The number of slots or boxes the slide is divided into. If you use boxfade, over 7 slots can be jaggy.
  • Master Speed The speed of the transition in "ms". default value is 300 (0.3 sec)
  • Delay A new Delay value for the Slide. If no delay is defined per slide, the delay defined via Options will be used
  • Link URL A link on the whole slide picture.
  • Target The target of the Link for the whole slide picture. (i.e. "_blank", "_self")
  • Thumbnail An Alternative Source for thumbs. If it is not defined as a copy of the background image, it will be used in a resized form.
  • Title In Navigation Style Preview1- preview4 mode you can show the Title of the Slides. Due to this option, you can define in each slide its own Title.

Add Layers

Layers will be over the background, you can set unlimited Layers for one slider, the Layers could be images, texts, HTML and video.

  • Click Add new layer button to add a new layer.
  • Click Cooy button to copy and add a layer.
  • You can input a description at the Text position, this description will show on the background.
  • You can click the up arrow at the bottom of the page to preview the description you input.

Add Image Layer

  • You can upload an image at the Image position, this image will appear in  the background.

Add Video Layer

  • You can enter the URL address of the video in the Video position, this video will show in the background.
  • You can use youtube and Vimeo as the layer video, just need to enter the corresponding video ID, which is from the URL.
  • If you want to use HTML 5 Video, you will need to use three video formats at the same time, they are :Mp4, Webm, Ogv. Enter the video URL into Video Mp4 (HTML5), Video Webm (HTML5), and video Ogv (HTML5).

Data Settings

Here, you can set the layer position in the background, also you can set the animation time of the layer.

  • data-x Possible Values are "left", "center", "right", or any Value between -2500 and 2500. If left/center/right is set, the layer will simply be aligned to the set position. Any other "number" will simply be set to the left position in px of that layer. At "left" the left side of the layer is aligned with the left side of the slider. At "center" the center of layer is aligned with the center of the slide. At "right" the layer right side of layer is aligned with right side of the Slider.
  • data-y Possible Values are "top", "center", "bottom", or any Value between -2500 and 2500. If top/center/bottom is set, the caption will simply be aligned to the set position. Any other "number" will  be set at the top position in px of that layer. At "top" the top side of the layer is aligned with the top side of the slider. At "center" the center of layer is aligned with the center of slide. At "bottom" the layer bottom side is aligned with the bottom side of the Slider.
  • data-hoffset Only works if data-x set to left/center/right. It will move the layer with the defined "px" from the aligned position. i.e. data-x="center" data-hoffset="-100" will put the layer 100px left from the slide center horizontaly.
  • data-voffset Only works if data-y set to top/center/bottom. It will move the layer with the defined "px" from the aligned position.
  • data-speed The speed in milliseconds of the transition to move the layer in the Slide at the defined time slot.
  • data-split-in Split Text Animation (incoming transition) to "words", "chars" or "lines". This will create amazing Animation Effects on one go, without the needs to create more layers.
  • data-element-delay Any Value between 0 and 1, like 0.1,  will make delays between the Splitted Text Element (start) Animations.  To increase the amount of words or chars allowed, that Value should be decreased.
  • data-split-out Split Text Animation (outgoing transition) to "words", "chars" or "lines". Only available if data-end is set.
  • data-endelement-delay A Value between 0 and 1 like 0.1 to make delays between the Split Text Element (end) Animations. To incease the amount of words or chars, you should decrease that number.
  • data-start The time in milliseconds how fast  the Caption should move in the slide.
  • data-easing The rate of speed the image/Art  moves into the slide.
  • data-endspeed The speed in milliseconds of how fast the layer moves out of  the Slide at the defined time.
  • data-end The time in millisecond when the layer should move out of the slide.
  • data-endeasing The rate of speed  the layer  moves out of the slide.

Layer Transition

Sets the layer Transition moving in and out

  • Transition In Sets the layer Transition moving  in. For example: the use of Short from top is to make the layer get in from the bottom to top.
  • Transition Out Sets the layer Transition moving out.
  • After you select Custom in, these settings will be valid.

Link

Sets the links of the layer.

  • URL Sets the URL of the link.
  • Target Sets the  Target. The use of Blank is to open the link in a new window.

Style

Sets CSS of the layer.

Slider Settings

There are many personalized settings included in the module, you can create a unique slider. Each Option has detailed instruction.

License interface

  1. You need to go here http://www.dnngo.net and register.
  2. Please install the module in DNN and add it to a page. Then click the License link to obtain the Machine Key.
  3. You can send an 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 will still be valid when you transfer you site and make it live.
  4. You can go here and manage your license information: http://www.dnngo.net/MyAccount/OnlineAuthorization.aspx 

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