Translate Web Content With Google Translate API

Text
Demo    Download
Translate Web Content Using Google Translate API
File Size: 20.44 KB
Views Total: 690 views
Last Update:December 22, 2020
Publish Date: October 08, 2020
Official Website: Go to website
License: MIT
Plugin Author: devdreamsolution

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

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.