AP Smart LayerSlider3.4 M

Working with Layers

User Rating: 5 / 5

Star ActiveStar ActiveStar ActiveStar ActiveStar Active
 

AP Smart LayerSlider supports layers, which are blocks of text or HTML content that can easily be positioned, sized or animated.

Layers can be both animated and static and they can hold any HTML content like: text, links, buttons, images, DIVs, headings, etc. Also, layers can be scaled down automatically or with CSS. The very basic knowledge of HTML is required, but outcome could be eye-catching, dynamic and intelligent. You can imagine yourself as a director of short animation movie, releasing your creativity to create what you desire.

Simple layer example code:

<div class="sp-layer" data-position="centerLeft">
    <!-- Some html content goes here -->
    This div is a simple layer
</div>

As can be seen above, layer needs to have the sp-layer class, but it can be any HTML element: paragraphs, headings, images, buttons or just DIV elements.

Where is the placeholder for layers? It is Joomla or K2 article description, or "Description" where the Source is "Image Folder" ( See example modal ).

There are several predefined classes that can be passed to layers in order to style them.

Predefined classes:

  • sp-static

    Sets the layer to be visible all the time, not animated.

  • sp-black

    Adds a black and transparent background and makes the font color white.

  • sp-white

    Adds a white and transparent background and makes the font color black.

  • sp-padding

    Adds a 10 pixel padding to the layer.

  • sp-rounded

    Makes the layer's corners rounded.

Example code:

<div class="sp-layer sp-static sp-black sp-padding" data-horizontal="50" data-vertical="50">
    <!-- Some html content goes here -->
    This div is a simple "static" layer
</div>

Multiple layers example code:

<!-- First layer -->
<h3 class="sp-layer" data-position="bottomLeft" data-horizontal="10%" data-show-transition="left" data-show-delay="300" data-hide-transition="right">
    <!-- Some html content goes here -->
    This heading is a first layer
</h3>

<!-- Second layer -->
<p class="sp-layer" data-width="200" data-horizontal="center" data-vertical="40%" data-show-transition="down" data-hide-transition="up">
    <!-- Some html content goes here -->
    This paragraph is a second layer
</p>

<!-- Third layer -->
<div class="sp-layer" data-width="200" data-horizontal="center" data-vertical="60%" data-show-delay="2000" data-show-transition="down" data-hide-transition="up">
    <!-- Some html content goes here -->
    This DIV is a third layer, with delay of 2 seconds (data-show-delay="2000")
</div>

In example seen above, positioning and animation parameters are added with "data-attributes".


The position, size and animations are set using data attributes.

Data attributes:

  • data-width

    Sets the width of the layer. Can be set to a fixed or percentage value. If it's not set, the layer's width will adapt to the width of the inner content.

  • data-height

    Sets the height of the layer. Can be set to a fixed or percentage value. If it's not set, the layer's height will adapt to the height of the inner content.

  • data-depth

    Sets the depth (z-index, in CSS terms) of the layer.

  • data-position

    Sets the position of the layer. Can be set to 'topLeft' (which is the default value), 'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight', 'centerLeft', 'centerRight' and 'centerCenter'.

  • data-horizontal

    Sets the horizontal position of the layer, using the value specified for data-position as a reference point. Can be set to a fixed or percentage value.

  • data-vertical

    Sets the vertical position of the layer, using the value specified for data-position as a reference point. Can be set to a fixed or percentage value.

  • data-show-transition

    Sets the transition of the layer when it appears in the slide. Can be set to 'left', 'right', 'up' or 'down', these values describing the direction in which the layer will move when it appears.

  • data-show-offset

    Sets an offset for the position of the layer from which the layer will be animated towards the final position when it appears in the slide. Needs to be set to a fixed value.

  • data-show-duration

    Sets the duration of the show transition.

  • data-show-delay

    Sets a delay for the show transition. This delay starts from the moment when the transition to the new slide starts.

  • data-hide-transition

    Sets the transition of the layer when it disappears from the slide. Can be set to 'left', 'right', 'up' or 'down', these values describing the direction in which the layer will move when it disappears.

  • data-hide-offset

    Sets an offset for the position of the layer towards which the layer will be animated from the original position when it disappears from the slide. Needs to be set to a fixed value.

  • data-hide-duration

    Sets the duration of the hide transition.

  • data-hide-delay

    Sets a delay for the hide transition.

  • data-stay-duration

    Sets how much time a layer will stay visible before being hidden automatically.


