ioomeXt - Joomla Module Documentation

ioomeXt Roundabout Documenation

First of all generate a Category in Joomla Content. All Articles published in this category will be displayed in the ioomeXt Roundabout.

There are a lot of parameters in the Backend to customize the look & feel of the module.

Basic Options

Category Select the category from which content articles should be published  
No. of Items Max. number of items shown in Roundabout  
Items Ordering Sort the shown items by the field  

Items Ordering Direction

(only in Joomla 2.5)

Sort the shown items by this direction  

Include jQuery

(only in Joomla 2.5)

Include jQuery and if it shoul be included, which jQuery version should be used. ind case other Extensions or templates already include jQuery you can disable the inclusion by selecting "No".  

jQuery noConflict

(only in Joomla 2.5)

Use jQuery in noConflict Mode.  

Global Layout Settings

Area Width Width of the Area for the Roundabout 900px
Area Height Height of the Area for the Roundabout 250px
Area Background Color Background Color for Item Area transparent
Display Outside Area Display Items Outside the Main Area  
Item: Padding Inside Padding of Items 2px
Item: Height Height of Items 150px
Item: Width Width of Items 250px
Item: Background Color Background Color for Items #FFFFFF
Item: Border Border Style for Items 1px solid #999
Item: Border Radius Border Radius for Items 5px
Item: Shadow CSS - Shadow - Style for Items 0 2px 4px rgba(0, 0, 0, 0.4)

Item Layout Settings

Article Intro Image as Background Use intro image of content item as background image  
1. Content Image as Background Use 1. content image of content item as background image  
Use Plaintext of Articles always use plaintext and disable html-tags in content text  
Select a template select a template from the pre-defined templates. Select "- None Selected -" to use custom template in next field.  
Item Template Enter a custom template to use for displaying the roundabout items. e.g.
<h1 style="background: #545454; color: #EE7F01; margin: 0px; padding: 10px 0px;">
{title}
</h1>
<div style="height: 290px; line-height: 290px;">
<img src="/{content_image}" style="width: 350px; vertical-align: middle;"/>
</div>
<div style="height: 150px; background: #545454; color: #FFFFFF; margin: 0px; padding: 10px 0px;">
{plaintext}
</div>

possible parameters in the template: {url}, {title}, {plaintext}, {introtext}, {fulltext}, {intro_image}, {content_image}, {readmore}
 

Image Options

Resize Background Images If an image should be used as background image for the item roundabout can resize the images by the given item-height and item-width.  
Renew Resized Images You can define whether the resized images should be created new on every reload of the module.  

Animation Settings

Style Different Styles of animating an displaying the roundabout items.  
Duration in ms The length of time it will take to move from one child element being in focus to another (when an animation is triggered).  
Enable Drag Allows a user to rotate by clicking and dragging the area itself.  
Autoplay When true, it will automatically advance the moving elements to the next child at a regular interval given in Autoplay Duration  
Autoplay Duration The length of time (in milliseconds) between animation triggers when autoplay is playing  
Pause Autoplay on Hover When true, it will pause autoplay when the user moves the cursor over the Roundabout container.  
Navigation Position Position of Navigation Arrows  
Image for Next Select Image for Next Navigation  
Image for Prev Select Image for Prev Navigation  

Custom CSS Settings

