DNNGo LayerSlider3D. User Manual

Transcription

1 DNNGo LayerSlider3D User Manual Description This is a powerful 2D&3D transition module, you can set up the transition effect through various options for each element. It allows you to set up the amount of elements of each background to create animated effects rivaling flash. For instance, the element can be just a fish, through add elements, you can own a lot of fish with each one belongs to independent look, movement location and swimming speed, etc. Features Compatibility with DNN6.X ~ DNN7.X. Multiple browser support (IE 7+, Safari 3+, ios Safari, Chrome 3+, Firefox 3+, Opera 10+) 5 displaying modes (normal, responsive, full-width, full-width + responsive & full-width + responsiveunder. Smart resizing and repositioning image, video and also text sublayers in responsive modes including font-sizes, line-heights, etc.) Unlimited variations of animations (sliding from / to 4 directions or fading in / out (sublayers only) with countless easing types and sublayers can slide or fade out before other sublayers appear) 3 types of navigation controls (thumbnail mode, hover thumbnails with buttons & buttons only) with auto hide feature (best view with semi-transparent PNG images or CSS3 styled HTML elements) Automatic slideshow feature (optional: Backwards-Slideshow) with start with a random layer feature Support 3D effect of elements, support enlargement or rotation. Support 3D effect of the background image, support random or fixed 3D transition effect. Random slideshow feature Smart features for full screen sliders (responsiveunder & sublayercontainer) Image preload feature Loops feature Customizable UI Per-layer settings with rel or style tags Easy link to another layer or to an URL Powerful API with callback functions Keyboard navigation Touch control for mobile devices (ios tested) Your Logo feature with link option Effect support with 8 pre-defined themes SEO friendly Free future updates and support!

2 Install Module After you download this module, you will get this installation zip file: DNNGo_LayerSlider3D_PA.zip If your site is DNN6.x or DNN7.x please enter Host -> Extensions and click Install Extension Wizard button to install. See below screenshot.

3 Add the module: 1. Mouse over Modules in Admin nav at the top, and choose ALL Categories in Category. 2. Choose DNNGo LayerSlider 3D and then click ADD Module, see below Add new slider item: 1.Click New Item button.

4 2. You can enter a Title which won t display in any place of slider, just as a mark. activation is used to display/hide this item. 3. You can choose to add a background image or not, the format should be jpg or png. 4. You can set up background animation. Background Duration In: The animation time when the background starts. Background Duration Out: The animation time when the background ends. Background Easing In: The animation effect when the background starts. Background Easing Out: The animation effect when the background ends. Background Delay In: The delayed loading time when the background starts. Background Delay Out: The delayed loading time when the background ends.

5 5. You can choose to display 2D or 3D for the background. Slide Delay:Control the displaying duration of the whole item. 6. Click Update to save the settings. You can add unlimited elements for each background, the elements could be image, text or links etc, please see below: You can t add element until one background is added. 7. Click Add Picture to enter the image title and select the image to upload.

6 8. You can set up image location, animated effect and animated time. Top: The distance located at the top of the background. For instance, top:100 means there is 100px distance for the image to the top of the background. Left: The distance located at the left side of the background. For instance, left:100 means there is 100px distance for the image to the left of the background Speed: The running speed of animation, we suggest you to use default value. Slide Direction: The direction when the image slides in. For instance:left: slides in from left to right Slide Out Direction: The direction when the images slides out Duration In: The time when the image slides in. Duration Out: The time when the image slides out Easing In: The animation effect when the image slides in Easing Out: The animation effect when the image slides out Delay In: The delayed time when the image slides in, for instance, if the value is 2000, it means the image will slide in in 2 seconds delayed.. Delay Out: The delayed time when the image slides out. Showuntil: The time when the image stays, for instance, the images will stay for two seconds if the value is 2000.

7 9. You can add some additional style and CSS for the image. For instance, you can write border:1px; for instance, in Style. And type item-2-icon in CssClass 11. You can add link to the image. 12. You can set up 3D effect for the image. Rotate in: You can rotate the image in 360 degree when it slides in, the larger of the value, the more will the image rotate.

8 Rotate Out: You can rotate the image in 360 degree when it slides out, the larger of the value, the more will the image rotate. The negative value stands for anticlockwise rotation. Scale In: The image will grow to display when it slides in. Scale Out: The image will reduce to display when it slides out. 13. Click Update to save. 14. Click Add Text to add some additional texts for the background. You can type the content and text styles. Other settings are the same as what you should do for adding images. Manage List Allow the administrator to manage and sort the items added.

9 Import Export The module is able to import/export data conveniently. Effect Options 1.This module contains a larger number of themes which could be chooses as you like to match with the skin.

10 2. Also you can set width, height etc for the module in Effect Options page. Install theme You can upload a new theme here: Theme style Here you can edit Theme settings to change the Theme style under the selected effect.

11 License interface 1.You need to go here and register. 2. Please install the module in DNN and add it in a page. Then click the License link to abtain the Machine Key. 3. You can send one 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 and manage your license information.

12 Support Our Site: