Translate The Webpage Using jQuery And JSON - Multi Language

Translate The Webpage Using jQuery And JSON - Multi Language
File Size: 3.48 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

The Multi Language jQuery plugin helps you create international webpages by populating web elements with JSON data in different languages.

The plugin also has the ability to remember the last language selection using the HTML5 local storage.

How to use it:

1. Load the JavaScript jquery.MultiLanguage.min.js after loading jQuery library (slim build).

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="jquery.MultiLanguage.min.js"></script>

2. Define the strings in different languages as follows:

<h1 id="demo"></h1>
// language.json
{
  "config": {
    "default": "en"
  },
  "language": {
    "en": {
      "#demo": "Hello World"
    },
    "fr": {
      "#demo": "Bonjour le monde"
    },
    "de": {
      "#demo": "Hallo Welt"
    }
  }
}

4. Initialize the plugin.

$(document).ready(function(){
  $.MultiLanguage('language.json');
})

5. Switch between languages.

$.MultiLanguage('language.json', 'fr')
$.MultiLanguage('language.json', 'de')
$.MultiLanguage('language.json', 'en')

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