Translate Web Content With Google Translate API

Text
File Size: 20.44 KB
Views Total: 3254 views
Last Update:January 01, 1970
Publish Date: January 01, 1970
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

A free jQuery plugin with google-translate-flag-dropdown.js is light weight jQuery plugin Translate Web Content Using Google Translate API content that use Google Cloud Translation API to interpret web content between dialects by choosing a nation from a dropdown select containing all upheld dialects with banners.

Table of Contents

How to used :

1. Create country list and You need to load the following resources to display flags and with country names.

  1. jQuery
  2. Flag Icons
  3. Bootstrap Select Plugin
  4. Bootstrap 3/4
<!-- jQuery Is Required -->
<script src="/jquery.slim.min.js"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="/bootstrap.min.css" />
<script src="/bootstrap.min.js"></script>

<!-- Bootstrap Select -->
<link rel="stylesheet" href="/bootstrap-select.min.css" />
<script src="/bootstrap-select.min.js"></script>

<!-- Flag Icon -->
<link rel="stylesheet" href="/flag-icon.min.css" />

2. Add Script with Google Translate API.

<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>

3. Add in Element #id Google Translator Widget to the web page.

<div id="google_translate_element"></div>

4. Add Script to enable the Google Translator on your webpage.

function googleTranslateElementInit() {
  new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false }, 'google_translate_element');
}

function translateLanguage(lang) {
  googleTranslateElementInit();
  var $frame = $('.goog-te-menu-frame:first');
  if (!$frame.size()) {
    alert("Error: Could not find Google translate frame.");
    return false;
  }
  $frame.contents().find('.goog-te-menu2-item span.text:contains(' + lang + ')').get(0).click();
  return false;
}

$(function(){
  $('.selectpicker').selectpicker();
});

Done

Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :

Nola Arney

Nola Arney is a full stack web developer who has Author at jQuerypost. Her ambition for development is only matched by his desire to find the perfect meme for every occasion.

Related jQuery Plugins

You Might Also Like