JUX Metro Contents

1.1.         What is JUX Metro Contents

JUX Metro contents is a responsive Joomla module which supports sliding image, display title and short description in each tile.

Metro layout is designed to help you view multiple contents at once. This module also support 2 images for 1 item in each tile in order to animate images within the tile.

With JUX Metro contents, you can retrieve content from Joomla, K2 or image folder.

There are various effects for each item such as flip, carousel, slide, static, random.

You can easily style for your metro layout by choosing the number of rows, and column (you can display maximum 4 rows and 4 columns).

It offers 3 effects for slider options which are slide, fade, and coverflow. Auto play, transition speed, keyboard control, loop, etc are other options for slider which you can freely control over the backend.


1.2.         Features


Screen_frontend Screen_frontend Screen_frontend
Screen_backtend Screen_backend Screen_backend

3.1. Server Requirements

JUX Metro Contents has several system requirements as follow:

You have to ensure that your system has already installed, XML and Zlib-Support built into your PHP.

PHP should be compiled with support for https (openSSL) and cURL.

PHP Safe Mode should be turned off.

3.2. Client Requirements

 JUX Metro Contents can run well on major browsers such as : Internet Explorer (version 10+), Firefox, Chrome, Opera 9+, and Safari. JavaScript must be activated.

The client/browser needs to be capable of accepting Cookies and Cookies must be enabled.


4.1. Download

After purchasing our product, you’ll see the download link at JUX Metro Contents product page: http://www.joomlaux.com/download.html

Note: If there is any problem, please contact us via Support: http://www.joomlaux.com/forum/index.html

4.2. Package

The installation package that you downloaded to your computer. You’ll see these files:



4.3. Installation

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

Browse the JUX Metro Contents folder, select mod_jux_metro_contents.zip then choose upload and install

Figure 1: Extension Manager

Figure 2: Configure for Joomla Source

Figure 3: Configure for K2 source

  Figure 4: Configure for Image Folder

In this tab, you can choose source for metro contents display at frontend as Joomla, k2 or image folder. You can insert number, show/hide description of item.  Or you can select order items from list as Hit, random, Alphabetical….


Select source for metro contents


Select Joomla categories( NOTE: If you choose Joomla source)

K2 category

Select K2 category(NOTE: If you choose Source is K2)

Items Count

Insert number of item to display at frontend(NOTE: If you choose Joomla or K2 source)

Order By

Select order items from list (NOTE: If you choose Joomla or K2 source)


Show/Hide description

Description Max Chars

Insert max character of description(NOTE: If show description)

Title Link Target

Select title link target


You can set effect for your slide, insert time for slide speed and enable or disable for Auto play slide, use Keyboard control or select start slide …

Figure 7: Tab Side Option



Select effect for slide

Auto Play

Can Enable/Disable Auto play

Side Speed(ms)

Insert time for slide speed(calculate by millisecond) (NOTE: If choose auto play you must insert time to next slide)

Transition Speed(ms)

Insert time for transition speed (calculate by millisecond)

Keyboard Control

Enable/Disable keyboard control

Mousewheel Control

Enable/Disable Mousewheel Control


Enable/Disable Slide Loop

Grab Cursor

If you use grab cursor pagination, you can’t click able


Show/Hide Pagination (NOTE:unable to display on small screen)

Pagination Clickable

Enable/Disable pagination click able (NOTE: If you turn on Grab Cursor)

Start Slide

Select start slide. (Note: first slide is 0 and continuous…)


You can easily style for your metro layout by choosing the number of rows, and column. Choose style for your metro as Static, slide, random…. You also can enable /disable pause when hover. 

Figure 8: Tab Layout & Metro Style


Number of Rows

Select number of rows

Column of Row(n)

Select column of row(n)

Metro Style

Select Metro style include: Static, Random, Slide, Carousel, Flip.

Metro Direction

Select direction for metro style (NOTE: If you choose Carousel style)

Animation Direction

Select animation direction (NOTE: if you choose carousel style)

Pause On Hover

Enable/disable pause on Hover

Start Time(ms)

Start Time between 2 image




Figure 9: Tab Style

You can set height for image and use margin between images. Moreover you can custom CSS if want.

Image Height(px)

Insert height of image

Image margin

Enable/Disable Image margin

Custom CSS

Insert custom CSS code


You can refer frontend of JUX Metro Contents as showing below:

Figure 10: Metro Contents

Figure 11: Metro Contents for K2 source


Figure 12: Metro Contents for Joomla source

Figure 13: Metro Contents for Image folder source


Step1: Create categories for Metro Content.

Go to:…/ Content/ Category Manager/Add New Category

Figure 14: Create new category for Joomla


Step2: Create articles for Metro Content

…/ Content/ Articles Manager/ Add New Article

Figure 15a: Create Articles of Joomla

You can write description by html as showing at the picture below:

Figure 15b: Create Article wrote by html


You can choose image display in tab Image and links as image the below (Note: You can choose same or different images in 1 item):

Figure 15c: Upload image for Joomla

Step1: You can create categories and article for K2 same as Joomla, that has been said above.

Step 2: In article of k2. You can choose front side image and backside image in one item. (Note: You can choose image same or other in 1 item)

Figure 16a: Select image for front side of Item

Figure 16b: Select image for backside of Item


Step 1: Go to Content/Media Manager/Create New folder and after that you can upload your Image.

Figure 17: Create image folder

Step 2: In Tab Image Gallery, you select to Path of your folder.

Figure 18:  Select forder image path

Step3: You can enter arbitrary all information for Image

Figure 19: Enter information for Image



Figure 20: Back end

Figure 21: Frontend