Noo LayerSlideshow Extensions Documentation


1. Purpose

This document is to guide users how to best use component Noo Layer Slideshow.

Compatible Joomla version: Joomla! 3.x

2. Definitions, Abbreviations and Acronyms

 

Joomla

The most popular Open Source Content Management System, written by PHP.

.

Noo Layer Slideshow

Our extension. An exceptional component to present your Gallery.

.

Noo Layer Slideshow 1.0

Latest version.

.

Slides

With each category, you can create slides and display them on your site in different ways.

 

Captions

With each slide, you can create many captions with different effects.

 

Module

A module which is developed based on the component.

 

3. Overview

  3.1 What is Noo Layer Slideshow 1.0?

Turn simple HTML markup into a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines). See the heaps of custom transitions/animations for each object on the page! Customize this slider with just a little HTML and CSS to your very needs.

This plugin 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!

   3.2 Noo Layer Slideshow Features

  1. Image and Thumbs fully resizable

  2. Using CSS Animation with FallBack to jQuery

  3. Unlimited Caption Layers

  4. Unlimited Slides

  5. iPhone & Android Swipe Touch enabled

  6. jQuery Conflict free plugin

  7. Customizable 100% via Plugin Parameters / CSS / HTML

  8. Easy installation

  9. Special Easing

  10. Example Pages included

  11. Vimeo & Youtube Supported

  12. Optional Shadows included

  13. Hide Captions Separately or Together depending on Slider Width

  14. Hide whole Slider Depending on Screen Width

  15. 10 Different Caption Animation Types

  16. 20 Different Slide Transitions, and Unlimited Variations due Rotation and Amount of Slots

  17. Two Level Animations of Captions. Start Time, End time, Different Animation Type and Easing at Start and End

  18. Captions for Video, Image and html tags can be easily Created

  19. CSS3 Transitions with jQuery Animation Fall Back

  20. Full Screen Video

  21. Public API, such as stop, start, next, prev, jump to slide, event at video play, start and stop, events at slide change…

  22. 10 Different Examples included to know how the Features work

  3.3 How to use Noo Layer Slideshow 1.0?

To use Noo LayerSlideshow, you need to perform these tasks as follow:

                               In Component Noo LayerSlideshow:

                          Input data for main infomation

                         Input data for display option

                         Create captions

In module Noo LayerSlideshow:

Each step’s detail will be described in the following parts of the document.

Screenshots

Frontend:

Noo Layer Slideshow Frontend

(To learn how to create a slide like this example, please view: 4. Steps to create a basic slide)


Navigation Type is Bullets


Navigation Type is Thumbnail


Navigation Type is None

1. Noo Layer Slideshow Installation

Installation   

Go to your Administrator site: Extensions--> Extension Manager

 

                               

 

In “Upload Package File” block, please Upload&Install the following extensions: pkg_noo_layerslideshow-XXX.zip

 

            

 

Language Installation

Noo Layer Slideshow’s interface can be switched to different languages. Default language is English. To make Noo Layer Slideshow 1.0 able to run with different languages, please follow these steps:

Note: Sometimes you need to change the encoding type of language file to “UTF8 without Bom” (you can use notepad++ to change encoding type of the file).

If you want to change backend language, do the same with language in “administrator” folder.

 

2. Configure Backend base information

Configure Categories

Categories are to classify the slides you have. When done setting categories, you can select to display at frontend the slides in certain category (View module to learn more).

Categories are subjects that items will be added to it.

To configure Categories, go to Component -->Noo Layer Slideshow -->Categories -->New

  1. Main View

 

 

 

  1. New/Edit View

 

 

 

Publishing Options

 

                    

 

Options

                 

 

Metadata Options


               

Main information:

 

Tips and Warning

           You must create categories before creating slides.

             When creating a category: please add title, alias, access, status, ordering, language, description (Created by, Create date and Alias will automatically generate if you do not add value).

3.  Configure Slides

Slides corresponding to each category will be displayed in gallery.

To configure Slides, go to Component --> Noo Layer Slideshow --> Slides --> New

Main View

 

New/Edit View

 

                

Publishing Options

                               

 

 

Main Information:

Display Options

 

                              

 

In here, you can set specific property for each slide:


 

Data Transition

The appearance transition of this slide

Data masterspeed

Set the Speed of the Slide Transition. Default 300, min: 100 max:2000.

Data slotamount

