Switch Languages With Ease – languageSelector

A simple, fast JavaScript plugin for creating a language selector to switch between languages on your international webpages.

Basic usage:

Insert the languageSelector’s stylesheet and JavaScript into your html page.

<link rel="stylesheet" href="language.css">
<script id="language_script" data-languages="en,fi" src="language.js"></script>

Create the language selector as this:

<language class="languageFrameClick" data-type="flag">
</language>
<language class="languageFrameSelect" data-type="select">
</language>

Create your content in multiple languages as this:

<p lang="fi" class="placeHeadline">Suomeksi.</p>
<p lang="en" class="placeHeadline">English Translation.</p>

If you’d like to switch between pages in different languages:

<link rel="alternate" href="hreflang-en.html" hreflang="en">
<link rel="alternate" href="hreflang-fi.html" hreflang="fi">

All default settings.

defaultLanguage: 'en', // Default language if no language available
nameOfSelectorFrame: 'LANGUAGE', // Name of the language selector frame element
idOfScript: 'language_script', // ID of the script element
flagPath: 'region-flags/png/', // Where are the flag images as EN.png
cookieKeyName: 'languageSelectorValue', // Cookie name for selected language
cookieExpirationDays: 3650,
styleId: 'languageSelectorStyle',
// null = no language selector | frame element of selectors
frameElementsOfSelectorFlags: null,
// null = no selectors | array of language selectors or empty array if no selectors
elementsOfLanguageSelectors: null,
elementOfScript: null,
actualLanguage: null,
languageList: {},
languageArray: new Array(),
languageHreflangs: {}, // Elements of all hreflang elements at head
debugMode: false