Internationalize Web Pages With jQuery Multi Language Plugin

Yet another jQuery solution to internationalize your web page by replacing text in HTML elements with localizations (strings in different languages) defined in language JSON files.

The jQuery Multi Language plugin automatically saves user preference to local storage. When the user refreshes the page, the page will automatically be displayed in the language previously selected by the user.

In addition, the plugin automatically adds a 'Language' class to the body tag so that you can apply custom CSS styles to the webpage when switching between languages. For example, you can set the layout direction to RTL after you have switched the language to Persian.

How to use it:

1. Define translations in JSON as follows:

// en.json
{
  "head": {
    "title": "Multiple Language"
  },
  "body": {
    "multi-language": "Multi Language Jquery Plugin",
    "how-to-use": "How to use:",
    "demo": "Demo:"
  }
  // ...
}

// fa.json
{
  "head": {
    "title": "چند زبانه"
  },
  "body": {
    "multi-language": "پلاگین جی کوئری چند زبانه",
    "how-to-use": "نحوه استفاده:",
    "demo": "دمو:"
  }
  // ...
}

2. Define the property names in the key attribute as follows:

<h1 key="multi-language">jQuery Multi Language Plugin Example</h1>
<h3 key="how-to-use">How to use:</h3>
<h3 key="demo">Demo:</h3>

3. Insert the JavaScript file jquery.MultiLanguage.min.js after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.MultiLanguage.min.js"></script>

4. Switch between languages using the following methods:

setLanguage('fa');
setLanguage('en');

5. Apply your own CSS styles to the webpage when switching between languages.

body.fa {
  direction: rtl;
  text-align: right
}

body.en {
  direction: ltr;
  text-align: left
}

6. Get user preference stored in local storage.

getLanguage();

---

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