javascript - apis - Implementando Google Translate con iconos de bandera personalizados

google-translate-api npm (11)

Actualmente, estoy usando el sencillo menú desplegable Google Translate que se encuentra aquí: http://translate.google.com/translate_tools

También me gustaría poder hacer clic en algunos de los iconos de bandera que tengo y activar las mismas llamadas a javascript que son llamadas por los enlaces basados en texto en el widget de traducción de Google.

¿Alguien tiene ideas sobre cómo lograr esto? No puedo averiguar cómo hacer clic en las banderas para iniciar el mismo comportamiento que hacer clic en los enlaces de texto de Google Translate.

¡Fue muy divertido encontrar una solución para esta pregunta!

<ul class="translation-links"> <li><a href="#" class="spanish" data-lang="Spanish">Spanish</a></li> <li><a href="#" class="german" data-lang="German">German</a></li> </ul>  <div id="google_translate_element"></div> <script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: ''en'', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, ''google_translate_element''); } </script> <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>  <script type="text/javascript"> $(''.translation-links a'').click(function() { var lang = $(this).data(''lang''); 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; }); </script>

@mogelbrod, utilicé su código anterior y funcionó perfectamente en Chrome, lo probé en Firefox y Safari, no funcionó. El evento span.click no activa el controlador de eventos de google translate.

Se me ocurrió otro método que solo quiero compartir utilizando google select en lugar del complemento basado en iframe.

<ul class="translation-links"> <li><a href="#" class="spanish" data-lang="Spanish">Spanish</a></li> <li><a href="#" class="german" data-lang="German">German</a></li> </ul>  <div id="google_translate_element"></div> <script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: ''en'', autoDisplay: false}, ''google_translate_element''); //remove the layout } </script> <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script> <script type="text/javascript"> function triggerHtmlEvent(element, eventName) { var event; if(document.createEvent) { event = document.createEvent(''HTMLEvents''); event.initEvent(eventName, true, true); element.dispatchEvent(event); } else { event = document.createEventObject(); event.eventType = eventName; element.fireEvent(''on'' + event.eventType, event); } }  $(''.translation-links a'').click(function(e) { e.preventDefault(); var lang = $(this).data(''lang''); $(''#google_translate_element select option'').each(function(){ if($(this).text().indexOf(lang) > -1) { $(this).parent().val($(this).val()); var container = document.getElementById(''google_translate_element''); var select = container.getElementsByTagName(''select'')[0]; triggerHtmlEvent(select, ''change''); } }); }); </script>

Probado en: Chrome (win & Mac), Safari (Win & Mac), FireFox (win) e IE8

Por cierto, el problema del evento span.click que encontré en Firefox y Safari podría resolverse utilizando la función triggerHtmlEvent de arriba, no lo he intentado.

El código de @mogelbrod no siempre funciona, así que lo hackeé un poco.

Si el usuario está registrado en la cuenta de Google, Google detectará su idioma y traducirá automáticamente el texto del idioma para que no pueda disparar el evento en el elemento deseado porque el atributo data-lang no será correcto.

Los usuarios que no hayan iniciado sesión en la cuenta de Google y los usuarios estadounidenses / ingleses tendrán esto.

Y por ejemplo; Los usuarios croatas tendrán esto.

En este caso es mejor mapear el orden del idioma. Por ejemplo desde arriba, eso sería

0 - Inglés
1 - francés
2 - alemán
3 - italiano

HTML:

Tenga en cuenta la propiedad de ubicación de datos (puede cambiar el orden de los elementos, pero conservar la ubicación como se indica arriba)

<div class="translation-icons" style="visibility:hidden"> <a href="#" class="eng" data-placement="0">eng icon</a> <a href="#" class="fra" data-placement="1">fra icon</a> <a href="#" class="ger" data-placement="2">ger icon</a> <a href="#" class="ita" data-placement="3">ita icon</a> </div>

JS: Tuve que cambiar el selector de búsqueda. Tenga en cuenta que cuando el usuario elige el idioma, no hay más elementos de "Elegir idioma" en #google_translate_element div, así que también tuve que manejar eso.

