JUX Layer SlideShow

Created: 05/28/2015
Latest update: 05/28/2015
By: Joomlaux
www.joomlaux.com/
Email: contact@joomlaux.com

1.1. What is JUX layer Slideshow ?

Turn simple HTML markup into a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines). See the heaps of custom transitions/animations for each object on the page! Customize this slider with just a little HTML and CSS to your very needs.

This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects. All customization can be handled via jQuery Options, HTML 5 data-attributes and CSS!

1.2. Features

Image and Thumbs fully resizable
Using CSS Animation with FallBack to jQuery
Unlimited Caption Layers
Unlimited Slides
iPhone & Android Swipe Touch enabled
jQuery Conflict free plugin
Customizable 100% via Plugin Parameters / CSS / HTML
Easy installation
Special Easing
Example Pages included
Vimeo & Youtube Supported
Optional Shadows included
Hide Captions Separately or Together depending on Slider Width
Hide whole Slider Depending on Screen Width
10 Different Caption Animation Types
20 Different Slide Transitions, and Unlimited Variations due Rotation and Amount of Slots
Two Level Animations of Captions. Start Time, End time, Different Animation Type and Easing at Start and End
Captions for Video, Image and html tags can be easily Created
CSS3 Transitions with jQuery Animation Fall Back
Full Screen Video
Public API, such as stop, start, next, prev, jump to slide, event at video play, start and stop, events at slide change…
10 Different Examples included to know how the Features work

Frontend

Backend

3.1. Package

Package

pkg_jux_layerslideshow

3.2. Installation

Go to Administrator site / “Extensions”/ Extension Manager in the Top menu.

In “upload package file” block, please upload & install our extensions:

Figure 1: Extension Manager

3.3. Language Installation

JUX Layer Slideshow’s interface can be switched to different languages. Default language is English. To make JUX Layer Slideshow 1.0 able to run with different languages, please follow these steps:

Download & Installation new Joomla! Language File.
After installing your language, let say it’s “xx-YY”, you need to create the JUX Layer Slideshow language file to your language by:
- Copy this file: {site root}/language/en-GB/en-GB.mod_jux_layerslideshow.ini
- To: {site root}/language/xx-YY/xx-YY.mod_jux_layerslideshow.ini
Then translate it to your language.

Note: Sometimes you need to change the encoding type of language file to “UTF8 without Bom” (you can use notepad++ to change encoding type of the file).

If you want to change backend language, do the same with language in “administrator” folder.

Switch the global Language
- For Joomla! 3.x: go to “Extensions” => “Languages Manager”, select the language of your choice and make it “Default” by clicking that icon in the toolbar.

After you install package JUX Layer Slideshow, You need to perform these tasks as follow:

Step1: Go to Components /JUX Layer SlideShow and Create categories

Step 2: Create Slides( NOTE: with each slide you can add unlimited caption layer to display in frontend)

Input data for main information
Input data for display option
Create captions

Step 3: Go to Extension Manager/Module Manager/ module JUX Layer SlideShow

Select category you want to display
Choose property for the whole module.

4.1.1. Configure Categories

Categories are to classify the slides you have. When done setting categories, you can select to display at frontend the slides in certain category (View module to learn more).

Categories are subjects that items will be added to it.

To configure Categories, go to Component -->JUX Layer Slideshow -->Categories -->New

Figure 2:Main View

New/Edit Category

Figure 3: Configure for tab category

Title	The Tittle of category
Alias	The alias of category
Description	Category’s description
Parent	Parent of Category
Tags	Assign tags to content items. Tag names must be unique
Status	Set publication status
Access	The access level of group that is allowed to view this item
Language	The language that the category is assigned to

Figure 4: configure for tab Publishing

ID	Record number in the database
Hits	Number of hits for this category
Meta Description	An optional paragraph to be used as the description of the page in the HTML output. This will generally display in the results of search engines.
Meta Keywords	An optional comma-separated list of keywords and/or phrases to be used in the HTML output.

4.1.2. Configure Slides

Slides corresponding to each category will be displayed in gallery.

To configure Slides, go to Component --> JUX Layer Slideshow --> Slides --> New

Figure 5: Main view

Create New/Edit Slide

Figure 6: Configure for tab New Slide