The number of slots or boxes the slide is divided into. If you use boxfade, over 7 slots can be juggy

Data link

A link on the whole slide pic

   

Data Target

A link target (like _self or _blank .Default none)

Data Link to slide

If data-link=”slide”; is set, you can define a slide where to jump in case the image has been clicked

Data delay

A new Delay value for the Slide. If no delay defined per slide, the delay defined via Options will be used

Data thumb

An Alternative Source for thumbs. If not defined a copy of the background image will be used in resized form

Data fstransition

An Alternative First Slide Transition (only in the first loop, than data-transition will be used)

Data fsmasterspeed

An Alternative First Slide Transition Speed (only in the first loop, than data-masterspeed will be used)

Data fsslotamount

An Alternative First Slide Slot Amount (only in the first loop, than data-slotamount will be used)

 

Captions

Captions are Containers which can be customized via CSS, classes for the start animation and some data options. The CSS for the caption added in the settings.css file because it depends strongly on the responsive Sizing. There are 4 Steps of Responsive Contents which are written later below under the Responsive Dependencies Caption.

To display the slider at FrontEnd, you may only need slide’s image. However, to make your slider become more useful and informative, you should create caption for each slide.


Add Captions

 


 

Title

Title of Caption. Displayed only in the backend.

Caption

You can embed image or video link from Vimeo/Youtube, or simply just text only.

Class example

Select the style for text displayed in the Caption

Incoming Animations

Class for Incoming Animations

Outgoing Animations

(only during the Slide). This is Optional. If not set, but endtime is set via data-end than the same animation type will be used as for incoming animation.

Data X

The horizontal position in the standard (via startwidth option defined) screen size (other screen sizes will be calculated)

Data Speed

Duration of the animation in milliseconds

Data EndSpeed

Duration of the animation when caption leaves the stage in milliseconds

Data Start

After how many milliseconds should this caption start to show

Data End

