Translator Revolution jQuery Plugin

 

Table of contents

1. Introduction

This guide shows how to install the Translator Revolution Lite jQuery plugin on a sample webpage.

Also provides documentation about the plugin structure and how to customize it.

2. Getting an API Key

The SurStudio Translate API requires an API Key. In order to get one, follow the steps:
  • Get the Item Purchase Code.
  • Go to http://codecanyon.net/user/SurStudio/
  • On the lower right side there's the following email form:
  • Send a message with the purchase info. The following sample message could be used as template (highlighted is the required info):

    Hello there,

    here I'm attaching the required info to get a key to use the translation service.

    Email: john.doe@emaildomain.com
    Item Purchase Code: f4b3ae24-d23f-42a3-80a6-41c37ced6961
    Website's base URL(s): mydomain.com, sales.mydomain.com, mysubdomain.mydomain.com
    Website's source language: English

  • An email will be sent back shortly, with the API Key.

3. Basic installation

  • Place the received API Key in the /translator/classes/translator.class.php file:
    /**
    * API Key. Refer to /help/api_key.html
    */
    const API_KEY = '6c565e5ad434500e8eccab5c25bd9c55aa3499b99100f9ab24b078ae';
  • Optional. Or use the Google Translation Service, in the same /translator/classes/translator.class.php file:
    /**
    * Translation Service
    *
    * @string SurStudio|Google
    */
    const TRANSLATION_SERVICE = 'Google';
    …
    /**
    * API key for the Google Translation Service. Refer to https://code.google.com/apis/console
    */
    const GOOGLE_API_KEY = 'Alhu45CHtyym86fnjuKhd753bc75mJV89dnH7fY';
  • Include the jQuery library (either from a CDN, such as Google or from the site), and the translator library and CSS in the head of the page(s) where you want to use the translator:
    <link rel="stylesheet" type="text/css" href="translator/styles/jquery.translator.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="translator/javascript/jquery.translator.min.js"></script>
  • XHTML code in the body:
    <div class="translator"></div>
  • Then, initialize the plugin using the jQuery selector. Place the following code either in the body or in the head:
    <script type="text/javascript">
    $.translator.ready(function() {
        $(".translator").translator();
    });
    </script>
  • Specify the desired options:
    <script type="text/javascript">
    $.translator.ready(function() {
        $(".translator").translator({
            targetSelector: "body",
            excludeSelector: ".not-translate",
            names: false,
            cookie: false
        }    );
    });
    </script>
  • Find all the information about the settings in the reference.

4. XHTML structure

  • After initialized:
    <script type="text/javascript">
    $.translator.ready(function() {
        $(".translator").translator();
    });
    </script>
    <div class="translator"></div>
  • The XHTML code will be:
    <div class="translator translator-container translator-jquery translator-flags-and-names">
        <div class="translator-sub-container">
            <table border="0" cellspacing="0" cellpadding="0">
            <tbody>
            <tr>
                <td class="td-translator-language-en">
                    <a href="javascript:;" title="English" class="translator-language-en"><img src="translator/images/English.gif" alt="English" /><span>English</span></a>
                </td>
                <td class="td-translator-language-es">
                    <a href="javascript:;" title="Spanish" class="translator-language-es"><img src="translator/images/Spanish.gif" alt="Spanish" /><span>Spanish</span></a>
                </td>
                <td class="td-translator-language-fr">
                    <a href="javascript:;" title="French" class="translator-language-fr"><img src="translator/images/French.gif" alt="French" /><span>French</span></a>
                </td>
                <td class="td-translator-language-de">
                    <a href="javascript:;" title="German" class="translator-language-de"><img src="translator/images/German.gif" alt="German" /><span>German</span></a>
                </td>
                <td class="td-translator-language-da">
                    <a href="javascript:;" title="Danish" class="translator-language-da"><img src="translator/images/Danish.gif" alt="Danish" /><span>Danish</span></a>
                </td>
                <td class="td-translator-language-ja">
                    <a href="javascript:;" title="Japanese" class="translator-language-ja"><img src="translator/images/Japanese.gif" alt="Japanese" /><span>Japanese</span></a>
                </td>
                <td class="td-translator-language-hi">
                    <a href="javascript:;" title="Hindi" class="translator-language-hi"><img src="translator/images/Hindi.gif" alt="Hindi" /><span>Hindi</span></a>
                </td>
                <td class="td-translator-language-it">
                    <a href="javascript:;" title="Italian" class="translator-language-it"><img src="translator/images/Italian.gif" alt="Italian" /><span>Italian</span></a>
                </td>
            </tr>
            </tbody>
            </table>
        </div>
        <div class="translator-hidden translator-restore-container">
            <a href="javascript:;" title="Restore" class="translator-restore">Restore</a>
        </div>
    </div>

5. Custom installation

  • The initialization process checks the content of the selected element to place the translator.
    If it doesn't find at least one element which class attribute contains translator-language-<language_code> (defined in the languageSelectorClass setting), the content of the selected element will be replaced by the above XHTML structure.
    In order to have the Restore link working, the element class attribute should contain restore (defined in the restoreClass setting) and its main parent should contain translator-restore-container (defined in the restoreContainerClass setting).
  • Make a custom translator:
    <div class="translator">
        <a href="javascript:;" title="Spanish" class="translator-language-es"><img src="translator/images/Spanish.gif" alt="Spanish" />Spanish</a>
        <a href="javascript:;" title="English" class="translator-language-en"><img src="translator/images/English.gif" alt="English" />English</a>
        <a href="javascript:;" title="Danish" class="translator-language-da"><img src="translator/images/Danish.gif" alt="Danish" />Danish</a>
        <a href="javascript:;" title="Ukrainian" class="translator-language-uk"><img src="translator/images/Ukrainian.gif" alt="Ukrainian" />Ukrainian</a>
        <span class="translator-hidden translator-restore-container">
            <a href="javascript:;" title="Restore" class="restore">Restore</a>
        </span>
    </div>
  • Then, initialize the plugin:
    <script type="text/javascript">
    $.translator.ready(function() {
        $(".translator").translator();
    });
    </script>

6. Frequently asked questions

  • Can I use this script on my client's website?
    -Yes. Your license includes the rights to use the script on any one website at a time.
  • Why the script doesn't work?
    Make sure you don't have multiple versions of jquery in your page. Look at the source view in your browser to see what Javascripts you are loading.
    For example:
    <script src="a-path/jquery.js" type="text/javascript"></script>
    …
    <script src="a_path/jquery.min.js" type="text/javascript"></script>
    …
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    jquery.js and jquery.min.js are the same script, the difference is that the jquery.min.js is compressed and therefore, smaller. Try to keep only one.