Translate Your Site Into Multiple Languages With The language-select Plugin

language-select a lightweight jQuery solution for translating text on a website into multiple languages.

It utilizes the HTML data-lang attribute to mark up text in different languages and then shows/hides those language versions using a dropdown select menu. This makes it easy to create a multilingual site without complex coding quickly.

How to use it:

1. Download and load the index.js script after jQuery.

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

2. Mark up your text with data-lang attributes denoting the language. For example:

<p data-lang="en">Hello World!</p> 
<p data-lang="es">¡Hola Mundo!</p>

3. Create a select element to switch between languages:

<select id="select">
  <option value="es">Spanish</option>
  <option value="en">English</option>
</select>

4. Enable the language switcher. When the user chooses a language from the dropdown, language-select will show/hide the matching language text.

// select French as initial language
$.setLanguage({
  lang: "es"
});

// on change
$("#select").on("change", function () {
  // set the new language
  $.setLanguage({
    lang: $(this).val()
  });
});

5. Override the default HTML data attribute:

$.setLanguage({
  attribute: "data-language",
});

---

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