ZT Layer Slider Guide

Introduction


Current Version 1.2.1 Released Sep 12, 2014

Thank you for downloading our ZT AutoContent! We hope this Manual is a little help but if you have more questions so you should open new ticket at our Helpdesk to get more help!

ZT Layer Slider is the most advanced Joomla Slider Module, developed by a group of enthusiastics programmers and developers of Zootemplate.com. With this new Joomla extension, you can create your own impressive sliders with many layers and cool transition effects.

Compatibility: Joomla! version 2.5 & 3.x.

Some Features

  • Image and Thumbs fully resizable.
  • 20 Different Slide Transition, and Unlimited Variations due Rotation and Amount of Slots.
  • Layouts like Full Screen, FullWidth – Auto Resposive, Custom Responsive and Static Fixed.
  • Align of Layers with simple Settings.
  • Image and Thumbs fully resizable.
  • Using CSS Animation with FallBack to jQuery.
  • Unlimited Caption Layers.
  • Captions/ Layers like Video, Image and html tags can e easily Created.
  • Unlimited Slides.
  • iPhone & Android Swipe Touch enabled.
  • jQuery Conflict free plugin.
  • Customizable 100% via HTMl and CSS.
  • Easy installation in your Website.
  • Special Easing.
  • Video & Youtube and HTML5 Video Supported.
  • Full Screen Video with Autoplay function.
  • Stop AutoPlay during Video Playback.
  • Optional Shadows included/
  • Hide Captions Separately or Together depending on Slider Width.
  • Hide whole Slider Depend on Screen width.
  • Countless Art of Transaction Types.
  • 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 ar Start and End.
  • Public Api, like 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,s offset of navigation elements easy customizeable.
  • Sharp Edged of BG Caption Backgrounds Automatically calculated.
  • Helper functions, like scroll under slider, rekurisve depth of responsivity etc.

ZT Layer Slider with its super friendly ackend and amazing design is a great tool to showcase your images on your Joomla! website

1. Installtion Guide


In this document, we will step by step instructions for installing and using ZT Layer Slider effectively. You only need to take a few quick steps:

1. 1. Download extension package


  • Extract or Unzip mod_zt_layer_slider_[version].zip file to your desktop and you can see a package calledmod_zt_layer_slider_v1.2.1.zip.

1. 2. Install extension package


  • Log into your Joomla 2.5 or Joomla 3.x Administrator section.
  • In the top menu, click on Extensions and then select Extension Manager.
  • In the Upload & Install Joomla Extension, click Browse then find the file you just download (mod_zt_layer_slider_v1.2.1.zip) in step 1 above. After you have selected this file, click the Upload and Install button.

upload and install

This will install a component and a module for you in one installation.

When your ZRT Layer Slider Package has been uploaded and installed successfully, you will see a confirmation message:

installing success

2. Extensions Usage Guide


2. 1. Overview


overview

  • Module: This box gives you permissions to do general settings and add or delete the slider.
  • Menu Assignment: You can choose which pages you module can appear: On all pages, No pages, Only on the pages selected or On all pages except those selected.
  • Module Permissions: This helps you manage the permission settings (Delete, Edit, Edit State) for the user groups.
  • ADD JQUERY: If you are using Joomla! 2.x, it is better for you to add Jquery.
  • Items Slide: Creating, modifying or deleting slides inside a slider can be done here.
  • Advanced: This box consist of some advanced settings for you to edit: Module Tag, Bootstrap Size, Header Tag, Header Class, Module Style.

We are going to give some more details below so please follow these steps to configure and use new ZT Layer Slider effectively :

At first, to manage your own Sliders, you have to go to Module Manager

In the top menu, choose Extensions > Module Manager then click on ZT Layer Sliderto open configurable area.

module manager

There are a few specific settings that you should use when using the ZT Layer Slider of our Zootemplate

2. 2. Add, Remove and Option Slider


With ZT Layer Slider, you can now add, remove and even option a custom Slider to any or every page on your website. Easily, you can do all of these tasks in Module section. Written instructions and screenshots are outlined below:

2. 2. 1. Add/ Remove a slider:

Add or remove a slider is within seconds just by clicking on Add Slider or Delete button at the bottom of the page.