Title	The title of slide
Image	Image of slide
Category	Set publication status
Ordering	Category for this item
ID	Record number in the database

Figure 7: Configure for tab Publishing

Publish up	An optional date to Start Publishing the slide
Publish down	An optional date to Finish Publishing the slide

Figure 8: Configure for tab Display

Data Transition	The appearance transition of this slide
Data masterspeed	Set the Speed of the Slide Transition. Default 300, min: 100 max:2000.
Data slotamount	The number of slots or boxes the slide is divided into. If you use boxfade, over 7 slots can be juggy
Data link	A link on the whole slide pic
Data Target	A link target (like _self or _blank .Default none)
Data Link to slide	If data-link=”slide”; is set, you can define a slide where to jump in case the image has been clicked
Data delay	A new Delay value for the Slide. If no delay defined per slide, the delay defined via Options will be used
Data thumb	An Alternative Source for thumbs. If not defined a copy of the background image will be used in resized form
Data fstransition	An Alternative First Slide Transition (only in the first loop, than data-transition will be used)
Data fsmasterspeed	An Alternative First Slide Transition Speed (only in the first loop, than data-masterspeed will be used)
Data fsslotamount	An Alternative First Slide Slot Amount (only in the first loop, than data-slotamount will be used)

Figure 9: Configure for tab Caption

Figure 10: Add new a caption

