VamTam Help Desk

Interface Tips

Ordering slides and layers

Your slides and layers are drag n' drop enabled, you can grab them to change their order. To reorder slides you can move the tabs itself; for layers you can use the handle icon on their left side.

Naming your layers

You can assign a unique name for your layers similarly to image  editors. It will help you to quickly find the contents you are looking  for, and it can improve your overall workflow when you are dealing with  complex sliders. You can click on the default name of your layers to  enter the one you would like to use.

Selecting layers

You can quickly select a layer just by clicking on it in the WYSIWYG  editor. This will opens the layer options in the layer list.

Positioning layers

Just grab a layer and move it around in the editor to set your  desired position. For accurate positioning, you can set the left and top values manually under the style tab of the layer. If you want to use  percentage values you should set them manually in the layer options.

Real-time preview

If you want to see your slides and layers in action, you can click on the "Enter Preview" button. This will embed a full-featured  LayerSlider, just like the ones on your front-end pages. To end the  preview session, just click again on this button "Exit Preview" and you  will get back the WYSIWYG editor.

If you aren't familiar with the available options, this feature can  be useful to test your settings and see which options are responsible  for which effect.

Backwards Compatibility

Old slide transitions are deprecated

We've removed the old slide transition settings from the admin  interface. Your previously created sliders will continue to work the  same as before on the front-end pages, but you won't be able to edit  them without choosing from the new slide transitions. Remember, we have  some very similar transitions, and you can always modify or build a  custom one with the Transition Builder.

Please note, we might completely stop supporting the old slide transition system in the distant future.

Old layer transitions are deprecated

In version 5.0.0 we have new layer transition options that offers  more complex and flexible animations. Your earlier sliders will continue to work the same as before without making any changes. The admin  interface, however, drops the old options in favor of the new system,  and your settings will be converted automatically. Since these new  options are working in a different way, your sliders might be slightly  different in some rare cases, but it should be super close.

Please note, we might completely stop supporting the old layer transition system in the distant future.

Layout and Responsive Mode

Normal mode:

You have to leave both Responsive and Full-Width settings disabled.  You can set the width of the slider in pixels or also in percentage  value, you have to set the height of the slider in pixels.

Responsive mode:

You have to enable Responsive and disable Full-Width settings. You  have to set both of the width and the height of the slider in pixels.  You should know that in responsive mode the given width and height  values will be the default starting values of your slider. In this case  you can create your slider as you would do it normally but if the slider is resizing, all of your image, embedded video and text layers will be  also resized and also repositioned of course.

Full Width mode:

You have to enable Full-Width and disable Responsive setting. You  have to set the width to 100% and the height of the slider in pixels. In this mode the slider will be as wide as your browser even if the width  of your document is smaller and the height of the slider will be fixed.  Layers will be not resized but they will be repositioned if the have  percentage values of left and / or top properties.

Responsive + Full Width mode:

You have to enable both Full-Width and Responsive  settings. You have to set both of the width and the height of the slider in pixels. In this mode the slider will be as wide as your browser even if the width of your document is smaller and the height of the slider  will be always proportional to the original ratio of width / height. Of  course layers will be resized and repositioned like in responsive mode.sublayers

To add a name to a sublayer just simply click on its default name and type the new name.

Mobile visibility

To completely disable the Layer Slider WP on low resolutions, please add the code below to the Custom CSS area:

@media only screen and (max-width: 767px) {

 #header-slider-container {

  display: none !important;

 }

}

Change the bolded number to choose when to hide the slider.

Here's a guide: http://support.vamtam.com/support/solutions/articles/200025

Layer options

*Content You can select what kind of content you want to use  here. You can use a static image, text, custom HTML or multimedia  contents. You can also choose to use dynamic contents from WordPress  posts and pages. It supports advanced filtering to get the entries you  need, and you include the part you would like to use in a layer such as  the title of a post or its featured image.

*Transitions The transition options you can set to customize  your layer animation. Move your mouse cursor over the option fields to  receive a detailed description about each available settings.

*Link Enter an URL to link layers to other pages. The link  behavior can be changed to open it within the current page or on a new  tab/window. You can also enter a hash tag followed by a number to link a layer to another slide. For example #3 will switch to the third slide  when someone clicks on this layer.

*Style Under this section you can customize the appearance of  your layers, such as changing the fonts or setting the size of images.  Please read the tooltip messages for more information by hovering over  the setting fields. You can also enter custom CSS code if there isn't an option what you are looking for.

*Attributes You can apply standard HTML attributes on layers  to make it easier working with them in CSS and JavaScript. It also can  be used to collaborate with 3rd party solutions like Lightbox plugins.

