Klixo webbdesign och utveckling - Documentation Klixo Slideshow Plus! module for Joomla
Creative web design & development

Make some web!

klixo articleslideshow icn48Documentation Klixo Slideshow Plus! module for Joomla compatible with Joomla 2.5compat 30Joomla module

Module current version: 2.2.1

This document lists all the settings available in Klixo Slideshow Plus! module administration interface and describe their functionality.

Module version

Read Only setting that displays the installed version of the module and gets information about latest available version from update server. A link appears when a more recent version is available for download.

Download ID

Optional. You can enter here the download ID you received when you purchased a subscription for Klixo Slideshow Plus! .
The module remains fully functional without download ID, but you may not be able to access automatic updates during the validity of your subscription.

General settings

Module Class Suffix

A suffix can be applied to the CSS class of the module. This allows for individual module styling.

Include jQuery Library

This setting controls the loading of the JQuery Library on the pages where the module is published. Klixo Slideshow Plus! module needs JQuery 1.8 or above to function properly.
With this option selected, it will load jquery-1.10.2.min.js when running on a Joomla 2.5 installation.
On Joomla 3.x sites it will use the version of jQuery that ships with Joomla.
Keep this option checked, unless your Joomla template, or another module already loads a compatible jQuery library.

Slideshow width

The width of the slideshow module, as it will appear on the page. Default units are pixels (px). You can also specify the width in percentage (important if your template uses a responsive layout) by adding % after the value entered. If no valid units are specified, pixels will be used as width units.

Slideshow height

The height of the slideshow module in pixels, as it will appear on the web page.
You can type auto (or select auto height in the following setting) to enable Slideshow auto height adjustement.

Auto height

The "Auto height" option allows the slideshow module to automatically adjust its height according to the size of the tallest slide. The height is also adjusted dinamically when the browser window is resized.
Note: When this option is selected the slideshow height parameter is ignored.

Slideshow background Color

Adjust the background color for the slideshow module. You can leave this field empty to have a transparent background. (On Joomla 2.5 installations you must type none to make the background transparent).

Slides background Color

Adjust the background color for the slides. You can leave this field empty to have a transparent background. (On Joomla 2.5 installations you must type none to make the background transparent).

Content source

Select which component (K2, Joomla Articles or both) to use for the content of the slides.
Note: K2 component MUST be installed in order to use K2 content in the slideshow.
More information about K2 component is available here.

Joomla Articles settings

Number of Joomla slides

Maximum number of slides to create from the Joomla articles found in the selected Joomla category(ies).

Joomla Articles categories

Select one or several Joomla categories of articles to use for the content of the slideshow.

Articles Intro image

Select to display article introduction image in the slideshow.
Note: This setting has no effect on the images inserted in the text of the articles.

Resize Intro images

If resize Intro images is selected, the slideshow will create thumbnails to the dimensions specified in the settings below for each Article introduction image and each K2 item image (when custom size is selected for K2 image size).
Important! This setting and has no effect on the images contained inside the text of the articles or K2 items.

Process plugins

This setting lets you if content plugins are processed before displaying articles in the slideshow module.
If set to NO (default setting), the articles content will not be modified by Joomla plugins before display.

K2 content settings

Number of K2 slides

Maximum number of slides to create from the K2 items found in the selected K2 category(ies).

Select one or more categories

K2 category(ies) to use to create the slides.

Show K2 image

Show K2 image in the slideshow.

K2 images size

You can use one of the predefined K2 images sizes or define a custom size using the Image Width and Image Height settings below.
Note: You can adjust the values of the predefined K2 images sizes in K2 component parameters.

Content settings

Image Width

The width of the article introduction image thumbnail or K2 image the slideshow module will display.

Image Height

The height of the article introduction image thumbnail or K2 image the slideshow module will display.

Image position

Adjust the position of the image on the slide. (Top, left, right, bottom or behind the text).

Image margins

Specify the margins around the image.
You can use standard css units (px, %, em) and notation (top, right, bottom, left), or one single value to apply identical margins around the image (eg. 10px or 2em).

Content filter

Select to display all articles / K2 items, only featured articles /K2 items or without featured articles /K2 items.

Sort Method

Select how to sort the slides to create the slideshow.

  • Ordering (will follow Joomla article manager ordering)
  • Article title
  • Creation date
  • Modified date
  • Random order (Articles will be sorted randomly each time the slideshow launches on a page)
Ascending/descending

Select ascending or descending for ordering slides:
Alphabetical order or reverse alphabetical order for article title, Most recent or oldest for creation date or modified date.

Display Title

Display or hide the title of the slide (Corresponds to the title of the Joomla articles or the title of K2 items).

Title alignment

Controls the text alignment of the title on the slides: Left, Right or Centered.

Title text color

Click on the color icon, or type an hexadecimal value in the text field to adjust the color of the title in the slides.

Title text size

Adjust the size of the title text. Default units are pixels (px).
You can specify which unit to used (px, em, %, pt) in the field after the numeric value like 12px, 0.8em or 80%. If no valid units are specified, pixels will be used.