También es bueno no mostrar iconos hasta que se carguen todos los scripts (google translate).

$(window).load(function () { $(''.translation-icons'').css(''visibility'', ''visible''); $(''.translation-icons a'').click(function(e) { e.preventDefault(); var placement = $(this).data(''placement''); var lang_num = $(''.translation-icons a'').length; var $frame = $(''.goog-te-menu-frame:first''); if (!$frame.size()) { alert("Error: Could not find Google translate frame."); return false; } var langs = $(''.goog-te-menu-frame:first'').contents().find(''a span.text''); if(langs.length != lang_num) placement = placement+1; langs.eq(placement).click(); return false; }); });

Esta es una solución a la solución de Boris Samardžija, ya que falla cada vez que los nombres de los idiomas en el idioma del visitante tienen un orden diferente.

Primero, tenga los códigos de idioma correctos en algún atributo de los iconos. Por ejemplo, <a href="#" data-lang="German" data-class="de"> . Luego, asegúrate de tener disponible el elemento de traducción de Google, por ejemplo:

<script type="text/javascript"> var tis; function googleTranslateElementInit() { tis = new google.translate.TranslateElement({defaultLanguage: ''en'', pageLanguage: ''en'', includedLanguages: ''en,es,it,de,fr'', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, ''google_translate_element''); } </script>

Esto le permite encontrar el nombre del idioma a traducir en el idioma del visitante a través de la propiedad sl de la propiedad C del elemento Google, que es un mapeo de los códigos de idioma a los nombres:

$(window).load(function () { $(''.translation-links a'').click(function(e) { e.preventDefault(); var $frame = $(''.goog-te-menu-frame:first''); if (!$frame.size()) { alert("Error: Could not find Google translate frame."); return false; } var codes_names = tis.C.sl; var selected_lang = codes_names[$(this).data(''class'')]; $(''.goog-te-menu-frame:first'').contents().find(''a span.text:contains('' + selected_lang + '')'').click(); return false; }); });

Hice mi propia solución basada en la versión "selecta" de Google Translate:

<div id="google_translate_element"></div><script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: ''pl'', includedLanguages: ''de,en,pl'', autoDisplay: false}, ''google_translate_element''); } </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Utilicé setcookie () en PHP:

if ($_GET[''lang'']) { setcookie("googtrans", "", time() - 3600); $domena = "." . $_SERVER[''HTTP_HOST'']; setcookie("googtrans", ''/pl/'' . $_GET[''lang''], time()+(3600*24), ''/'' , $domena); }

No sé por qué google script hace 2 cookies iguales, con el mismo nombre, pero con un dominio diferente:

mira la pantalla de EditThisCookie

($ _COOKIE [] solo ve una cookie)

por lo que este código necesita nombrar dominio con "." al principio, y primero elimine la cookie "googtrans" (no funciona sin borrar; /).

y aquí están mis iconos html:

wybierz język: <a href="?lang=pl"><img src="imgcss/pl.png" alt="" /></a> <a href="?lang=en"><img src="imgcss/en.png" alt="" /></a> <a href="?lang=de"><img src="imgcss/de.png" alt="" /></a>

y para ocultar la lista de selección de google predeterminada que se genera, solo agregue una línea al código css:

#google_translate_element {display: none; }

Recuerde cambiar los valores de idioma de la página antes de usar el código anterior;)

Implementando Google Translate con iconos de bandera personalizados

Consulte este enlace

http://www.freshcodehub.com/Article/26/implementing-google-translate-with-custom-flag-icons

El beneficio de esta lista personalizada es que podemos ocultar el widget del traductor de Google y usar todo el idioma para traducir la página web.

<div id="google_translate_element" style="display: none"> </div> <script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: ''en'', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false }, ''google_translate_element''); } </script> <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script> function translate(lang) { 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; } </script>

Para implementar una solución totalmente de fondo (antes de que se incluya translate.js ), solo puede crear un archivo php que contenga