Dynamic Sliders from Posts

Using post filters

You can embed dynamic contents from WordPress posts and pages. With  using the post filters you can target specific contents to work with in  sliders. LayerSlider supports custom post types, tags, categories, and  taxonimies to find literally and kind of custom content that themes and  plugins may use. To set up the filter you need just select a dynamic  layer and click on the "Configure post options" button. In the opening  window you can also order the results in your preferred way.

Get the items from results to work with

The post filters are global across slides, but you can select items  from the results independently. This allows you to work with posts in a  custom order, for example you can retrieve only the even/odd posts from  the results. If you want to follow the original order you can choose the "following" option, and LayerSlider will get them automatically.

Using mixed contents

You are not forced to build sliders with dynamic contents only. You can mix them with static slides and layers.

Embedding videos

Embedding videos

LayerSlider works with many media players, but we support YouTube,  Vimeo, and (self-hosted) HTLM5 video and audio particularly. We've  integrated a lot of features for these solutions such as autoplay,  preview image, and pausing the slideshow while contents are playing.

Just choose the "HTML/Video/Audio" layer type to embed multimedia  contents. For YouTube and Vimeo videos you need to paste the embed code  from their website into the text field. Click on the "Add Media" button  to add self-hosted HTML5 video/audio.

Unsupported media players

We can't support every media player since other solutions have their  own distinct APIs to control media playback without a universal way.  However, users with web development experience can use the LayerSlider  API to detect slider events and run custom code to control 3rd party  media players. We have a dedicated section for the LayerSldier API in  this Help menu for more information.

Translation & Language support

Translating the plugin's user interface without a 3rd party solution

You can find the details about translating the plugin's user  interface in documentation that's included in the package you downloaded from CodeCanyon.

Creating multilingual sliders with the qTranslate plugin

qTranslate is the most easiest way to create multilingual sliders in  LayerSlider. It is a free and simple plugin that supports a  shortcode-like syntax to enter text in multiple languages, so it can  display the proper one for your visitors. LayerSlider supports  shortcodes and other special syntaxes in the contents of layers, so you  can enter something like this to create a multilingual slider:

[:en]English text[:de]German text

The line above will output “English text” if the visitor selected  English page and “German text” if the visitor selected German. You can  read more about qTranslate on their homepage.

Translating with the WPML plugin

You need a "Multilingual CMS" version of WPML with installed WPML String Translation add-on.

Translating the plugin's user interface:

Navigate WPML -> Theme and plugins localization

Select "Translate by WPML" option in "Select how to localize the theme" section.

In the newly appeared list of plugins, select LayerSlider and click "Scan selected plugins for strings" button.

Under WPML -> String translation menu item, you can now see and edit the texts that LayerSlider uses.

Creating multilingual sliders:

LayerSlider registers translatable contents in layers when you save  your work. If you want to translate a previously created slider, you  need to re-save it, even if you won't change anything. Once LayerSlider  registered the translatable contents, they will appear under the WPML  -> String translation menu item in your WP admin sidebar.

Other Features

Deep-linking

Since LayerSlider WP 3.0, you have an option to deep-link slides.  This means that you can give a special URL to users that will start  LayerSlider with the desired slide. To do that, you have to specify a  deeplink name in your Slide Options and use it as a reference in the  URL.

For example if you added the name for the deeplink field "surprise",  you can reference this slide with the URL  "yourdomain.com/yourpage/#surprise".

Event Callbacks

About events in programming languages

Many programming language supports events or notifications. The basic concept is that you can subscribe to these events and the application  will send you a notification or run some code when they accour, so you  will have a chance to do something you may want to be done in certain  points of your program. For example change the site's background when  the slider switching slides.

Javascript uses callback functions

In Javascript these events commonly used with callback functions.  Instead of sending and receiving notifications, you just pass an  anonymous function (also known as blocks in other languages) with your  own code to a function or method call as a parameter and the application will execute it when the time has come. LayerSlider uses this kind of  event handling.

Events in LayerSlider

So we now by now the technique about event handling, lets see which kind of event LayerSlider has:

cbInit: This event will fire when LayerSlider finished building up  the DOM and successfully loaded. If you want to do something with the  LayerSlider elements right on the start, you won't be able until  LayerSlider has loaded, you have to use this event.

cbStart: Calling when the slideshow has started.

cbStop: Calling when the slideshow is stopped by the user.

cbPause: Fireing when the slideshow is temporary on hold (for example by the "Pause on hover" feature).

