Recommended Extensions close

aikon Support Center

Technical Support

Our technical support team is ready to help you with any problems you may have.  Submit a support ticket and we'll help you ASAP.



Sun - Thu: 9am - 8pm
Logo Img

Documentation aikon Awesome Compare


aikon Awesome Compare ('Compare' henceforth) allows you to insert and display a side-by-side image pair that highlights 'Before & After' conditions in a cool and easy way. Use it to display any portfolio (good for any occupation), or to interactively display and transformation you want.

Installation (Module)

This is a standard Joomla! Module. To install it you will need to log into your admin interface and select the Extension Manager under the 'Extensions' tab in your top menu (assuming you are using a standard admin interface). Once you're inside, click on the 'Upload Package File' tab (it may already be selected for you), and drag the packaged zip file into the 'Browse' button, or click on the 'Browse' button and select it. Finally, click on the 'Upload & Install' button and you're ready to go.

The module will now be available from the Module Manager found under the 'Extensions' tab in the top menu of the admin interface. An initial module will be created for you, and you can create additional modules by clicking on the 'New' button. Select the modules you have already made in order to configure them. Don't forget to publish them in the correct positioning and on the right pages.


Modules can also be included inside an article. If you'd like to do that, here is some info directly from the Joomla! Documentation portal:

Basic Settings – Configuring Your Very First Basic Compare

After you have installed and published the module it's time to add to it some content. Inside the Module Manager you'll find two fields: 'Image 1' and 'Image 2'. Select and upload two images from your computer/website. These must be standard Joomla! Media Fields. You can also use them to upload images directly or to select existing images from your website, which have been uploaded using other means.

In the 'Basic Settings' you can also set a maximum width for your module (pixels in this case) by filling out the 'Width' fields, as well as a float for the whole compare display in the 'Container Float' field. This will come in handy in various layouts and/or if you want the display to 'stick' to one side.


Heads up: Compare requires jQuery to function. If you are encountering any problems, please make sure the module is published correctly, and then try switching on 'Load jQuery' (click on 'Yes'). This will make the extension load its own jQuery.
If your new module still isn't working properly, we strongly recommend you follow our troubleshooting tips below.

Styling Your Compare

The 'Style' Field: In the 'Style' field you can customize and style your module.

Styling Your Handle

In the 'Handle Type' field you can select if you want your handle to rely on a background image or to appear as a pure CSS implementation. Proper fields will be displayed based on your selection: 'Handle Style' (which allows you to select one theme out of the selection of theme-based handles) or three color fields for the CSS-based handle (which you can also customize using your own CSS from your template).



Styling your Comparison Container

Shadow size, shadow color, border size, border color and border radius can all be applied to the container using the fields which are named accordingly, and can be found in the 'Compare Styling' tab.



The module may not work for various reasons. These can all be easily resolved.
The most common reasons are improper configuration of general module information or parameters, and/or a jQuery issue.

You should therefore make sure your module's general configurations are valid and fit your intention:

  • Make sure the module has been properly published (check its status in the Module Manager).
  • Double-check that the module is positioned correctly.
  • Make sure the module has been published on the right page(s).
  • Make sure you have the proper editing permissions (if you're using a Joomla! Access Control component).
  • Make sure the module's parameters are valid: aikon form requires correct settings. Check out the rest of the document to make sure everything has been set correctly.

Solving jQuery Issues:

Most extensions require a jQuery plugin. Many of them include added features that enable users to leverage jQuery to the fullest. The only problem is that users often upload jQuery themselves, and by doing so they overwrite the extended version of jQuery, thus preventing the extension from working properly.
The best solution is to make sure only one instance of jQuery is loaded. One way of doing that is to manually check that jQuery is NOT loaded via the form template but by Joomla! only. We also suggest you download a free plugin which can help you handle this issue. It's called jQuery Easy, and it's available here:

jquery easy

Pease notice: we are NOT responsible for any damage that may be caused by using the jQuery Easy plugin. The plugin needs to installed, enabled and configured manually.
The recommended settings for this plugin are: under the 'Basic Site Options' select 'Enable jQuery field jQuery' or 'JQuery+jQuery UI (select one of them, according to your specific needs). Under version select 1.8 and you're ready to

Want Weekly Special Offers & Deals?

Subscribe to our newsletter, and receive special offers and deals on a weekly basis!
close popup


Check out our most recent deal, don’t miss out!

  • popup
  • menu
  • parallax
  • forms
  • youtube
  • logo