Layer Slideshow documentation

Introduction

Layer Slideshow provides a unique yet simple experience to create slideshow with multiple slides and 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.
On the main interface, on the left side you have access to a New button. Each new slideshow contains slides and layers options.

image7

If you don't have any themes, you can consult our sample themes. There are 5 themes available in total, please click Load Theme button to view. 

image8

Once you choose one, the center part will be reloaded with theme background, links and layers. The layers are groupped in the right panel.

image9

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


Under the slide, you can see Preview All Slides button and there are 3 devices (laptop/desktop, tablet, mobile) for you to check how your slideshow will look like.

You can also use Duplicate Slide or Add New Slide button on the right.

slide-button

Each slide contains Edit and Remove icon

image11

If you want to make your own slideshow, you can use buttons on the right panel. Please see the next chapter below.

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 slides has a background, you can load your own from your image library or use our Online 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 layer editor

You can create a new button layer by clicking + Layer button on the right panel. 

create-button

After filling the form, click Create layer button. A new button appears on your slide.

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.

image24

3.3 Image layer editor

You can create a new image layer by clicking + Layer button on the right panel. 

create-image

You can insert your own icon or picture in Image layer by clicking on Edit button to change them.

image26

Then you’ll be able to choose your own image or use an image from our JU Library or an icon from Icon Finder.

You can of course define position of each element from the preview using drag’n drop.

3.4 Video layer editor

You can add a new video layer by clicking + Layer button on the right panel. 

create-video

By clicking on Edit icon of the video layer, you can change video URL to the layer. It supports video URL from Youtube, Vimeo, Dailymotion.

edit-video-layer

3.5 Transitions

You can set the transitions for a slide or all slides in your slideshow. There are 2 types of transitions: 2D and 3D.

select-transitions

Each layers has Layer Transitions tab so you can choose style for them.

layer-transition

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