Title	Title of Caption. Displayed only in the backend.
Caption	You can embed image or video link from Vimeo/Youtube, or simply just text only.
Class example	Select the style for text displayed in the Caption
Incoming Animations	Class for Incoming Animations
Outgoing Animations	(only during the Slide). This is Optional. If not set, but endtime is set via data-end than the same animation type will be used as for incoming animation.
Data X	The horizontal position in the standard (via startwidth option defined) screen size (other screen sizes will be calculated)
Data Speed	Duration of the animation in milliseconds
Data EndSpeed	Duration of the animation when caption leaves the stage in milliseconds
Data Start	After how many milliseconds should this caption start to show
Data End	After how many milliseconds should this caption leave the stage (should be bigger than data-start+data-speed!
Data Easing	Special easing effect of the animation
Data Endeasing	Special easing effect of the animation
Video Auto Play	Auto play video when slide started
Nextslideatend	Auto next video when video finished

Tips and Warning

After creating slide, make slide's caption

You can add multiple caption layers to a slide. However, you need to click the button to save captions each time you add them. If you only click Save button of slide, data added to caption will not be saved.

You can change the properties in iframe tag such as width, height … to have the best look of the slide as you want.

You can’t use directly video link from YouTube/Vimeo, you need to do as follow:

Youtube:

Link Youtube:

Latest short format: http://youtu.be/YHWkro9-e9Q

Iframe: http://www.youtube.com/embed/YHWkro9-e9Q

Iframe (secure): https://www.youtube.com/embed/YHWkro9-e9Q

Object param: http://www.youtube.com/v/YHWkro9-e9Q?fs=1&hl=en_US

Object embed: http://www.youtube.com/v/YHWkro9-e9Q?fs=1&hl=en_US

Watch: http://www.youtube.com/watch?v=YHWkro9-e9Q

Ytscreeningroom: http://www.youtube.com/ytscreeningroom?v=YHWkro9-e9Q

More params: http://www.youtube.com/watch?v=YHWkro9-e9Q&feature=g-vrec

Input to Caption option

<iframe

src="http://www.youtube.com/embed/YHWkro9-e9Q?hd=1& wmode=opaque&controls=1&showinfo=0" width="460" height="259">

</iframe>

Vimeo:

Link Vimeo:

http://player.vimeo.com/video/29298709?title=0&byline=0&portrait=0

http://vimeo.com/29298709

http://vimeo.com/29298709#t=10

http://player.vimeo.com/video/29298709

Input to Caption option

</iframe>

4.2.1. Configure website template

You have many website template, each website template has many positions (that will display modules).

You need to:

Configure a template for JUX Layer Slideshow with proper positions.

Make the template to default

4.2.2. Configure for tab Module

Select Category	Select a category for this module, if you do not see any category, please go to JUX Layer Slideshow component and create a category and set up slide images first.
Load video.js	Load video.js form local
Slideshow Style	Type of slideshow module, It has 3 style: Responsive, Full-Width,Fixed and FullScreen
Delay	The time one slide stays on the screen in Milliseconds (Default: 9000)
Start Height	Basic Height of the Slider in the desktop resolution in pixel, other screen sizes will be calculated from this (Default: 490) It should be similiar to the settings of the style sheet. If you use a fullwidth banner, ti will deinfe the max. Height of the banner by resizing of the browser. The banner wont ne heigher than this value
Start Width	Basic Width of the Slider in the desktop resolution in pixel, other screen sizes will be calculated from this (Default: 940) It should be similiar to the settings of the style sheet. If you use a fullwidth banner, ti will deinfe the max. Width of the banner by resizing of the browser
Touch Enabled	Enable Swipe Function on touch devices
Stop Timer By Hovering	Stop Timer By Hovering
Hide Caption at Limit	It Defines if a caption should be shown under a Width Limit ( Basod on The Width of Banner ! )
Hide All Caption at Limit	Hide all The Captions if Width of Browser is less then this value
Hide Slider at Limit	Under this Limit the Slider is hidden and the timer is stopped
Stop at Slide	-1 or 1 to 999. Stop at selected Slide Number. If set to -1 it will loop without stopping. Only available if stopAfterLoops is not equal -1 !
Stop After Loops	-1 or 0 to 999. Stop at selected Slide Number (stopAtSlide) after slide looped x time, where x this Number. If set to -1 it will loop without stopping. Only available if stopAtSlide not equal -1 !
Shadow Display	The Shadow display underneath the banner
Show Timer	Show the timer countdown line on the slide. It is a progress bar on top/left of the slide when running
Timer Position	The timer countdown line position (Top or Bottom)

4.2.3. Configure for tab Navigation Options

Navigation Type	Display type of the navigation bar
Hide thumbs	Time after that the thumbs will be hidden(default:200)
Thumb Width	The basic width of one Thumbnail( only if thumb is selected. Default:100
Thumb Height	The basic Height of one Thumbnail (Only if thumb is selected Default: 50)
Thumb Amount	The amount of the Thumbs visible same time (only if thumb is selected) All Thumbs will be hidden in smallest Responsive level, and in smaller level default size is reseted to 60x30px. Can be modificated in the setting.css file)
Navigation Horizontal Align	Horizontal Align of Bullets / Thumbnails
Navigation Vertical Align	Vertical Align of Bullets / Thumbnails
Navigation Horizontal Offset	A value between -600 to 600 - Offset from current Horizontal position of Bullets / Thumbnails negative and positive direction
Navigation Vertical Offset	A value between -600 to 600 - Offset from current Vertical position of Bullets / Thumbnails negative and positive direction
Navigation Offset Horizontal	The Bar is centered but could be moved this pixel count left(e.g. -10) or right (Default: 0) ** By resizing the banner, it will be always centered !!
Navigation Offset Vertical	The Bar is bound to the bottom but could be moved this pixel count up (e. g. -20) or down (Default: 20)
Navigation Arrows	Display position of the Navigation Arrows (Default:”None”)
Navigation Style	Look of the navigation bullets (Default: round;)

4.2.4. Configure for Tab Arrow Options

Solo Arrow Left Horizontal Align	Horizontal Align of left Arrow (only if arrow is not next to bullets)
Solo Arrow Left Vertical Align	Vertical Align of left Arrow (only if arrow is not next to bullets)
Solo Arrow Left Horizontal Offset	A value between -600 to 600 - Offset from current Horizontal position of of left Arrow negative and positive direction
Solo Arrow Left Vertical Offset	A value between -600 to 600 - Offset from current Vertical position of of left Arrow negative and positive direction
Solo Arrow Right Horizontal Align	Horizontal Align of right Arrow (only if arrow is not next to bullets)
Solo Arrow Right Vertical Align	Vertical Align of right Arrow (only if arrow is not next to bullets)
Solo Arrow Right Horizontal Offset	A value between -600 to 600 - Offset from current Horizontal position of of right Arrow negative and positive direction
Solo Arrow Right Vertical Offset	A value between -600 to 600 - Offset from current Vertical position of of right Arrow negative and positive direction