After how many milliseconds should this caption leave the stage (should be bigger than data-start+data-speed!

Data Easing

Special easing effect of the animation

Data Endeasing

Special easing effect of the animation

Video Auto Play

Auto play video when slide started

Nextslideatend

Auto next video when video finished

 

 

Tips and Warning

Tips:

Link Youtube:

Latest short format: http://youtu.be/YHWkro9-e9Q

Iframe: http://www.youtube.com/embed/YHWkro9-e9Q

Iframe (secure): https://www.youtube.com/embed/YHWkro9-e9Q

Object param: http://www.youtube.com/v/YHWkro9-e9Q?fs=1&hl=en_US

Object embed: http://www.youtube.com/v/YHWkro9-e9Q?fs=1&hl=en_US

Watch: http://www.youtube.com/watch?v=YHWkro9-e9Q

Ytscreeningroom: http://www.youtube.com/ytscreeningroom?v=YHWkro9-e9Q

More params: http://www.youtube.com/watch?v=YHWkro9-e9Q&feature=g-vrec

 

<iframe

src="http://www.youtube.com/embed/YHWkro9-e9Q?hd=1&amp; wmode=opaque&amp;controls=1&amp;showinfo=0" width="460" height="259">

</iframe>

 

Link Vimeo:

http://player.vimeo.com/video/29298709?title=0&amp;byline=0&amp;portrait=0

http://vimeo.com/29298709

http://vimeo.com/29298709#t=10

http://player.vimeo.com/video/29298709

 

<iframe src="http://player.vimeo.com/video/29298709?title=0&amp;byline=0&amp;portrait=0" width="460" height="259">

</iframe>

1. Configure website template

You have many website template, each website template has many positions (that will display modules).

You need to:

2. Manage modules

We provide you a module-based component so you can display component on your site in different positions.

 

                                  

Base config, always display

 

                           

When you choose Navigation Type is Bullets

 

                          

When Navigation Type is Thumbnail

 

 

                                  

 

Select Category

Select a category for this module, if you do not see any category, please go to Noo Layer Slideshow component and create a category and set up slide images first.

Load video.js

Load video.js form local

Slideshow Style

Type of slideshow module, It has 3 style: Responsive, Full-Width,Fixed and FullScreen

Delay

The time one slide stays on the screen in Milliseconds (Default: 9000)

Start Height

Basic Height of the Slider in the desktop resolution in pixel, other screen sizes will be calculated from this (Default: 490) It should be similiar to the settings of the style sheet. If you use a fullwidth banner, ti will deinfe the max. Height of the banner by resizing of the browser. The banner wont ne heigher than this value

Start Width

Basic Width of the Slider in the desktop resolution in pixel, other screen sizes will be calculated from this (Default: 940) It should be similiar to the settings of the style sheet. If you use a fullwidth banner, ti will deinfe the max. Width of the banner by resizing of the browser

Navigation Type

Display type of the navigation bar (Default:”none”

Options:

bullet

thumb ** In Fullwidth version thumbs wont be displayed if navigation offset set to shwop thumbs outside of the container ! Thumbs must be showen in the container!

none

Navigation Horizontal Align

Horizontal Align of Bullets / Thumbnails

Navigation Vertical Align

Vertical Align of Bullets / Thumbnails

Navigation Horizontal Offset

A value between -600 to 600 - Offset from current Horizontal position of Bullets / Thumbnails negative and positive direction

Navigation Vertical Offset

A value between -600 to 600 - Offset from current Vertical position of Bullets / Thumbnails negative and positive direction

Navigation Offset Horizontal

The Bar is centered but could be moved this pixel count left(e.g. -10) or right (Default: 0) ** By resizing the banner, it will be always centered !!

Navigation Offset Vertical

The Bar is bound to the bottom but could be moved this pixel count up (e. g. -20) or down (Default: 20)

Navigation Arrows

Display position of the Navigation Arrows (Default:”None”)

Navigation Style

Look of the navigation bullets (Default: round;)

Solo Arrow Left Horizontal Align

Horizontal Align of left Arrow (only if arrow is not next to bullets)

Solo Arrow Left Vertical Align

Vertical Align of left Arrow (only if arrow is not next to bullets)

Solo Arrow Left Horizontal Offset

A value between -600 to 600 - Offset from current Horizontal position of of left Arrow negative and positive direction

Solo Arrow Left Vertical Offset

A value between -600 to 600 - Offset from current Vertical position of of left Arrow negative and positive direction

Solo Arrow Right Horizontal Align

Horizontal Align of right Arrow (only if arrow is not next to bullets)

Solo Arrow Right Vertical Align

Vertical Align of right Arrow (only if arrow is not next to bullets)

Solo Arrow Right Horizontal Offset

A value between -600 to 600 - Offset from current Horizontal position of of right Arrow negative and positive direction

Solo Arrow Right Vertical Offset

A value between -600 to 600 - Offset from current Vertical position of of right Arrow negative and positive direction

Touch Enabled

Enable Swipe Function on touch devices

Stop Timer By Hovering

Stop Timer By Hovering

Hide Caption at Limit

It Defines if a caption should be shown under a Width Limit ( Basod on The Width of Banner ! )

Hide All Caption at Limit

Hide all The Captions if Width of Browser is less then this value

Hide Slider at Limit

Under this Limit the Slider is hidden and the timer is stopped

Stop at Slide

-1 or 1 to 999. Stop at selected Slide Number. If set to -1 it will loop without stopping. Only available if stopAfterLoops is not equal -1 !

Stop After Loops

-1 or 0 to 999. Stop at selected Slide Number (stopAtSlide) after slide looped x time, where x this Number. If set to -1 it will loop without stopping. Only available if stopAtSlide not equal -1 !

Shadow Display

The Shadow display underneath the banner

Show Timer

Show the timer countdown line on the slide. It is a progress bar on top/left of the slide when running

Timer Position

The timer countdown line position (Top or Bottom)

 


3. Steps to create a basic slide

In this section, we’ll go through an instruction to create a basic slide with these steps:

Input data for main information

Basic information required: Title, Image, and Category.

Input data for display option

To make your slide look better, this information should be entered:

Create captions

As mentioned above, caption of each slide can be used to create text, image or video to display on the slide. To make the best use of caption, you should pay attention to caption’s properties:

Caption is text

BackEnd

Data Easing has 30 effects in total for you to create your best desired caption.

FrontEnd

 

Caption is a Image or Video

You will need to enter property’s information like in the case of text caption (except for Class example).

For caption to have an Image or Video, please view the instruction in 2.2. Configure Slides / Caption

 

Image’s background needs a canvas

 

 

 

                                                                                        

                                                                                                For example

 


BackEnd

 

        

 

VIDEO TUTORIAL: This is video tutorial how to configure Noo Layerslideshow