Internationalize Your Website Using Translater.js

Preview:

Description:

translater.js is a JavaScript library which makes use of HTML comments to localize & internationalize your webpage in an easy way.

It uses browser cookies to store the user selection and shows the proper language on the next visit.

In addition, the library also allows you to switch image paths and alternatives based on the language you choose.

How to use it:

Add translations to the HTML comments as follows:

Hello!
<!--{es}Hola! -->
<!--{cn}你好!-->

Add the Translater.js script to the page.

<script type="text/javascript" src="dist/translater.js"></script>

Initialize the Translater.js library.

var tran = new Translater();

Switch between the languages.

// en
tran.setLang('default');
// es
tran.setLang('es');
// cn
tran.setLang('cn');

To switch between images, using the following attributes:

<img 
  alt="image" 
  alt-cn="说明" 
  title="title" 
  title-cn="标题" 
  
  src="imgae.jpg" 
  data-lang-cn="imgae_cn.jpg" 
>

Input fields are supported as well.

<input type="text" 
       placeholder="Placeholder Text"  
       placeholder-cn="输入">
<input type="button" 
       value="button" 
       value-cn="按钮">