Installation
VJ Magic Toolset is installed using standard Joomla! installation procedure in Joomla! back-end: Extensions -> Extension Manager -> Upload Package File. Component, set of plugins and WYSIWYG button are installed.
VJ Magic Toolset plugin should be enabled in Extensions -> Plugin Manager -> VJ Magic Toolset in order to use plugin codes in articles and modules.
VJ Magic Toolset WYSIWYG editor button can be enabled in Extensions -> Plugin Manager -> Button - VJ Magic Toolset.
Plugins Usage
Extension is used by placing plugin codes in articles or modules. When page is displayed plugin code is replaced with appropriate widget or content. Prepare Content module option should be enabled if you place the plugin code in custom HTML module.
Using plugin code
Audio
Displays music player to play chosen file.
Example plugin code:
{vjaudio file="doc/file.mpg" title="This is my song"}{/vjaudio}
Plugin attributes:
file - music file to play
title - title to display above player
copyright - copyright to display below player
width - width apply to player
className - CSS class name to apply to player
Clock
Displays clock with current time or time in specified timezone.
Example plugin code:
{vjclock skin="swissRail"}{/vjclock}
Plugin attributes:
skin - skin for clock. Values: swissRail, chunkySwiss, chunkySwissOnBlack, fancy, machine, classic, modern, simple, securephp, Tes2, Lev, Sand, Sun, Tor, Cold, Babosa, Tumb, Stone, Disc, default, mochaUI1, mochaUI2, mochaUI3. Default: swissRail. It's possible to add new skins in administrator/com_vjmagictoolset/plugins/clock/js/moreskins.js file
radius - size of the clock
seconds - show seonds tick or not. Values: true, noSeconds
GMTOffset - time offset to show time from various time zones. Examples: +1, -5
CSV to Table
Shows HTML table with data from CSV file. This table can be wrapped with Data Table and Table Sorter to make table sortable and and search field.
Example plugin code:
{vjcsvtotable file="doc/file.csv"}{/vjcsvtotable}
Plugin attributes:
file - CSV file. This can be local or remove file
csvDelimiter - delimiter for values in CSV. Default: ,
Data Table
Shows sortable, filterable table with pagination. 25+ themes available
Example plugin code:
{vjdatatable query="SELECT id, title from #__content" theme="smoothness"}{/vjdatatable}
Plugin attributes:
query - SQL query to retirieve data with. _USERID in SQL query is automatically replaced with current user ID
connectionString - if not specified, Joomla! database is used. If using different database, connectionString should be specified in format: database_type, host, database_name, user, password. Supported database types: fbsql, gladius, maxdb, msql, mssql, mssqlpro, mysql, mysqli, mysqlt, odbc, postgres, postgres64, postgres7, postgres8, sqlite, sqlitepro, sybase, sybase_ace. To work with some databasee appropriate php extension may need to be installed and enabled
defaultRowCount - specifies the default number of rows per page
tableId - if specified, data table is contructed on the table with specified ID
noResults - text if no results returned
theme - theme for the table. Values: black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vader. Default: smoothness. It's possible to add new themes in administrator/com_vjmagictoolset/css/themes folder
headerNames - comma-separated list. If specified, headers will use indicated values for titles
headerWidth - comma-separated list. If specified, headers will use indicated values for widths
cellStyle - comma-separated list. If specified, cells will have indicated CSS class names applied
language - language to use for text strings like search, next, previous, etc. 50+ language files are available in administrator\components\com_vjmagictoolset\plugins\datatable\stuff\language folder. Example: language="German"
Document
Shows specified URL in iframe.
Example plugin code:
{vjdocument url="http://mysite.com"}{/vjdocument}
Plugin attributes:
url - URL to embed
width and height- dimenstions for iframe
class - CSS class to apply to iframe
Easy Chart
Shows charts from data in HTML tables.
Example plugin code:
{vjeasychart chartType="ColumnChart"}
<table>
<caption>Caption</caption>
<thead>
<tr>
<th></th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
</tr>
</thead>
<tbody>
<tr>
<th>2010</th>
<td>125</td>
<td>185</td>
<td>327</td>
</tr>
</tbody>
</table>
{/vjeasychart}
Plugin attributes:
chartType - type of chart. Values: AreaChart, LineChart, BarChart, ColumnChart, PieChart. Default: LineChart hideTable - should the original HTML table be hidden. Default: false
chartWidth and chartHeight - dimensions of the chart. Default 700 and 300 respectively
vAxis and hAxis - titles of vertical and horizonal aixs
File
Includes the content of specified file.
Example plugin code:
{vjfile file="doc/file.txt"}{/vjfile}
Plugin attributes:
file - file to include
Query
Show data from database table.
Example plugin code:
{vjquery query="SELECT name, title from profile WHERE id = _USERID"}{/vjquery}
Plugin attributes:
query - SQL query to retrieve data. _USERID in SQL query is automatically replaced with current user ID
connectionString - if not specified, Joomla! database is used. If using different database, connectionString should be specified in format: database_type, host, database_name, user, password. Supported database types: fbsql, gladius, maxdb, msql, mssql, mssqlpro, mysql, mysqli, mysqlt, odbc, postgres, postgres64, postgres7, postgres8, sqlite, sqlitepro, sybase, sybase_ace. To work with some databasee appropriate php extension may need to be installed and enabled
separator - use separator for multiple values. Default: ,
file - if specified, retrieved values will be written to file
var - if specified, retrieved values are written to PHP variable
Simple Graph
Shows graph based on specified values.
Example plugin code:
{vjsimplegraph type="Bar" theme="37signals"}
'Oranges', [1, 2, 3, 4, 4, 3];
'Apples, [4, 8, 7, 9, 8, 9]
{/vjsimplegraph}
Plugin attributes:
type - type of graph. Values: AccumulatorBar, Area, Bar, Dot, Line. Mini.Bar, Mini.Pie, Mini.SideBar, Net, Pie, SideBar, SideStackedBar, Spider, StackedArea, StackedBar. Default: Line
theme - theme for the graph. Values: keynote, 37signals, rails_keynote, odeo, pastel, greyscale. Default: keynote
tooltips - show tooltips for points on the graph. Default: false
labels - comma-separated list of labels
width and height - dimensions for the graph. Default: 400 and 300 respectively
title- graph title
SQL Table
Shows HTML table of retrieved database table data. Can be wrapped with data table or table sorter to make table sortable, filterable and add pagination
Example plugin code:
{vjsqltable query="SELECT id from #__content"}{/vjsqltable}
Plugin attributes:
query - SQL query. _USERID in SQL query is automatically replaced with current user ID
noResults - text if no results returned
connectionString - if not specified, Joomla! database is used. If using different database, connectionString should be specified in format: database_type, host, database_name, user, password. Supported database types: fbsql, gladius, maxdb, msql, mssql, mssqlpro, mysql, mysqli, mysqlt, odbc, postgres, postgres64, postgres7, postgres8, sqlite, sqlitepro, sybase, sybase_ace. To work with some databasee appropriate php extension may need to be installed and enabled
headerNames - comma-separated list. If specified, headers will use indicated values for titles
headerWidth - comma-separated list. If specified, headers will use indicated values for widths
cellStyle - comma-separated list. If specified, cells will have indicated CSS class names applied
attributes - CSS attributes to apply to the table
Table Sorter
Shows sortable, filterable table with pagination
Example plugin code:
{vjtablesorter query="SELECT id, title from #__content" filter="true"}{/vjtablesorter}
Plugin attributes:
query - SQL query to retirieve data with. _USERID in SQL query is automatically replaced with current user ID
connectionString - if not specified, Joomla! database is used. If using different database, connectionString should be specified in format: database_type, host, database_name, user, password. Supported database types: fbsql, gladius, maxdb, msql, mssql, mssqlpro, mysql, mysqli, mysqlt, odbc, postgres, postgres64, postgres7, postgres8, sqlite, sqlitepro, sybase, sybase_ace. To work with some databasee appropriate php extension may need to be installed and enabled
pager - show pagination or not. Default: false
filter - show search field or not. Default: false
noResults - text if no results returned
sort - zero-based column number for pre-sort
tableId - if specified, data table is contructed on the table with specified ID
headerNames - comma-separated list. If specified, headers will use indicated values for titles
headerWidth - comma-separated list. If specified, headers will use indicated values for widths
cellStyle - comma-separated list. If specified, cells will have indicated CSS class names applied
attributes - CSS attributes to apply to the table
pagesizes - comma-separated list of possible page sizes for drop-down
Tabs
Shows tabs with content. Responsive, changes to accordion on screen size decrease
Example plugin code:
{vjtabs}
{vjtab title="First tab"}content{/vjtab}
{vjtab title="Second tab"}content{/vjtab}
{/vjtabs}
Plugin attributes:
width - width for tabs container
className - CSS class to apply to tabs container
type - tabs type. Values: default, vertical, accordion. Default: default
Video
Shows video. Local videos, YouTube, Vimeo, Limelight, Kaltura videos supported
Example plugin code:
{vjvideo file="http://example.com/demo.mp4"}{/vjvideo}
Plugin attributes:
file - video file to show/play. Can be local or remote URL
theme - theme for the player. Values: access, barebones, darkglass
Plugins combination
Plugins can be easily combined together. It's possible to show tables and charts in tabs, audio player in table, video and clock in tabs, etc. just by placing one plugin code inside another.
Using WYSIWYG editor button
Extension comes with WYSIWYG editor button for ease of use. Once enabled in Extensions -> Plugin Manager -> Button - VJ Magic Toolset, it should appear in article editor.
Clicking the button and choosing value from the list will paste plugin code to the article.
