jquery Multilang Plugin Examples

  1. Basic use (using complete list of languages [12kb])
  2. Specifying default language and disabling menu
  3. Custom languages
  4. Images in menu

Basic use (using complete list of languages [12kb])

Example

Título

Title

Hola Mundo!

Hello World!

html

<div id="ex1">
    <h1 class="multilang" lang="cy">Teitl</h1>
    <h1 class="multilang" lang="en">Title</h1>
    <p class="multilang" lang="cy">Dyma fy nghynnwys yn Gymraeg.</p>
    <p class="multilang" lang="en">Here is my English content.</p>
</div>

javascript

<script src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script src="src/langs.min.js"></script>
<script src="src/jquery.multilang.js"></script>
<script>
    $(function () {
        $('#ex1').multilang();
    });
</script>

css

#ex1 {
    color: #333333 !important;
}
#ex1 h1 {
    color: #999999;
}
#ex1 a:link, #ex1 a:visited {
    color: #0000FF;
    padding: 1px;
}
#ex1 a:hover, #ex1 a:active {
    color: #FFFFFF;
    background-color: #0000FF;
}
Top of page

Specifying default language and disabling menu

Example

Teitl

Title

Dyma fy nghynnwys yn Gymraeg. Mae'r querystring dal yn gweithio. English Version

Here is my English content. The querystring still works. Welsh Version

html

<div id="ex2">
    <h1 class="multilang" lang="cy">Teitl</h1>
    <h1 class="multilang" lang="en">Title</h1>
    <p class="multilang" lang="cy">Dyma fy nghynnwys yn Gymraeg. Mae'r querystring dal yn gweithio. <a href="?lang=en">English Version</a></p>
    <p class="multilang" lang="en">Here is my English content. The querystring still works. <a href="?lang=cy">Welsh Version</a></p>
</div>

javascript

<script src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script src="src/jquery.multilang.js"></script>
<script>
    $(function () {
        $('#ex2').multilang({
            defaultLang:'cy',
            menu: false
        });
    });
</script>

css

#ex2 {
    color: #333333 !important;
}
#ex2 h1 {
    color: #999999;
}
#ex2 a:link, #ex2 a:visited {
    color: #0000FF;
    padding: 1px;
}
#ex2 a:hover, #ex2 a:active {
    color: #FFFFFF;
    background-color: #0000FF;
}
Top of page

Custom languages

Example

Teitl

Title

Dyma fy nghynnwys yn Gymraeg.

Here is my English content.

html

<div id="ex3">
    <h1 class="multilang" lang="cy">Teitl</h1>
    <h1 class="multilang" lang="en">Title</h1>
    <p class="multilang" lang="cy">Dyma fy nghynnwys yn Gymraeg.</p>
    <p class="multilang" lang="en">Here is my English content.</p>
</div>

javascript

<script src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script src="src/jquery.multilang.js"></script>
<script>
    $(function () {
        $('#ex3').multilang({
            languages:{
            'cy':{'name':'Welsh','nativeName':'Cymraeg'},
            'en':{'name':'English','nativeName':'English'}
            }
        });
    });
</script>

css

#ex3 {
    color: #333333 !important;
}
#ex3 h1 {
    color: #999999;
}
#ex3 a:link, #ex3 a:visited {
    color: #0000FF;
    padding: 1px;
}
#ex3 a:hover, #ex3 a:active {
    color: #FFFFFF;
    background-color: #0000FF;
}
Top of page

Images in menu

Example

Teitl

Title

Dyma fy nghynnwys yn Gymraeg.

Here is my English content.

html

<div id="ex4">
    <h1 class="multilang" lang="cy">Teitl</h1>
    <h1 class="multilang" lang="en">Title</h1>
    <p class="multilang" lang="cy">Dyma fy nghynnwys yn Gymraeg.</p>
    <p class="multilang" lang="en">Here is my English content.</p>
</div>

javascript

<script src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script src="src/jquery.multilang.js"></script>
<script>
    $(function () {
        $('#ex3').multilang({
            pixFormat:'png',
            pathToPix:'src'
        });
    });
</script>

css

#ex4 {
    color: #333333 !important;
}
#ex4 h1 {
    color: #999999;
}
Top of page