MightyGear 2.0 Tutorial

About

MightyGear is the JavaScript library made exclusively for MightyTemplate, for its Joomla templates and is based on MooTools 1.2. Library is a platform for our templates and includes several features: image slideshow, sliding menus, script-generated rounded corners, custom headers and much more. MightyGear was developed and included in each of our templates since the end of 2009. This manual is oriented for 2.0 and higher versions.

Image slideshow is unique, because it is not a module or a component and it outputs slideshow dynamically, on-the-fly. MightyGear does not use any other script, such as PHP-scripts, so it accelerates image generation.

Getting started

All you need to use our product is to have one of our templates since January 2010, because older templates do not support MightyGear or, if they do, support its older versions.

MightyGear slideshow is a special layer between your images and website's frontend. This layer contains JavaScript and user layout, which determines image path, slideshow header and image description. To create such layer, you should go to administrator panel on your Joomla website and take these steps:

1. Go to Module Manager;
2. Create custom HTML module, set module title and enable it;
3. Set "inset1" module position and publish the module;
4. If WYSIWYG editor is enabled, open HTML-editor by clicking "HTML" icon.

Now you have almost complete layer. Module title will be shown as slideshow header. As this layer contains image path and some description, it should have logical abstraction, a structure, that is user-defined. It will be the last step in order to create your animated slideshow.

<img src="images/stories/fruit/cherry.gif" alt="Image" />
<p class="text">This is a description of image slideshow</p>

Copy this code and paste into the editor. Now you should change image path in "src" attribute. For instance, if your image exists in www.example.com/images/myimage.jpg, then its path is images/myimage.jpg. So new code is:

<img src="images/myimage.jpg" alt="Image" />

What does

<p class="text"> ... </p>

<p class="text"> Place your text description here </p>

Now we can see the final code:

<img src="images/stories/myimage.gif" alt="Image" />
<p class="text"> Joomla is Open Source Matters</p>

When adding new modules to slideshow, create new module and follow this manual again. After you will get amazing slideshow with transition effects!