Area Custom CSS Custom CSS Setting for Background Area. These Settings will be applied to the specific background area of the single roundabout instance.  
Item Custom CSS Custom CSS Setting for Item Area. These Settings will be applied to the specific item area of the single roundabout instance on all items.  
Global Custom CSS Here you can define custom css settings. Each item of the Roundabout can be addressed invidual by using #ITEM_NO, e.g. #ITEM_1
#ITEM_1 {background-image: linear-gradient(bottom, rgb(129,135,193) 45%, rgb(155,162,232) 73%, rgb(186,195,255) 87%);
background-image: -o-linear-gradient(bottom, rgb(129,135,193) 45%, rgb(155,162,232) 73%, rgb(186,195,255) 87%);
background-image: -moz-linear-gradient(bottom, rgb(129,135,193) 45%, rgb(155,162,232) 73%, rgb(186,195,255) 87%);
background-image: -webkit-linear-gradient(bottom, rgb(129,135,193) 45%, rgb(155,162,232) 73%, rgb(186,195,255) 87%);
background-image: -ms-linear-gradient(bottom, rgb(129,135,193) 45%, rgb(155,162,232) 73%, rgb(186,195,255) 87%);
background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.45, rgb(129,135,193)),
	color-stop(0.73, rgb(155,162,232)),
	color-stop(0.87, rgb(186,195,255))
);}
#ITEM_2 {background-image: linear-gradient(bottom, rgb(229,124,114) 10%, rgb(255,162,149) 55%, rgb(255,195,179) 78%);
background-image: -o-linear-gradient(bottom, rgb(229,124,114) 10%, rgb(255,162,149) 55%, rgb(255,195,179) 78%);
background-image: -moz-linear-gradient(bottom, rgb(229,124,114) 10%, rgb(255,162,149) 55%, rgb(255,195,179) 78%);
background-image: -webkit-linear-gradient(bottom, rgb(229,124,114) 10%, rgb(255,162,149) 55%, rgb(255,195,179) 78%);
background-image: -ms-linear-gradient(bottom, rgb(229,124,114) 10%, rgb(255,162,149) 55%, rgb(255,195,179) 78%);
background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.1, rgb(229,124,114)),
	color-stop(0.55, rgb(255,162,149)),
	color-stop(0.78, rgb(255,195,179))
);}
#ITEM_3 {background-image: linear-gradient(bottom, rgb(133,130,8) 4%, rgb(160,156,34) 52%);
background-image: -o-linear-gradient(bottom, rgb(133,130,8) 4%, rgb(160,156,34) 52%);
background-image: -moz-linear-gradient(bottom, rgb(133,130,8) 4%, rgb(160,156,34) 52%);
background-image: -webkit-linear-gradient(bottom, rgb(133,130,8) 4%, rgb(160,156,34) 52%);
background-image: -ms-linear-gradient(bottom, rgb(133,130,8) 4%, rgb(160,156,34) 52%);
background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.04, rgb(133,130,8)),
	color-stop(0.52, rgb(160,156,34))
);}
#ITEM_4 {background-image: linear-gradient(bottom, rgb(154,226,13) 20%, rgb(185,255,39) 60%);
background-image: -o-linear-gradient(bottom, rgb(154,226,13) 20%, rgb(185,255,39) 60%);
background-image: -moz-linear-gradient(bottom, rgb(154,226,13) 20%, rgb(185,255,39) 60%);
background-image: -webkit-linear-gradient(bottom, rgb(154,226,13) 20%, rgb(185,255,39) 60%);
background-image: -ms-linear-gradient(bottom, rgb(154,226,13) 20%, rgb(185,255,39) 60%);
background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.2, rgb(154,226,13)),
	color-stop(0.6, rgb(185,255,39))
);}
#ITEM_5 {background-image: linear-gradient(bottom, rgb(95,3,99) 22%, rgb(124,29,129) 61%, rgb(162,56,155) 81%);
background-image: -o-linear-gradient(bottom, rgb(95,3,99) 22%, rgb(124,29,129) 61%, rgb(162,56,155) 81%);
background-image: -moz-linear-gradient(bottom, rgb(95,3,99) 22%, rgb(124,29,129) 61%, rgb(162,56,155) 81%);
background-image: -webkit-linear-gradient(bottom, rgb(95,3,99) 22%, rgb(124,29,129) 61%, rgb(162,56,155) 81%);
background-image: -ms-linear-gradient(bottom, rgb(95,3,99) 22%, rgb(124,29,129) 61%, rgb(162,56,155) 81%);
background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.22, rgb(95,3,99)),
	color-stop(0.61, rgb(124,29,129)),
	color-stop(0.81, rgb(162,56,155))
);}
 

if you have any further questions regarding this modules please feel free to contact us