<?php setcookie(''googtrans'', ''/en''); header(''location:index.html'')?>

Si quieres tu página en español solo tienes que añadir otro archivo php como:

<?php setcookie(''googtrans'', ''/en/es''); header(''location:index.html'')?>

Finalmente vincule este archivo a cualquier etiqueta ''a''

<a href="defaultLang.php"></a>

También estaba luchando con este problema: hacer que se puedan hacer clic en las marcas y ocultar el menú de selección de gtranslate en su lugar. Es probable que Google cambie de vez en cuando, por lo que los códigos anteriores no me funcionaron ... Pensé que me habían llevado a las buenas ideas y finalmente a la solución.

mapear las lenguas. Elija los idiomas que necesita y lo que sea bueno en el orden en que se muestran en la ventana desplegable de gtranslate: los enlaces de bandera deben tener el mismo orden. ¡Es importante!
en la función probada bu google function googleTranslateElementInit (), agregue MultilanguagePage: true parametr. También he comentado el idioma predeterminado y el idioma de la página ... por alguna razón, esto funciona ...
//load the script of google <script src="http://translate.google.com/translate_a/element.js? cb=googleTranslateElementInit" type="text/javascript"></script> <script> function googleTranslateElementInit() { new google.translate.TranslateElement({ //defaultLanguage: ''en'', //pageLanguage: ''en'', includedLanguages: ''de,nl,en,es,it,fr'', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true}, ''google_translate_element'') }; //this one I need because of the first menu with "select the language" item, after the first click on the language it disappears var clickCount = 0; $(window).load(function () { $(''.translation-icons a'').click(function(e) { e.preventDefault(); var $frame = $(''.goog-te-menu-frame:first''); if (!$frame.size()) { alert("Error: Could not find Google translate frame."); return false; } //find the a links element inside the gtranlate first frame var langs = $(''.goog-te-menu-frame:first'').contents().find(''.goog-te-menu2 a''); //the number of the language in flag-elements var placement = $(this).data(''placement''); //this again I need to adjust the mapping numbers of the languages in the flag elements if (clickCount == 0){ placement = $(this).data(''placement'')+1; clickCount++; } //and finaly imitate click on the gtranslate element which is the same as the number of the language in flag link langs.eq(placement).find(''span.text'').click(); return false; }); });

Y finalmente el html de los "elementos de la bandera" (por ahora solo es texto dentro de, pero puedes poner cualquier img allí si quieres) ¡Y no olvides crear el elemento de traducción de Google!

 <div id="google_translate_element"></div> <div class="translation-icons"> <a href="#" class="nl" data-placement="0">nl</a> <a href="#" class="de" data-placement="1">de</a> <a href="#" class="en" data-placement="2">en</a> <a href="#" class="fr" data-placement="3">fr</a> <a href="#" class="it" data-placement="4">it</a> <a href="#" class="sp" data-placement="5">es</a> </div>

problema de idioma predeterminado ordenado con el siguiente código

if(lang!="English"){ $frame.contents().find(''.goog-te-menu2-item span.text:contains(''+lang+'')'').get(0).click(); }else{ console.log($frame2.contents().find(''.goog-te-banner .goog-te-button button'').get(0)); $frame2.contents().find(''.goog-te-banner .goog-te-button button'').get(1).click(); }

Ahora no se requieren scripts!

Agregue la etiqueta #googtrans(TO_LANG_CODE) a la dirección a la que se vincula su marca respectiva.

Aquí TO_LANG_CODE es el código de idioma para el idioma que desea. Esto supone que la página utiliza Google Website Translator como en la pregunta y su idioma original puede ser identificado automáticamente.

Identificar el idioma original puede ayudar a evitar errores. Para ello, utilice el formulario #googtrans(FROM_LANG_CODE|TO_LANG_CODE) .

Ejemplo:
http://nykopingsguiden.se/#googtrans(se|es) traduce la página sueca
http://nykopingsguiden.se del sueco al español.