cbAnimStart: Calling when the slider commencing slide change (animation start).

cbAnimStop: Fireing when the slider finished a slide change (animation end).

cbPrev: Calling when the slider will change the previous slide by the user via previous button, keyboard navigation, or touch control.

cbNext: Calling when the slider will change the next slide by the user via next button, keyboard navigation, or touch control.

A simple example of a callback function

This simple example will alert the user when LayerSlider changed a  slide. To do that we have to pass this function to the cbAnimStop event.

function() {

alert('The slider switched to a new layer!');

}

What's next?

If you want to achieve something with the event callbacks, you  probably instrested in our API. Please continue reading with the next  section of this document.

LayerSlider API

About application programming interfaces (APIs)

An API is a way to control an application, or get some info about the data which the application is working with. This is a way to two  separate application can work together. LayerSlider has an API too, you  can control the slider from outside of the application.

API methods

integer: The slider will change to the specified slide. It starts with 1.

next: The slider will change the next layer.

prev: The slider will change the previous layer.

stop: Will stop the slideshow.

start: Will continue or start the slideshow.

data: Will return all the data which LayerSlider is working with. For example you can identify which slide is showing currently, or which one will the next to show.

Using the API

To run one of the above API command, you have to call the LayerSlider jQuery method on the slider element and pass the command as a  parameter. WordPress uses IDs on each slider with the word  "layerslider_" and the number of the selected slider.

Example: jQuery('#layerslider_1').layerSlider(2);

This will switch to the second slide. If you want to use this with a link, you can use the following code:

<a href="javascript:void(0);" onclick="$('#layerslider').layerSlider(2);">to slide 2</a>

Working with LayerSlider data

The LayerSlider data object is a huge collection with all the  information you need. We don't have enough space here to list all of the properties you can work with, you have to check them manually. Here are the most important ones:

curLayer: The current slide DOM element.

curLayerIndex: The current slide index. Starts with 1.

nextLayer: The next slide DOM element.

nextLayerIndex: The next layer index. Starts with 1.

isAnimating: This property returns whether the slider animating or not with boolean.

layersNum: Returns the count of layers (slides).

Callback functions and LayerSlider API

When you request the LayerSlider data object with its API call, you  will have the information for that exact moment. When LayerSlider  working along, these informations may change or will be outdated. You  probably want to use this information in an exact moment, when something just happened, so you have to use the LayerSlider API and the callback  events at the same time. To do that, you can use a custom named variable in the callback function header section which will be filled with the  data object of LayerSlider. Here is an example of using both with the  cbAnimStart event:

function(data) {

alert('The next slide is: ' + data['nextLayerIndex']);

}

A more complex example

Here is a more complex example which show which things you can do  with our API. This example implement a custom navigation area for a  LayerSlider slider.

You can find this example here.

Transition Builder

About LayerSlider WP Transition Builder

Since version 4.0.0, LayerSlider WP supports various types of slide  transitions. The Transition Builder offers you an easy-to-use visual  editor to create your own transitions in your own liking.

Transitions created with this editor will automatically appear in list of the available transition when you are editing sliders.

Getting Started

Tooltips

We've included tooltips for every settings, just point over options  fields with your mouse to receive addition information. Please read them carefully, it will help you getting started with the available options.

Sample transitions

When you first open the Transition Builder, it will have some samples to help you to get started. We've included some really simple and some  more advanced transitions as well to demonstrate the plugin  capabilities.

About previews

We wanted to create you a super easy-to-use visual editor, so we  included a real-time preview feature. Just click on the "Enter Preview"  button, and it will immediately show you the result based on your  settings. This way you can easily determine which settings responsible  for which effect. Keep playing with the settings and you will discover  almost unlimited possibilities.

3D Transitions

Animation steps

The 3D transitions are made up with 3 animation steps to create  more-complex transitions with multiple actions. The "animation" step is  required, but the "before animation" and "after animation" steps are  optional. You can use them to do some preparation before the animation  starts or restore back some settings after it is done.

To help you understand what are these steps, here is a simple example:

• Before the animation starts, you may want to scale down columns
  
• Then rotate them to left
  
• Finally, you want them to scale up back
  

If you want a really simple transition, you don't have to use all the steps. In this case, please make sure to untick the "Enabled"  checkboxes for the corresponding steps.

Easings

Easings are timing functions of the animations, you can manipulate the objects movement with it. 

Troubleshooting

1. Responsive buttons in the slider on low resolution:

When creating the button, make sure that its font-size is set to 1em

Then, in the button's styles tab set the intended initial font-size. After that the button will be resized based on the slider width.