2. 2. 2. Option:

There are a few specific settings that you should use when using the ZT Layer Slider of our Zootemplate:

a

1 – Select an Slider: Choose the slider you want to interact with.

2 – Tittle Slider: Enter the title of the slider (please do not use special characters or spaces here, this defines the shortcode for you to use in you content).

3 – Slider Type: Can be Fixed (not responsive, fix dimentions), Responsive (changes depending on the size of its max, sizes given later in relation to the screen size) or Fullwidth (always 100% in width of the screen size, but height keeping the aspect ratio).

4 – Touch enabled

5 – Stop on Hover

6 – More options: Here you can:

  • Slider: Specify the width, height and Shadow of the Slider
  • Thumbnails: Edit the size (width, height) and mount of Thumbnails
  • General: Set time for delay, Stop after loops and Stop at slide
  • Navigation: Choose arrows and style for the navigation. You can also set hide thumbs, offset Horizontal and offset Vertical.

2. 3. Add, Remove, Option Slide


When you want to add, remove or modify slides inside a slider, have a click on Item Slide section.

2. 3. 1. Add/ Remove a slide

Please choose the Add Slide or Delete Slide button provided as the image below to add or discard a slide.

2. 3. 2. Option

There are some things you need to consider to have attractive slides:

abc

1 – Select Slide: Select the slide you want to work with.

2 – Title Slide: Fill in the name for the slide.

3 – Transition: There are a lot effects for slides’ appearance here. You can choose the ones you like to apply to your slides.

4 – Slot Amount:

5 – Master Speed:

6 – Data Thumb: Apply the thumbnail to a corner of each slide.

7 – Data Slide: This section helps you to upload the background for the slide. To achieve this task, please follow these steps:

  • Click on Select button and a pop up window turns up.
  • In the popup window, you can upload your picture by choosing a picture from your computer, then select Start upload button.

You also can browse the previously uploaded pictures on the Media Library tab or insert Image URL. Choose a picture, and click the Insert button.

3

2. 4. Add a Layer (Text, Image, Video)


ZT Layer Slider provides many types of layer, for example Text, Image, Video (ZT Layer Slider works with two most popular sites: YouTube and Vimeo).

  • In case of a text layer, click the Add Layer button, and then set your text.

text

  • If you choose Image as a type of layer, click into the input of Image and upload an image or choose it from Media Library. After that you can add a link to this sublayer if you want.

image

  • You can also add a layer video by clicking into the input of Video Add Video. A new popup window will appear, you choose the type of video, enter your Video ID and set the size for that video. Click the Add Video button if you are ready with this choose.

add video

How to get a Youtube Video ID/Vimeo Video ID:

  • YouTube URL looks something like: http://www.youtube.com/watch?v=VgogBgKIj7w

The video ID is the part between v= and & of the video’s URL. So Youtube Video ID = VgogBgKIj7w

  • All the vimeo video urls look like: http://vimeo.com/29474908

The ID is 29474908

Then, go to Layer Params and set your layer video:

After that, click the Save & Close button to save your changes.

2. 5. More options


2. 5. 1. Show title, Position and Status

In the right column, make sure to set the following:

position

2. 5. 2. Start Publishing, Finish Publishing, Access, Ordering, Language

You can also set the Start Publishing, Finish Publishing, Access, Ordering and Language

publish

After that, click the Save & Close button to apply your changes.

2. 6. Configure the Extension


You have installed ZT Layer Slider Module but it is still not enabled so you need to enable them to use.

2. 6. 1. Enable the Module


  • Go to Extensions -> Modules Manager. And Publish the ZT Layer Slider module that was installed.
  • Click on the ZT Layer Slider module in the list below:

extend

  • Dont forget to Save &Close to apply your changes.

3. Frequently Asked Questions


ZT Layer Slider is an easy-to-use extension, equipped with various features.

A: Please login to your ZooTemplate account and create a new ticket in Help Desk System. Our staffs will be there to assist you and get the problem solved.

4. Support Us


We want to know if you are happy, unhappy, or disappointed with something the feature has done, or if you have a suggestion about how we can do something better.

All feedback will be taken seriously and treated confidentially.