Switch Different Languages On The Webpage - jQuery multilang
| File Size: | 23.6 KB |
|---|---|
| Views Total: | 7860 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Yet another jQuery plugin for multilingual websites that automatically generates links to translate your website by switching between languages without page refresh.
How to use it:
1. Load the necessary JavaScript files in the html document.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src="src/langs.min.js"></script>
<script src="src/jquery.multilang.min.js"></script>
2. Define the strings to be translated.
<div id="example"> <h1 class="multilang" lang="es">Título</h1> <h1 class="multilang" lang="en">Title</h1> <p class="multilang" lang="es">Hola Mundo!</p> <p class="multilang" lang="en">Hello World!</p> </div>
3. Call the function on the top container. Done.
$(function () {
$('#example').multilang();
});
4. Set the initial language. Default: browser language.
$('#example').multilang({
defaultLang: 'en'
});
5. Hide the language switcher and use URL to translate the webpage.
<div id="example"> <p class="multilang" lang="es">Hola Mundo! <a href="?lang=en">EN Version</a></p> <p class="multilang" lang="en">Hello World! <a href="?lang=es">ES Version</a></p> </div>
$('#example').multilang({
menu: false
});
7. Customize the languages (Without the need of lang.js).
$('#example').multilang({
languages:{
'es':{'name':'Spanish','nativeName':'Español'},
'en':{'name':'English','nativeName':'English'}
}
});
8. Use images instead of language links.
$('#example').multilang({
pixFormat:'png',
pathToPix:'src'
});
This awesome jQuery plugin is developed by gar-cad. For more Advanced Usages, please check the demo page or visit the official website.











