JUX Metro Contents

Created: 03/26/2015

Lastest update: 21/06/2021

By: Joomlaux

Need Support

Shows Metro Contents in Article Joomla

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


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 Category

Show/hide category

Show Author and Created

Show/hide author and create


Show/Hide description

Description Max Chars

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

Title Link Target

Select title link target


When you choose source is Image folder. You will see configure of it in here. After you choose folder image path for your gallery, that you can enter arbitrary detail for each image such as title, link or description.. Moreover you can delete or drag & drop image to change display order.

Figure 5: Tab Image Gallery

Figure 6: Detail for  Image


Image Folder

Select image Folder


Enter Title for image


Can enter Link for image


Can enter description for Image


Can enter tag for Image


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


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