Title max Length

Maximum number of characters for the title to be displayed. (Titles longer than the value entered in this field will be truncated).

Title link

Adds an hyperlink to the title. (The hyperlink will open the article or K2 item corresponding to the current slide).

Link target

Choose if you want to open the article in the same window or a new window/tab ( corresponds to "_blank" html target ).

Content text color

Click on the color icon, or type an hexadecimal value in the text field to adjust the color of the content.

Content text size

Adjust the size of the content text. Default units are pixels (px).
You can specify a unit (px, em, %, pt) in the field after the numeric value like 12px, 0.8em or 80%. If no valid units are specified, pixels will be used.

Text margins

Specify the margins around the text.
Use standard css units (px, %, em) and notation (top, right, bottom, left) for the value of the margins, or one single value to apply identical margins around the text (eg. 10px or 2em).

Content text filter

Controls how text is filtered before insertion in the slides.

  • Preserve HTML formatting: Text from the articles or K2 items is not filtered.
  • Clear HTML, keep images: All html tags are removed except (img) images tags.
  • Raw text: All html tags are removed.
Content max Length

Enter maximum number of characters allowed for the text content. Content longer than the value entered here will be truncated. Leave empty if you don't want to use this setting.
Important! This function also removes all html formatting including images tags embedded in the content and will override "Content Text filter" settings.

Display "Read more..." link

Display a "Read more..." link at the bottom of each slide. The link will open the article or K2 item used for the current slide.

"Read more..." text

Text to display for the Read More... link.

Menu Item link

By default when users click on Read more... (or on the title of the article / K2 item if Title Link option is selected) the full article or K2 item will display on the current page.
This powerful setting let you choose to open the article  or K2 item shown in the slide to a different menu of your site. When clicking on "Read more..." or on the title, the articles or K2 items will open in the menu selected here.

"Read More..." color

Click on the color icon, or type an hexadecimal value in the text field to adjust the color of the "Read More..." link.

"Read More..." hover color

Click on the color icon, or type an hexadecimal value in the text field to adjust the color of the "Read More..." link on mouse over.

"Read More..." text size

Adjust the size of the "Read More..." text.
You can specify a unit (px, em, %, pt) in the field after the numeric value like 12px, 0.8em or 80%. If no valid units are specified, pixels will be used.

Animation & effects settings

Transitions

Select one or more transition(s) effect(s) to play when changing slide.
Note that CSS3 and 3D CSS3 transitions are not compatible with all browsers.
All versions of Internet Explorer (including version 11) will fail with 3D transitions. Internet Explorer 9 and below are not able to display any CSS3 transition!
When the detected client's browser is not compatible with the selected transition, A compatible (and if possible visually similar) transition will be used instead.
Klixo Slideshow Plus! module currently ships with 20 different transition effects. Even more cool effects will be added in future versions.

Standard transition effects

  • Fade
  • Fadeout
  • None
  • Horizontal scrolling
  • Vertical scrolling
  • Vertical tiles
  • Vertical blinds
  • Horizontal tiles
  • Horizontal blinds

CSS3 and CSS3 3D transition effects

  • Fade Scale up (CSS3 Fx)
  • Fade Scale down (CSS3 Fx)
  • Horizontal flip (CSS3 Fx)
  • Vertical flip (CSS3 Fx)
  • Toss in (CSS3 Fx)
  • Toss Out (CSS3 Fx)
  • Cube (3D CSS3 Fx)
  • Horizontal flip 3D (3D CSS3 Fx)
  • Vertical flip 3D (3D CSS3 Fx)
  • Rotate 3D (3D CSS3 Fx)
  • Unfold (3D CSS3 Fx)
Slide duration

Adjust how long (in seconds) each slide will stay on screen. Decimal values like 1.5 or 3.2 seconds can be entered.

Transition duration

Duration (in seconds) of transitions between each slide. Decimal values like 1.5 or 3.2 seconds can be entered.

Navigation settings

Swipe

When selected, this setting enables drag and swipe functionality on IOS and Android devices.

Pause on mouseOver

When selected, this setting pause the slideshow on mouseOver.

Pause on Window blur

Pause the slideshow when the browser window or tab loses focus. This setting is useful to preserve processor resources on the client's browser.

Navigation arrows

Display previous and next arrows on left and right sides of the module. The navigation arrows appear when the mouse overs on each side of the slideshow.

Pager buttons

Displays a list of numbers, dot icons or article titles for each slide in the navigation bar. If you have many slides in your slideshow, you may choose "none" (no pager) to keep the layout clean.

Pager text size

Enter the size of the text for the navigation links.
You can specify a unit (px, em, %, pt) in the field after the numeric value like 12px, 0.8em or 80%. If no valid units are specified, pixels will be used.
Note: This setting has no effect when Dots are selected for the pager buttons, as dots have a predefined fixed size.

Pager text color

Click on the color icon, or type an hexadecimal value in the text field to adjust the color for the navigation links.

Pager hover text color

Click on the color icon, or type an hexadecimal value in the text field to adjust the mouseover color for the navigation links.