jQuery Google Translate Plugin demos
This plugin is built to utilize the Google Translate API Version 2.
Simple Translate (German)
This example takes the text in the source text area and adds it to the target text section
Source Text: Hello World
Target Text:
View Code
HTML
<span class="simple-input">Hello World</span> <span class="simple-output"></span>JavaScript
$(document).ready(function() {
$('.simple-input').googleTranslate({
target : '.simple-output',
targetLang : 'de',
apiKey : 'YOUR API KEY'
});
});
Overwrite Text With Translation (French)
This example takes the source text and overwrites it with the translated text
Text: Hello World
View Code
HTML
<span class="overwrite-input">Hello World</span>JavaScript <
$(document).ready(function() {
$('.overwrite-input').googleTranslate({
target : '.overwrite-input',
targetLang : 'fr',
apiKey : 'YOUR API KEY'
});
});
Callback (Spanish)
This example runs a callback method to change the text to the color red onces completion of the translation commences.
Text: Hello World
View Code
HTML
<span class="callback">Hello World</span>JavaScript
$(document).ready(function() {
$('.callback').googleTranslate({
target : '.callback',
targetLang : 'es',
apiKey : 'YOUR API KEY'
}, $('.callback').css('color', '#FF0000') );
});