Translate The Webpage Using jQuery And JSON - Multi Language

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

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.