Home

The "Polyglot" Language Switcher jQuery plugin allows you easily switch between the languages supported by your website. It was conceived as a drop-down menu with flag icons.

A demo of this project can be accessible from here

---

How To Change the Language

The website internationalization can also be done without PHP by following the next steps:

1. Translate all HTML files that must be translated to the desired language and then copy them to a folder named with the two letters of the language used.
2. In these HTML files, modify the image, CSS and JavaScript paths by adding ../ at their beginning, as follows:

Before

<link href="style.css" type="text/css" rel="stylesheet" id="main-style">
...
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>

After

<link href="../style.css" type="text/css" rel="stylesheet" id="main-style">
...
<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>

3. In custom.js, configure PolyglotLanguageSwitcher as follows:

if($().polyglotLanguageSwitcher){   
    polyglotLanguageSwitcher = polyglotElement.polyglotLanguageSwitcher({   
        effect: 'fade',   
        testMode: false,   
        websiteType: 'static'   
    });   
}   

Example

Let’s assume that we have a site called www.abc.com that we would like to translate into English and French. To do this without using a programming language, the next steps must be followed:

1. Move all the HTML files that must be translated in the folders en and fr. These folders must be on the same level with the the css, js, images folders.
2. Translate the HTML files in these folders into the respective languages.
3. Modify the css, js and images paths as I explained at the second point above.
4. Invoke the Language Switcher as I illustrated at point 3 above.
5. On the same level as the css, js and images folders, create the "index.php" file that contains the following code:

<?php header( 'Location: http://www.abc.com/en/index.html' ); >

Example of the initial structure (before to apply the internationalization)

css
images
js
index.html
...html
style.css

Example of the final structure (after applying the internationalization)

css
images
js
en
|index.html
|...html
fr
|__ index.html
|__ ...html
index.php
style.css