Translator Revolution jQuery Plugin

 

Provides documentation for the customization options.

All these settings are defined in the translator/javascript/jquery.translator.min.js file. They can be modified during the initialization process, for instance:

$(".translator").translator({
    targetSelector: "body",
    excludeSelector: ".dont-translate",
    names: false,
    cookie: false
});

 

Reference

 

  • autoSelect
    Automatically selects the page's language, just to provide visual aids.
    • possible values: true | false.
    • default value: true.
  • clearLocalStorage
    Sets whether to force the visitor's browser to clear up the stored translations and retrieve them again from the server, or not. This setting is useful when writing custom translations.
    • possible values: true | false.
    • default value: false.
  • complete
    Sets whether the completed class should be set or not. If it's set to true, a style class (defined in the completedClass setting) will be added to the clicked link.
    • possible values: true | false.
    • default value: true.
  • completedClass
    Sets the style class to be added to the clicked language's link when the translation is completed.
    • possible values: a style class string.
    • default values: "translator-completed-left".
  • containerClass
    Sets the style class to be added to the translator's container.
    • possible values: a style class string.
    • default values: "translator-container".
  • containerTemplate
    Sets the container's template. New templates can be created if the provided one doesn't fit the web page requirements. Requires good HTML and CSS knowledge.
    • possible values: any valid HTML code.
    • default value: '{{ sub_container }}'.
  • cookie
    Sets whether the selected language should be remembered (in a cookie) after a page refresh or not.
    • possible values: true | false.
    • default value: true.
  • cookiePersistency
    Sets whether the cookie should be kept after the visitor's browser is closed or not.
    • possible values: true | false.
    • default value: true.
  • customLanguages
    Sets custom languages. It provides a way to customize languages. After set, the new custom code should be added to the languages setting.
    Every custom code must include two parts separated by an underscore:
    1. Language code
    2. An arbitrary custom code
    Custom flags should be added to the flags folder. Flags can be downloaded here.
    • possible values: object of languages. For instance: { "ARGENTINIAN": "es_ar" }. Then, include the new code in the languages setting: ["es_ar", "fr", "de"].
    • default value: empty.
  • customLanguageSelectorClass
    Sets the style class used to identify custom languages. This is for internal use and can be used to apply custom styles to the custom languages.
    • possible values: a style class string.
    • default values: "translator-custom-language-".
  • excludeSelector
    Select those elements to NOT be translated. In jQuery format. For more info, check the jQuery selector guide.
    • possible values: a valid jQuery selector string.
    • default values: ".do-not-translate-me".
  • flagTemplate
    Sets the language's flag template. New templates can be created if the provided one doesn't fit the web page requirements. Requires good HTML and CSS knowledge.
    • possible values: any valid HTML code.
    • default value: '<img src="{{ src }}" alt="{{ name }}" />'.
  • flags
    Sets whether the languages flags should be displayed or not.
    • possible values: true | false.
    • default value: true.
  • flagsAndNamesClass
    Adds a style class to the translator's main container when is showing languages flags and names.
    • possible values: a style class string.
    • default values: "translator-flags-and-names".
  • flagsAndShortNamesClass
    Adds a style class to the translator's main container when is showing languages flags and short names.
    • possible values: a style class string.
    • default values: "translator-flags-and-short-names".
  • flagsClass
    Adds a style class to the translator's main container when is showing only languages flags.
    • possible values: a style class string.
    • default values: "translator-flags".
  • flagsFolder
    Sets the flags folder.
    • possible values: a front end folder path.
    • default value: images/.
  • from
    Sets the source language. Check all the available languages in the languages guide.
    • possible values: a language code name.
    • default value: en.
  • hiddenClass
    Sets the style class used to hide elements.
    • possible values: a style class string.
    • default values: "translator-hidden".
  • id
    Sets the internal id unique value. If two or more translators are being placed in the same web page, and all have the same id, then their ids will be renamed to id-<translators count>.
    It's also could be used for custom styling purposes, since the translator id will be placed in the container's class attribute:
    <div class="translator translator-container <id> translator-names">
    • possible values: a string.
    • default value: "translator-jquery".
  • languageSelectorClass
    Sets the style class used to identify the selected language. The language code will be concatenated:
    <a class="translator-language-en" title="English" href="javascript:;"><img alt="English" src="../translator/images/English.gif"><span>English</span></a>
    • possible values: a style class string.
    • default value: "translator-language-".
  • languages
    Sets the available languages. They will be rendered in the same order as they are written.
    Check all the available languages in the languages guide.
    • possible values: array of languages code names. For instance: ["en", "es", "fr", "de"].
    • default values: ["en", "es", "fr", "de", "da", "ja", "hi", "it"].
  • linkTemplate
    Sets the language's link template. New templates can be created if the provided one doesn't fit the web page requirements. Requires good HTML and CSS knowledge.
    • possible values: any valid HTML code.
    • default value: '<td><a href="javascript:;" title="{{ name }}" class="{{ language_selector_class }}">{{ content }}</a></td>'.
  • linksContainerTemplate
    Sets the languages links container template. New templates can be created if the provided one doesn't fit the web page requirements. Requires good HTML and CSS knowledge.
    • possible values: any valid HTML code.
    • default value: '<div class="{{ sub_container_class }}"><table border="0" cellspacing="0" cellpadding="0"><tbody><tr>{{ content }}</tr></tbody></table></div>'.
  • loading
    Sets whether the loading class should be set or not. If it's set to true, a style class (defined in the loadingClass setting) will be added to the clicked language's link.
    • possible values: true | false.
    • default value: true.
  • loadingClass
    Sets the style class to be added to the clicked language's link while the translation takes place.
    • possible values: a style class string.
    • default values: "translator-loading-left".
  • localStorage
    Sets whether the translations should be stored in the visitor's browser to speed up the plugin, or not. This feature is available on modern browsers only, it won't cause any impact on old browsers. However, it forces the visitor's browser to use an extra amount of memory, therefore, it might slow it down depending on how many translations are being stored.
    • possible values: true | false.
    • default value: false.
  • localStorageExpires
    Sets an expiration period for the stored translations, in days.
    • possible values: a positive integer number.
    • default value: 30.
  • nameTemplate
    Sets the language's name template. New templates can be created if the provided one doesn't fit the web page requirements. Requires good HTML and CSS knowledge.
    • possible values: any valid HTML code.
    • default value: '<span>{{ name }}</span>'.
  • names
    Sets whether the languages names should be displayed or not.
    • possible values: true | false.
    • default value: true.
  • namesClass
    Adds a style class to the translator's main container when is showing only languages names.
    • possible values: a style class string.
    • default values: "translator-names".
  • onComplete
    Sets a callback function that runs when the translation is completed. Receives seven arguments: filtered_elements, translation, source, from, to, options, restore.
    The function must be defined before the initializating of the translator.
    • possible values: a JavaScript function.
    • default value: function(filtered_elements, translation, source, from, to, options, restore) {}.
  • onInitialize
    Sets a callback function that runs when the translator is being initialized.
    The function must be defined before the initializating of the translator.
    • possible values: a JavaScript function.
    • default value: function() {}.
  • onStart
    Sets a callback function that runs when the translation starts. Receives five arguments: filtered_elements, source, from, to, options.
    The function must be defined before the initializating of the translator.
    • possible values: a JavaScript function.
    • default value: function(filtered_elements, source, from, to, options) {}.
  • requests
    Sets the maximum number of requests sent to the API at the same time. A high number of requests will translate the page faster, but might hang or even crash the internet browser.
    • possible values: a positive integer number between 1 and 9.
    • default value: 5.
  • restore
    Sets whether the restore link should be displayed or not. By clicking the restore button, all the selected text will be restored to their original content, and will clear the cookie too.
    • possible values: true | false.
    • default value: true.
  • restoreClass
    Sets the style class to be added to the restore link.
    • possible values: a style class string.
    • default values: "translator-restore".
  • restoreContainerClass
    Sets the style class to be added to the restore link's container.
    • possible values: a style class string.
    • default values: "translator-restore-container".
  • restoreTemplate
    Sets the restore link's template. New templates can be created if the provided one doesn't fit the web page requirements. Requires good HTML and CSS knowledge.
    • possible values: any valid HTML code.
    • default value: '<div class="{{ hidden_class }} {{ restore_container_class }}"><a href="javascript:;" title="Restore" class="{{ restore_class }}">Restore</a></div>'.
  • separator
    Sets a separator between the languages options.
    In order to optimize browser compatibility, the translator is built based on a table, so the separator will usually be a table cell unless the templates are changed.
    • possible values: any valid HTML code. For instance: <td>|</td>
    • default value: empty.
  • shortNames
    Sets whether the languages names should be in short mode or not.
    • possible values: true | false.
    • default value: false.
  • shortNamesClass
    Adds a style class to the translator's main container when is showing only languages short names.
    • possible values: a style class string.
    • default values: "translator-short-names".
  • subContainerClass
    Sets the style class to be added to the translator's sub container.
    • possible values: a style class string.
    • default values: "translator-loading-left".
  • targetSelector
    Select those elements to be translated. In jQuery format. For more info, check the jQuery selector guide.
    • possible values: a valid jQuery selector string.
    • default values: "body".