The layers are animated using CSS3 transitions in most browsers. In IE9 and IE8 (where CSS3 transitions are not supported), the layers will only fade in/out, and in IE7 and older, the layers will appear without any animation.


Layer example code with (almost) all data-attributes:

<div class="sp-layer"
    data-width="340"
    data-height="200"
    data-position="centerCenter"
    data-horizontal="center"
    data-vertical="60%"
    data-show-transition="up"
    data-show-delay="1000"
    data-hide-transition="down"
    data-hide-duration="700"
    data-hide-delay="800"
    data-stay-duration="5000">
    <!-- Some html content goes here -->
    This is a DIV with <span>some html content</span>
    <img src="path/to/some/image.png" />
</div>

Video Layers:

The video types or providers supported by this module are: YouTube, Vimeo, HTML5 or Video.js.

In order to have a video automatically controlled by the slider, the video must have the sp-video class. Also, there are some provider-specific requirements for the videos, as presented below.

  • YouTube

    YouTube videos can be loaded in two ways: by using a poster image with a link to the YouTube video or by inserting directly the video iframe provided by YouTube.

  • Example 1:
    <div class="sp-layer" data-show-duration="500" data-show-delay="1000">
        <a class="sp-video" href="//www.youtube.com/watch?v=7CVtTOpgSyY">
        	<img src="path/to/your/poster.jpg" width="500" height="350" />
        </a>
    </div>
    


    When using the second method, the videos will need to have the enablejsapi=1 parameter appended to the URL of the video. It's also recommended to append the wmode=opaque parameter. The parameters need to be delimited by &

    Example 2:
    <iframe class="sp-video" src="//www.youtube.com/embed/7CVtTOpgSyY?enablejsapi=1&wmode=opaque" width="500" height="350" frameborder="0" allowfullscreen></iframe>
    

  • Vimeo

    Just like YouTube videos, Vimeo videos can also be loaded by using a poster image or by inserting directly the video iframe.

  • Example 1:
    <div class="sp-layer" data-show-duration="500" data-show-delay="1000">
        <a class="sp-video" href="http://vimeo.com/109354891">
        	<img src="path/to/your/poster.jpg" width="720" height="400" />
        </a>
    </div>
    


    When using the second method, the videos will need to have the api=1 parameter appended to the URL of the video.

    Example 2:
    <iframe class="sp-video" src="http://player.vimeo.com/video/109354891?api=1" width="500" height="300" frameborder="0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    

  • HTML5

    Simple HTML5 videos don't need any preparations other than having the sp-video class.

  • Example:
    <video class="sp-video" poster="path/to/your/poster.jpg" width="500" height="350" controls="controls" preload="none">
        <source src="path/to/your/video.mp4" type="video/mp4"/>
        <source src="path/to/your/video.ogv" type="video/ogg"/>
    </video>
    

  • Video.js

    Each Video.js video must have a unique "id" attribute. Also, because the Video.js library changes the HTML markup of the video, we'll create a container element and add the sp-video class to that element instead. Also, the container element must have the data-videojs-id attribute, which is used to specify the 'id' attribute of the video.

  • Example:
    <div class="sp-layer" data-horizontal="0" data-vertical="0">
        <div class="sp-video" data-videojs-id="video1">
            <video id="video1" class="video-js vjs-default-skin" poster="http://www.videojs.com/img/poster.jpg" width="1170" height="400" controls="controls" preload="none" data-setup="{}">
            <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
            <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
            <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
            <!-- track will load subtitles (captions) -->
            <track kind="captions" src="path/to/subtitles/captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
            <!-- Additional paragraph if no javascript is enabled -->
            <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
            </video>
        </div>
    </div>
    

    Please note that, in order to use Video.js, you need to load the Video.js JavaScript and CSS files in your module. See Load Video.js parameters in "Video Options" section for more. More information about how to use Video.js, in general, can be found on the official Video.js page.


© 2017 Flex. All Rights Reserved. Designed By Aplikko.com