Easy Client Side Webpage Translator With jQuery - translate.js

File Size: 5 KB
Views Total: 8631
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Easy Client Side Webpage Translator With jQuery - translate.js

An easy and lightweight jQuery plugin for client-side internationalization that allows the user to translate specified strings into different languages defined in the JavaScript objects.

How to use it:

1. Insert the jQuery translate.js plugin after jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="jquery.translate.js"></script>

2. Add translations to the strings as follows:

<h2 class="trn">Hello World</h2>

<h2 class="trn" data-trn-key="hello">Hello World</h2>
var local = {
    "Hello World": {
      fr: "Bonjour le monde",
      cn: "你好世界"
    },
    hello: {
      en: "Hello World"
      fr: "Bonjour le monde",
      cn: "你好世界"
    }
};

3. Initialize the plugin and specify the default language.

var translator = $('body').translate({
    lang: "en", 
    t: local
});

4. Switch between languages with the lang method.

// FR
translator.lang("fr");

// CN
translator.lang("cn");

This awesome jQuery plugin is developed by tinoni. For more Advanced Usages, please check the demo page or visit the official website.