Version 3.1 © Copyright - codextrous.com
This is user documentation of Joomla! module B2J Aquarius Layer Slider. Document describes module requirements and installation and how to use it.
B2J Aquarius Layer Slider is a fully responsive slide-show module for Joomla 3.x, with sleek design an user-friendly back-end. The module can be used for creating amazing slide-shows and displaying images on your Joomla website with a wide range of customizable impressive layer effects.
Requirements & Installation
- PHP 5.3+
- MySQL 5+
- Joomla 3+
- K2 Component (Latest)
- Please note, that before the process of module installation you have to install the K2 component and to create categories in it to handle K2 items with module then.
- In case you are facing problems with K2 component or its installation, please check the K2 Documentation.
- Download install-able kit from Product Page.
- Go to your website's admin panel => Extensions => Extension Manager.
- Upload the downloaded kit and click on install.
To upgrade the module, you just need to install the new version kit on your existing setup. Need not to un-install the previously installed version.
Important: If you uninstall the module you will lose all the settings you have.
How to use it?
B2J Aquarius Layer Slider is extremely easy-to-configure. Let us go to its Basic Settings First.
1. Basic Settings
Here’s the review for all button elements in Basic Settings
Module Class Suffix - Allows to choose the suffix to be applied to the CSS class of the module. This will allow you to apply individual module styling.
Data Source - Allows to choose the data source to handle items. We have chosen K2 category. Here is the list of all available sources
*Note: If you choose the Folder option, you have to go to your Joomla’s root_folder / images / bang2joom / b2j_aquarius_layer_slider / and create a new folder called 'your_slideshow_name'. Now you may add all your images to your_slideshow_name folder and refresh the modules back-end and choose 'your_slideshow_name' folder as a source of your images. The “Title” of the image will be the name of the image file without its extension’s name(.jpg,.png,.gif, etc..).
Hint: you are able to add unlimited folders in your Joomla’s root_folder / images / bang2joom / b2j_aquarius_layer_slider/ and have different slideshows on your frontpage.
K2 Filter- Here select either ‘All’ items or activate ‘K2 filter’ to filter and choose items from already created categories.
Select to or more K2 categories- Choose the K2 category/categories/ here. The module will use the data from selected category/categories/ in the slide-show.
Inherit items from children categories- This button is used to allow or not inheriting images from K2 subcategories/children categories/ selecting ‘On’ or ‘Off’ respectively.
Order By- Use it to choose the order of displaying items. We have chosen ‘Random’. Here is the list of all options
Max Number of Items - Choose the maximum number of displaying items here.
Preset - Allows you to choose the preset of slide show. We have chosen Aquarius. The all available presets are
These uniquely styled presets are from B2J Aquarius , Albumen and Food - Mood templates respectively.
Control Buttons- You can activate or deactivate ‘Control’ buttons on the slide-show choosing ‘On’ and ‘Off’ respectively here.
Pagination- You can activate or deactivate ‘Pagination’ buttons on the slide-show choosing ‘On’ and ‘Off’ respectively here.
Control Buttons/Pagination Color- Here you can customize the color of activated Color/Pagination buttons
2. Container Settings
It is used to modify the look of slide-show’s container. See what we have when we choose this tab
As you can see, the appearance of slide-show’s container is fully customizable. You can easily change the way the container looks by adjusting the width and height of the displaying images, the padding, the border and the margins. Note that the Container’s Border Color is also customizable.
At first you can see that the Layers preview is empty and all the K2 fields are marked with '+', which means they are available to add on the slideshow as a layer.
Now you’ll see how it works! For example, when you click '+' in the Title button you add the Title layer to your slideshow. When added, you are free to customize all the settings of the layer, including the animation type, effects, duration, as well as changing the style of the layer(font size, color, etc…) and the position(ex. top 10%, left 40%) of the layer.
Please use the method above to add all the layers you need on your slideshow and start playing with them by dragging them across the layer’s container.
By modifying these settings you can change the appearance of displaying item’s titles in the slide-show. Let’s see what options we have here.
Animation speed- Allows you to change the duration of animation chosen for the slide (in milliseconds /ms/ 1 millisecond= 1/1000 second)
Delay- Controls the time when the next slide will begin (in milliseconds)
Layer in- Chooses the way how the next coming slide appears. The options available are:
For example, if you choose 'From Right' the next slide will appear from the right, then, after chosen time of delay, the previous slide will disappear. 'Random' option will choose the "Layer In" effect itself on a random pattern.
Layer In Effect - Customizes the easing effect of the animation for the next coming slide. Various CSS easing options are available here, to choose the transition type most suitable for your web-project you can take a look on Easing Functions Cheat-Sheet .
Layer out- Chooses the way how the previous slide disappears, before the next one comes. The options available are the same as for Layer In.
Layer Out Effect- Customizes the easing effect of the animation for the disappearing slide. The options available are the same as for Layer In Effect.
Font size - Controls font sizes of the titles on the slideshow
Font Style - Controls the font style of the titles on the slide show / Bold, Italic, Underline/
Font color- Allows to customize color of the titles on the slideshow with a color picker.
Background Transparency- If you choose this option, the titles will appear on the slideshow without a background image.
Background Color- Allows you to customize the color of the title’s background, if “Background Transparency” option is not selected
Top, Left- Allow to control the position of the title on the slideshow. You can choose the position manually, adjusting position of the title in relation to the whole slide in percents, or just drag the title to the desired position in the preview screen.
Width- Controls the width of the title in percents in relation to the whole slide
Link- You can make your titles clickable or not, by selecting ‘On’ and ‘Off’ respectively in this option
Limit- This option allows to control the displaying part of the title. If your titles consist of more than one word, just put the number of the words you want to be displayed in the number box next to Limit button. You can choose Chars instead of Words, and limit the number of displaying characters.
Ends with- Choose the ending of the titles. Options available are None, one dot (Lorem.), three dots(Lorem...)
Please note that you are able to remove or to modify already added layers, by clicking the “X” or “Edit” button next to its name.
The next button in Layers tab is Category. If you want the Category name to display on the slide, click on '+' next to the Category button. The options available are the same as for the Title.
The options for Introtext are also the same as for Title and Category.
Let’s go to the Date button. Clicking on '+'you’ll open this form.
As you can see, the only options of Date Settings which are different from Title and Category Settings are the following:
Date Type- For choosing the desired type of displaying date. Available options are on the picture below.
Date Format- To choose the format of the date. Available date formats are on the picture below.
For example 12 of March, 1995 in the chosen format will appear as 12.03.1995.
If you choose custom, the extra box will open, where you can put the desired format of the date.
For the next buttons Author and Fulltext the options available are also the same as for Title and Category. Editing these settings you can control the way Author name and Fulltext appear on the slide.
You can put additional text on the slide choosing Read More option. Add your text in Read More Text form and adjust the settings to control the style of this item of the slide.
Tags- Add the K2 Tags to the slideshow. The settings here are absolutely the same as for Title, Category etc. The only thing that differs is the option to select the Max Number of Tags displaying.
Background- Allows you to choose and customize the background of the slideshow. Clicking on this button you will see the following
4. Background Settings
In Background Settings you can modify the Background Type. The options available here are the following
Note you can set a custom image, custom color or the K2 Image for the slideshow’s background.
The other options in this setting are the same with Title, Category etc.
Note that for each modified settings you can have the quick preview of the changes made, clicking on the 'Preview All' button before saving.
The next selected tab is Slider Settings.
Here you can put the slideshow on Autoplay, choosing 'On' or allow only manual sliding with 'Off'. In case of choosing Autoplay, adjust the delay between the changing slides in Autoplay Delay/milliseconds/.
The tab selected is External Files.
In this tab you are able to enable or disable the default CSS of B2J Aquarius Layer Slider, jQuery library and to set it to be handled from the local server or from the Google’s remote server.