Switch Different Languages On The Webpage - jQuery multilang
File Size: | 23.6 KB |
---|---|
Views Total: | 6414 |
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.