ioomeXt - Joomla Module Documentation

ioomeXt jsImpress Documenation

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

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 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
Item Size in % Item Size in Relation to the Main Area 75
Area Border Border Style Around the Main Area 10 px solid #fff
Area Background Color Background Color for Item Area transparent
Area Border Radius Border Radius for Main Area 5px
Area Shadow CSS - Shadow - Style for Main Area 0 2px 6px rgba(0, 0, 0, 0.2)
Font Color Default Font Color /td>
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)
Display Arrows Show Navigation Arrows  
Display Dots Show Navigation Dots at the bottom  

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  
Plaintext Number of Characters Number of characters for plaintext display 50
Plaintext Append Plaintext Append by Word Count/td> ...
Readmore Text Text for Readmore Link (Leave blank for default)  
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

Transtion Style Different Styles of animation.  
Hide Inactive Items When true, inActive Items will be visible, when false they will be faded out.  
Transition Duration in ms The length of time it will take to move from one child element being in focus to another.  
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  
Stop On Last Slide When true, the Autoplay will stop on the Last Item (e.g. to create a presentation)  

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))
);}
 

Animation Settings inside text

To use Animations for content elements inside the items you can add "data-jimpress=''" to the item which you want to be animated. e.g.

<span data-jmpress="fade after 1s step">fade in after 1s</span>
<h1 data-jmpress="fade">fade in after next action</h1>
<img src="/images/dummy.jpg" data-jmpress="fade after 1s"/>fade in after 1s</span>
<span id="item3" data-jmpress="fade after prev">fade in after another next action</span>
<span data-jmpress="fade after 700ms #item3">fade 700ms after #item3 </span>
<span id="item3" data-jmpress="fade">fade in after next action</span>
<span data-jmpress="fade after 1s">fade in after 1s</span>

 

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