Layer Slideshow documentation

Introduction

Layer Slideshow provides a unique yet simple experience to create slideshow with multiple layers in Joomla.

Layer-Slideshow-main

 

I. LAYER SLIDESHOW INSTALL

1.1 Install

Our component is Joomla 3.x compatible. All the features and 3rd party integrations are included in all memberships.
In order to install our component you have to download the extension .zip file and use standard Joomla installer.

image7

 

Then click on Browse > Upload and Install button, component, modules and plugins will be installed activated by default.

 

1.2 Update & automatic updater

In order to update the extension you can install a new version over the old one by downloading the ZIP file from JoomUnited or use the automatic updater (recommended).

image9

 

The automatic updater, which push the update notification, is embedded in the Joomla extension you've installed. So you'll get notified like any other extension in the dashboard or using the menu: Extension > Manage > Update menu.

 

Login to your account to update

You need to login to your JoomUnited account to update all your JoomUnited Joomla extensions. In order to login access the main configuration of the component then click on the Live update tab. At the bottom, you'll find a login button. 

image10

 

Enter your JoomUnited credentials, the same you use to login here @ www.joomunited.com

image11

 

The button will turn orange, congrats! you can now update all the JoomUnited extensions on this website! If your membership is expired you'll get a renew link and a text that explain that.

image12

 

Note: one single login will allow you to update all the JoomUnited extensions (regarding your membership). Login won't expire unless you disconnect it. 

 

 

II. SLIDESHOW THEMES

2.1 Slide creation

The main idea of Layer Slideshow is to be able to create a nice slideshow with layers without complexity. That’s why we included 5 themes and image libraries.
On the main interface, on the left side you have access to a New slideshow button. Each new slideshow contains slides and layout options.

image7

When you click on the slide, the center will be refreshed with the list of the 5 themes available

image8Once you choose one, the center part will be reloaded with theme background, links and layers.

image9

Note that each theme have a different layout number, theme 1 have 1 layer, theme 2 have 2 layers...


On the bottom part you have the live preview and buttons to clear all layers or reset default theme data.

image11

 

2.2 Layout settings

You can define a specific layout for each slideshow. It’s better to define the layout before starting the layer edition because it will determine the image width, text size, items position...

image12

 

The slideshow layout options are the following:

  • Responsive: Make your slideshow with adaptive element for mobile devices, all text, images will be dynamically resized regarding mobile devices
  • Align Slideshow: Align the whole slideshow
  • Width/height: Define the width/height of the slideshow. This is the most important parameter, because once its set, all the images you’ll put in the slideshow may be resized with our cropping tool to this dimension. If you change the size, you may need to update your images.
  • Duration: Define each slide duration
  • Button style: define navigation element style
To make a full width slideshow you have 2 options: set the width to “100%” or define a fixed full size, for example something like 1900px width.

 

2.3 Add a slideshow in your content

To add a slideshow in your content and put it online, you need to use the editor button. Load an article, a custom module or anything else and click on the Layer Slideshow button.

image13

Then choose a slideshow to insert

image14

 


III. SLIDE EDITION

3.1 Slide Background

Each slide have a background, you can load your own from your image library or use our JU Library.

image15


The Select button will open a lightbox with a media manager, this is an enhanced version of the Joomla media manager.

image16


It offers you options to drag’n drop new images, select, remove, fit or apply effects on images.

image17


The most important is the crop function. The crop function will load a window with your image and a frame that takes the size of the slideshow defined in the layout.

image18


Click on the Crop image button to insert the image cropped as a background.

 

3.2 Button editor

Each slide have an action button you can customize.

image19


The button manager will allow you to create your own button style, store it and reuse it later. Usually buttons are defined for all slides and should be reused.

image20


You’ll be able to create a style using the left side window tool then Insert/Save/Edit it. You have options to define background, border styles and mouse hover effect. 

image21

 

 

To insert a button into content, you have option to click on Insert button or + symbol of a saved button.

image22

You can also edit and save an existing style, just click on the pen and change parameters.

image23

 

Finally you can define a custom link for the button or make a quick link to a menu or an article.

image24

A popup will help you to choose the content to link to.

image25

 

3.3 Image layer edition

Each layer has to be edited separately. Put your mouse hove the preview will help you to find the layer to edit with a color effect.

image26

 

You can of course define position of each element from the preview using drag’n drop.
Then you’ll be able to choose your own image or use an image from our JU Library or an icon from Icon Finder.

 

IV. IMAGE LIBRARIES

4.1 JoomUnited library


JU Library is an external library we are hosting to give you nice and free to use images. All the images from our library will be downloaded and stored on YOUR server. So you can it as long as you want.
Library is accessible as long as your subscription is valid.

image27


The JU Library contains clipping path images (with transparent background) and background images. Use the check to select one or both.

image28

You can also make a tag search.

image29


Once you’ve selected an image you’ll be able to download it on your server, and to edit it.

image30

 

4.2 Icon finder integration

An icon finder integration is also available to load for example social networks icons.

image31


A search engine will then be opened

image32

You can make a request and also use size filtering system.

image33

 

Then, like in the JU Library tool you’ll be able to download your icon on your server. You also have size download options regarding the filtering defined before.

image34